1. Home
  2. Forums Index
  3. Browser Side / CSS 3:35 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

getting horizontal list menu to expand/contract with browser width.

         

nelsonm

5:59 pm on Dec 3, 2010 (gmt 0)

10+ Year Member



Hi all,

For the life of me, i can't get this horizontal list menu to expand and contract with the width of the browser window.

Is it even possible?

If it's not possible, can i horizontally center the list menu in the browser window?

This is what i'd like it to do...

[nados.com ]

The code is as follows... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>nms test</title>

<style type"text/css">
#wrapper {
width:100%;
}

#menu {
width:100%;
background-color:#664246;
border:1px solid green;
}

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#menu ul li {
display:inline;
}

#menu ul li a {
font-family: Bangle, "Benguiat Bk BT", Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman";
color: #FFFFFF;
text-decoration: none;
text-align:center;
letter-spacing:0.1em;
padding: 0px 10px;
}

#menu ul li a:hover {
color: #fff;
background-color:#0b75b2;
}
</style>

</head>
<body>
 <table id="wrapper" cellpadding="0" cellspacing="0">
 <tr> 
 <td id="search"></td>
 </tr>
 <tr> 
 <td id="menu">
  <ul>
  <li><a id="btn1" href="#">Home</a></li>
  <li><a id="btn2" href="#">Links</a></li>
  <li><a id="btn3" href="#">About Us</a></li>
  <li><a id="btn4" href="#">Pilgrimage</a></li>
  <li><a id="btn5" href="#">Gift Shop</a></li>
  <li><a id="btn6" href="#">How to Help</a></li>
  <li><a id="btn7" href="#">Contact</a></li>
 </ul> 
 </td>
 </tr>
 <tr> 
 <td id="rule"></td>
 </tr>
 <tr id="bottom"> 
 <td></td>
 </tr>
 </table>
</body>
</html>

SuzyUK

6:57 pm on Dec 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If it's not possible, can i horizontally center the list menu in the browser window?


this may well be the easier option unless you opt for table properties which have even less support than "centering" solution below

to center the menu no matter the width, and also give it a min-width at the same to stop it wrapping, you can turn the <li> into inline-blocks instead of plain inline elements, then you can center the "blocks" and use "nowrap" on them as if they were inline text - that's what "inline-block" means ;)

to try it.. change these two rules as noted below: 

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;

/* add the two rules below */
text-align: center; /* center the li elements */
white-space: nowrap; /* acts like min-width, the li elements won't wrap */
}

#menu ul li { /* change the display type */
display:inline-block; /* see IE conditional */
}


then also add this into an ie6/7 conditional like below or add just the CSS into an already existing ie7 stylesheet 

<!--[if lt IE 8]>
<style type="text/css" media="screen">
#menu ul li {
display: inline; /*IE 6 & 7 to force display:inline-block to work on a block level element */
}
</style>
<![endif]-->

nelsonm

7:02 pm on Dec 3, 2010 (gmt 0)

10+ Year Member



Ok... i figured it out how to center the menu by adding a 25% left and right margin to the ul tag. I concluded that since the cell is 100%, the list takes up 50%. That leaves 50% for a margin, 25% left and 25% right. I also added a 1% left & right pad to the li to spread out each menu string.

Now i'm wondering how to get the menu li's to squish together to a minimum width when decreasing the browser width without any li's wrapping to the next line? 

#menu ul {
list-style-type: none;
margin:0 25%;
padding: 0;
}

#menu ul li {
display:inline;
padding: 0px 1%;

}

nelsonm

7:14 pm on Dec 3, 2010 (gmt 0)

10+ Year Member



SuzyUK,

I didn't see your post untill after i added my centering solution. I try your no wrap idea right now....

nelsonm

7:41 pm on Dec 3, 2010 (gmt 0)

10+ Year Member



I just added the "text-align" & "whit-space" properties without changing display to "inline-block". It appears to work great in both FF and IE8. I assume using "inline-block" in stead of "inline" has to do with browser compatibility? 


#menu ul {
list-style-type: none;
margin:0;
padding: 0;
text-align: center;
white-space: nowrap;
}

#menu ul li {
display:inline;
padding: 0px 1%;

}


Your "text-align: center;" works better than my "margin:0 25%".

While my margin center solution works, it tries to maintain a minimum margin so it does not quite zero the left & right margins when you squish the browser window. However, it most likely has more browser support.

Btw, it's a shame that the extra code has to be employed just to cater to browser differences. Can't they all just get a long?

SuzyUK

8:24 pm on Dec 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



your margin solution will only work on your resolution, as soon as you try and put a fixed margin (or width) onto an element you then need to try it out at every possible resolution, while it may suit it might not be perfect.

no you don't need inline-blocks, it's just that if you stick with inline you may not have the freedom to further style the <a> elements inside the <li>'s (inline elemnts do not take a width or height, whereas inline-blocks do).. but that's a choice for you, mine was just another way to do it, glad the centering/nowrap works for you :)


Btw, it's a shame that the extra code has to be employed just to cater to browser differences. Can't they all just get a long?

agreed, but it's a lot better than it was ;)

nelsonm

8:53 pm on Dec 3, 2010 (gmt 0)

10+ Year Member



Thanks for your help, i hope life is well in Scotland.

I do have another question about trying to add a background image (1 pixel wide x 27 pixel height that repeats across the item) to the menu items.

Shall i post a new thread for this?

SuzyUK

9:08 pm on Dec 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's a bit White & Cold here in Scotland right now, but all is well thank you ;)

your question is fine right here, I think this where your heights might come in..

In the first instance you should make the "default" state of the image repeat across the #menu ul, and maybe you'll want to set the height of that to 27px to match your image? though if you have a background color similar to the bottom of the image you should use it as the background color too as well as the image

e.g.
#menu ul {
height: 27px;
background: #mycolor url(myimage.jpg) repeat-x 0 0;
}

nelsonm

10:11 pm on Dec 3, 2010 (gmt 0)

10+ Year Member



I tried your suggestion, but it did not work. The following is the revised code... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>nms test</title>

<style type"text/css">
#wrapper {
width:100%;
}

#menu {
border:1px solid white;
}

#menu ul {
margin:0;
padding:0;
text-align:center;
white-space:nowrap;
list-style-type:none;
height:27px;
background: #664246 url(../images/bg-nav.gif) repeat-x 0 0; 
/*
*/
}

#menu ul li {
display:inline-block;
padding:0px 1%;
}

#menu ul li a {
font-family: Bangle, "Benguiat Bk BT", Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman";
color: #FFFFFF;
text-decoration: none;
text-align:center;
vertical-align:middle;
letter-spacing:0.1em;
}

#menu ul li a:hover {
color: white;
background-color:#0b75b2;
}
</style>

</head>
<body>
 <table id="wrapper" cellpadding="0" cellspacing="0">
 <tr> 
 <td id="search"></td>
 </tr>
 <tr> 
 <td id="menu">
 <ul>
 <li><a id="btn1" href="#">Home</a></li>
 <li><a id="btn2" href="#">Links</a></li>
 <li><a id="btn3" href="#">About Us</a></li>
 <li><a id="btn4" href="#">Pilgrimage</a></li>
 <li><a id="btn5" href="#">Gift Shop</a></li>
 <li><a id="btn6" href="#">How to Help</a></li>
 <li><a id="btn7" href="#">Contact</a></li>
 </ul> 
 </td>
 </tr>
 <tr> 
 <td id="rule"></td>
 </tr>
 <tr id="bottom"> 
 <td></td>
 </tr>
 </table>
</body>
</html>

SuzyUK

11:24 pm on Dec 3, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hmm it seems there is a "layout issue" lurking around with IE somewhere, it kept stretching the page mega wide somehow and either IE or FF didn't like the % padding on the li's or <a>'s however a couple of wee "bolts" and it looks like this works..

I've left the padding in both places, but you can remove one, best leave the one on the link if only one required and best to have it as px or em, not a percentage.. *I think* - you'd better check!

I've commented out bits of yours and added comments to the bits I added

CSS: 
<style type="text/css" media="screen">
#wrapper {width:100%;}

#menu {border: 1px solid #fff;}

#menu ul {
list-style:none;
margin:0;
padding:0;
text-align:center;
white-space:nowrap;
height: 27px;
background: #664246 url(../images/bg-nav.gif) repeat-x 0 0;
}

#menu ul li {
display:inline-block;
padding: 0 10px; /* IE only like this in px put you can put onto the <a> instead see below */
}

#menu ul li a {
font-family: Bangle, "Benguiat Bk BT", Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman";
color: #FFFFFF;
text-decoration: none;
/*text-align:center;*/
/* vertical-align: middle;*/
line-height: 27px; /*try this for vertical alignment it makes links take same height as menu items as well as centering vertically*/
letter-spacing: 0.1em;
padding: 0 10px; /* added here for IE but it seems like FF doesn't like it unless it's px either! */
float: left; /* optional, but it makes the links fill the same height as menu */
}

#menu ul li a:hover {
color: white;
background-color:#0b75b2;
}
</style>
<!--[if lt IE 8]>
<style type="text/css" media="screen">
#menu ul li {
display:inline;
}
</style>
<![endif]-->

nelsonm

11:41 pm on Dec 3, 2010 (gmt 0)

10+ Year Member



I'll look at it after dinner, thanks.

nelsonm

3:40 am on Dec 4, 2010 (gmt 0)

10+ Year Member



Thanks, But I'm going to put this aside for the moment and will start a new thread on another related matter. I hop you can help.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 3:35 pm May 1, 2026