| Trasion |
11-15-2009 02:06 PM |
why won't it align...
http://trasion.com/?styleid=1
The top part, I want it to all line up together. Right now, the top part of the tabs is one pixel off, even though they're all the same size.
Here's the down-low:
I wrapped the header and those tabs in one div, and had it aligned to the center. The div's class is header_nav, and I made it a set width, but I think it's one pixel too large. But if I shorten it by one, then the tabs get bumped, and one goes on the line below.
Here's my CSS, and header template:
header template:
Code:
<center><div class="header_nav"><img src="images/misc/header.png"><br />
<div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="putlink" rel="gotsubmenu[selected]">Trasion Homepage</a></li>
<li><a href="putlink" rel="gotsubmenu">Trasion Community</a></li>
<li><a href="putlink" rel="gotsubmenu" style="float:right;">Skateboarding News</a></li>
<li><a href="putlink" rel="gotsubmenu">Skateboarding Galleries</a></li>
<li><a href="putlink" rel="gotsubmenu">Skateboarding Articles</a></li>
<li><a href="putlink" rel="gotsubmenu">Skateboarding Dictionary</a></li>
</ul>
</div>
<div id="mysubmenuarea" class="tabsmenucontentclass">
<!--1st link within submenu container should point to the external submenu contents file-->
<a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
</div>
<script type="text/javascript">
//mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)
</script></div></center>
<!-- content table -->
$spacer_open
$_phpinclude_output
CSS:
Code:
/* ######### CSS for top level tabs ######### */
.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenuclass li{
float: left;
}
.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: #373737;
color: #FFFFFF;
margin-right: 1px;
text-decoration: none;
font: bold 13px Tahoma;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px;
border-top: 1px solid #000000;
}
.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: #912F30;
color: white;
font: bold 13px Tahoma;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 0px;
border-top: 1px solid #000000;
}
/* ######### CSS for sub menu container below ######### */
.tabsmenucontentclass{
clear: left;
background: #912F30;
width: 926px;
height: 24px;
padding: 5px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 0px;
color: #FFFFFF;
font: bold 13px Arial;
}
.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}
.header_nav {
width: 939px;
background-color: #E0E0E0;
}
How can I get this lined up properly?
|
More Information