Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

center prob... 2

Status
Not open for further replies.

mthompo

Technical User
Jul 28, 2006
98
GB
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
Code:
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
Code:
  #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
Code:
<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>
 
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
 
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
 
thanks for your reply

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

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

changed html to

Code:
<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
 
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

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top