Horizontal centered list (CSS)
In order to help my friend Xmario to build his web site I modified this css bar, and because they are useful hacks, I make them public.
The problem of centered css bars usually is that between an element of the menù and the other there is an horizontal space. The author of the bar I modified used a negative margin of <li> tags to remove approximately this space. The problem is that it isn’t sharp and also if you change the text size the result is awful.
So, first of all I removed the modification:
div#navcontainer ul li
{
display: inline;
}
Then I tried to understand why there were those spaces and after many ideas I understood it. The fact is that in HTML code, when you start a new line of code without anything else as for example a <br> tag, the browser interprets that “return” as a simple space between a word and another. This is true also for the list elements.
So you have to put them all stitched together:
<li id="active">...</li><li>...</li>
But in this way the code is very uncomfortable to read and modify.
So I tried to find a way to put on every line of the code a different element of the list without problems. I resolved by creating a class (it will be not used) that lets me break the line inside the <li> tag.
If we name it zzzz the code becomes:
<div id="navcontainer">
<ul id="navlist"><li id="active"
class="zzzz"><a href="#" id="current">Element 1</a></li><li
class="zzzz"><a href="#">Element 2</a></li><li
class="zzzz"><a href="#">Element 3</a></li><li
class="zzzz"><a href="#">Element 4</a></li><li
class="zzzz"><a href="#">Element 5</a></li></ul>
</div>
And the CSS:
div#navcontainer
{
background-color: #1F00CA;
border-top: solid 1px #FFFFFF;
border-bottom: solid 1px #FFFFFF;
}
div#navcontainer ul
{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: white;
text-align: center;
margin: 0;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0px;
}
div#navcontainer ul li
{
display: inline;
}
div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff; /* the borders have the same size */
margin-right: -1px; /* the value has to be like the above but negative */
}
div#navcontainer ul li a:hover
{
background-color: #16008D;
color: white;
}
Note: the code contains also a small hack for the borders of the menù elements.
04/06/2007 Update: Added a hack to remove a bug, which made the list to be a bit too much on the right.
Andrea,
Thank you for this modified horizontal list, it is excellent!
Cheers, Ben.
Brisbane, Australia.
@ BDM, thank you too.
And note that I’m going to update it to be even more centered.
Simple yet very ingenious. I’m impressed!
Thanks.
I tried to get something like this working,,, yet here it is!
Great stuff mate.
Grazie
Prego (it means “you’re welcome”
)
But a part of the work was done by Rick Dyer, the author of the original list.
Great idea! Pity it’s not a thing to work in my case
But then, adding to your idea, isn’t it possible to remove the “class=’foobar’” at all and leave only the line break in the “li” element’s angle brackets? haven’t tested this for standards conformity, but on first sight that might work
Good luck
Uhm… maybe yes. Try it.
Brilliant! Thank you very much, this is exactly what I’ve been looking for!
Ah, curious! I always wondered how those annoying gaps got in there.. Thanks for the heads up!
You’re welcome.
Hi Andrea
The code works brilliantly in IE and Firefox but just wanted to know if you had a fix for Chrome which seems to create a bulleted list running vertically
Thanks
Alun
To be fair… I don’t know. I don’t use Chrome as it is not officially supported on Linux and it lacks a lot of needed features (at least by my POV). May you post a screenshot on a site like ImageShack so I can have a look? Thanks.
Andrea, this is great. You saved me from pulling all my hair out trying to get some old modified (broken!) code to work, and you answered some questions too. Many thanks!
I have a horizontal nav bar that has sub items. How do i center this navbar?
The same way you do that with this list. You just need to apply the css to the main list (not the sublists).
Thank You. That was very clever.