Fill in remaining space on each side of horisontal menu

[swoop]

Hi
I am currently making a small website, were i have decided to make a horisontal menu. Not a big deal and i have a <ul> were i have gotten everything like i want it for each menu item. However since i represent each menu item as a block in my css i would also like the menu to reside on a horisontal background bar so to speak. So that when nothing else is going on it looks like one big solid colored horisontal bar with menu items across it.

My issue is the following. I need to place some elements on each side of the menu blocks i have to fill in the gaps on each side. The reason i cannot just simply make a background for the entire <ul> is because on hover on the menu items i have set background: none so make it transparent and display the bottom part of my header. It works just fine, i just need to fill in the gaps on each side of the menu now.

Any ideas ?

If i fill in a div and set the width to 100% it will drop to a new line and display the entire width of my container :(

My current Css

Code:

ul#nav li a{
display: block;
height: 20px;
margin-left: 0px;
float: left;
margin-top: 205px;
color: black;
font-weight: bold;
text-decoration: none;
background: blue;
}

ul#nav li a:hover, ul#nav li a:active {
color: grey;
background: none;
}

And accompanying html snippet

Code:

• Menu Item 1
• Menu Item 2
• Menu Item 3
• Menu Item 4

It should also be noted that the entire page is limited in witdh by a container div.

Hope somebody can help me. My current ‘solution’ is to hardcode width to each menu item, and place a similar non-linked div on each side of the menu with the manually calculated witdh. But i would prefer some solution that only sets width on each menu item and lets the gaps get filled in automatically somehow.

[rjmccollam]

Since you don’t want to do a background for your nav due to the hover state, I would try simply adding a <li> to the beginning and end of the list and giving it a special class where you can set a specific width.

[swoop]

After posting yesterday i added a <li> contaiing a <div> with a special class just for filler.
this works just fine, but i have to hardcode the width manually and i would prefer a solution that simply fill in reamaining width somehow. I was hoping that a width of 100% on the filler element would work, but it takes up a brand new line filling the page-wrap completely :(

Of course what you suggest (and i did) with manually adding an element before and after the list that is filling the gap with width set in px manually works, but the other solutions would be more dynamic should there be extra menu points ect :)

[Author]

Posts