[Solved] Simplified center horizontal menu problem
Regular
Posted: Mon, 2007-11-26 15:04
Below is a code snippet where I have tried to get a horizontal menu centered. The ul is "somewhat" centered because I have set the width to 500px. Then the margin has something to work with. However, I would prefer to not set the width. The reason for that is because the text in the li's can change, AAA,BBB,CCC,DDD is just nonsense text.
So what I would like to achieve is for it to stay centered when different kinds of texts appear instead of AAA,BBB,CCC,DDD. I guess what needs to be done is for the ul to set its width "on-the-fly" so to speak. And how do I do that (if that thinking is correct)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>css</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
font: bold 16px verdana;
}
#footer {
width: 1000px;
height: 30px;
clear: both;
border: 1px solid red;
}
#footer a {
font-weight: bold;
color: #000;
}
#footernav ul {
margin: 0 auto;
width: 500px;
border: 1px solid green;
}
#footernav li {
float: left;
line-height: 30px;
padding: 0 15px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div>
<div id="footer">
<div id="footernav">
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
<li><a href="">DDD</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Guru
Posts: 9199
Joined: 2004-06-30
Location: Milton Keynes
http://www.cssplay.co.uk/menu
Posted: Mon, 2007-11-26 17:51
http://www.cssplay.co.uk/menus/centered_float_left.html
See if that give you any ideas
Regular
Posts: 11
Joined: 2006-08-14
Thanks thepineapplehead,
Posted: Tue, 2007-11-27 10:01
Thanks thepineapplehead, that page displayed a way to solve my problem. Thanks a bunch
For those that might find this thread with a similar problem, below is the edited code, that worked for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>css</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
font: bold 16px verdana;
}
#footer {
width: 1000px;
height: 30px;
clear: both;
border: 1px solid red;
}
#footer a {
font-weight: bold;
color: #000;
}
#footernav ul {
margin: 0 auto;
list-style: none;
display: table;
white-space: nowrap;
border: 1px solid green;
}
#footernav li {
display: table-cell;
line-height: 30px;
padding: 0 15px;
border: 1px solid blue;
}
</style>
<!--[if IE]>
<style type="text/css">
#footernav ul {
display: inline-block;
}
#footernav ul {
display: inline;
}
#footernav ul li {
float:left;
}
#footernav {
text-align: center;
}
</style>
<![endif]-->
</head>
<body>
<div id="footer">
<div id="footernav">
<ul>
<li><a href="">AAA</a></li>
<li><a href="">BBB</a></li>
<li><a href="">CCC</a></li>
<li><a href="">DDD</a></li>
</ul>
</div>
</div>
</body>
</html>
Guru
Posts: 9199
Joined: 2004-06-30
Location: Milton Keynes
Thanks for getting back to
Posted: Tue, 2007-11-27 19:02
Thanks for getting back to us