Jump to content

centred horizontal navigation


andostini
 Share

Recommended Posts

Hey Guys,

 

I want an horizontal menue to be centered. The different <li>-tags Have an variable width. Here is an example page: http://www.berkemann.com/ :

 

Here is an example code:

<div id="navi">  <ul>    <li>Home</li>    <li>BiBaBo</li>    <li>Tesssst<li>    <li>Beeeep</li>  </ul></div>
#navi {  width: 990px;  margin: 0 auto; }ul {  list-style: none;}ul li {  float: left;  padding: 20px;  border-left: solid 1px;}

Of course it would work with width: 25%; but I have an variable amount of list-items and I want the margin between items to be the same.

 

I would be very glad about your help.

 

andostini

Link to comment
Share on other sites

If I understood what you were asking, try this.....

<!DOCTYPE HTML><html><head>     <title>centred horizontal navigation</title><style type="text/css">/*<![CDATA[*/#navi {     width: 990px;     margin: 0px auto;}  ul {     list-style: none;     margin:0px auto;     text-align:center;}ul li {     padding: 20px;     border-left:1px solid black;     display:inline-block;}li:nth-child(1){              /*remove left border on the first li*/     border-left:0px;}/*]]>*/</style></head><body>     <div id="navi">          <ul>               <li>Home</li>               <li>Page Two</li>               <li>Page Three</li>               <li>Page Four</li>               <li>Page Five</li>               <li>Page Six</li>          </ul>    </div></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...