center prob... 2

[mthompo]

have the following css to put a top bar menu on the page
but cant get the menu to center in the page
it uses 140px in this line

padding:5px 5px 0 140px;

...to start the menu 140pixels from left - but i want the menu to center in the page - have tried float:center all over the place but doesnt help, any ideas welcome

css look like

  #tabs2 {
      float:center;
      width:100%;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #84776B;
      }
    #tabs2 ul {
          margin:0;
          padding:5px 5px 0 140px;
          list-style:none;
      }
    #tabs2 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs2 a {
      float:left;
      background:url("images/tableft2.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 2px;
      text-decoration:none;
      }
    #tabs2 a span {
      float:left;
      display:block;
      background:url("images/tabright2.gif") no-repeat right top;
      padding:2px 10px 2px 6px;
      color:#84776B;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs2 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs2 a:hover span {
      color:#74675B;
      }
    #tabs2 a:hover {
      background-position:0% -42px;
      }
    #tabs2 a:hover span {
      background-position:100% -42px;
      }

      #tabs2 #current a {
              background-position:0% -42px;
      }
      #tabs2 #current a span {
              background-position:100% -42px;
      }

html

<div id="tabs2">
<ul>
<li id = "current"><a href="#"><span>HOME</span></a></li>
<li><a href="#">                          
<li><a href="#"><span>ABOUT US</span></a></li>
<li><a href="#"><span>SPECIAL OFFERS</span></a></li>
<li><a href="#"><span>CAREERS</span></a></li>
<li><a href="#"><span>CONTACT US</span></a></li>
</ul>
</div>

 

[traingamer]

There is no float: center value. The only valid selections are left, right and none.
One way to center it would be to wrap it in a div, with text-align: center, then add text-align: left to #tabs2.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ChrisHunt]

Take out all the floats - the float:center on #tabs2 won't do anything, and the float:left on the a and span elements will shove them over to the left. Also remove the [tt]display: block[/tt] on the span.

Now, you've already told it to make the <li>s [tt]display:inline[/tt], all you have to do is get those inline elements centred. Simply give the ul [tt]text-align: center[/tt] and that should do the trick.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[mthompo]

thanks for your reply

added this style

#headermenu {margin:0 auto;width:100%;height:100px;float:center;text-align: center;}

added to #tabs2

#tabs2 {
text-align: left;
width:100%;
font-size:93%;
line-height:normal;
border-bottom:1px solid #84776B;
}

changed html to

<div id="headermenu">
<div id="tabs2">
<ul>
<li id = "current"><a href="#"><span>HOME</span></a></li>
<li><a href="#">                          
<li><a href="#"><span>ABOUT US</span></a></li>
<li><a href="#"><span>SPECIAL OFFERS</span></a></li>
<li><a href="#"><span>CAREERS</span></a></li>
<li><a href="#"><span>CONTACT US</span></a></li>
</ul>
</div>
</div>

but menu doesnt collapse when page shrinks - stays in center - am using IE

 

[mthompo]

many thanks - went with chris' solution as works great
anyone who reads this dont forget to remove the 140 padding on tabs2 ul

thanks again