PDA

View Full Version : CSS Help

tommyxv
06-16-2006, 12:01 AM
How do I get this CSS navbar to be centered on the page. Here is the current code...

/*- Menu Tabs H--------------------------- */

#tabsH {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}

#tabsH #current a {
background-position:0% -42px;
}
#tabsH #current a span {
background-position:100% -42px;
}
-->
</style>
</head>

<body>
<h2>Tab Menu H</h2>
<div id="tabsH">
<ul>
<!-- CSS Tabs -->
<li id="current"><a href="Home.html"><span>Home</span></a></li>
<li><a href="Products.html"><span>Products</span></a></li>
<li><a href="Services.html"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>
<li><a href="Order.html"><span>Order</span></a></li>
<li><a href="News.html"><span>News</span></a></li>
<li><a href="About.html"><span>About</span></a></li>

</ul>
</div>
</body>
</html>

https://vborg.vbsupport.ru/external/2006/06/3.gif
Freesteyelz
06-16-2006, 12:39 AM
I didn't do much to the code but replace this block:


#tabsH {
line-height:normal;
text-align:center;
font-size:93%;
background:#000;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsH li {
display:inline;
}
#tabsH a {
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
tommyxv
06-16-2006, 01:07 AM
That got it centered, but i lost the padding for txt. The text is sitting on the bottom now. :(

Thanks for the help.
Freesteyelz
06-16-2006, 01:45 AM
For the text you can always do:


vertical-align:middle;


And add back the following:


padding:3px /*whatever value you want */
margin:0;


That should fix it. :)