3 replies [Last post]
Morticus
Offline
Regular
Last seen: 10 years 14 weeks ago
Joined: 2006-08-14
Posts: 11
Points: 0

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)?

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;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

http://www.cssplay.co.uk/menu

Verschwindende wrote:
  • CSS doesn't make pies

Morticus
Offline
Regular
Last seen: 10 years 14 weeks ago
Joined: 2006-08-14
Posts: 11
Points: 0

Thanks thepineapplehead,

Thanks thepineapplehead, that page displayed a way to solve my problem. Thanks a bunch Smile

For those that might find this thread with a similar problem, below is the edited code, that worked for me.

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;
}



#footernav ul {
display: inline-block;
}
#footernav ul {
display: inline;
}
#footernav ul li {
float:left;
}
#footernav {
text-align: center;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Thanks for getting back to

Thanks for getting back to us Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies