crmpicco
03-25-2008, 11:45 PM
At my sire I have five tabs at the top of the page that are <ul>s and <li>s created with the code:
<div id="main">
<ul id="tabs">
<li><a href="/"><span style="font-size: 9pt;">Home</span></a></li>
<li><a href="/mini/phpBB2/index.php"><span style="font-size: 9pt;">Forum</span></a></li>
<li><a href="/mini/en/galleries.php"><span style="font-size: 9pt;">Galleries</span></a></li>
<li><a href="/mini/en/contact.php"><span style="font-size: 9pt;">Contact</span></a></li>
<li><a href="/mini/en/links.php"><span style="font-size: 9pt;">Links</span></a></li>
</ul>
</div>
CSS styling:
#main {
width: 62em;
position: absolute;
top: 74px;
left: 70%;
margin-left: -31em;
padding: 0;
}
#tabs {
font-family: Verdana;
font-size: .95em;
margin: 21px 0 0 21px;
padding: 0;
height: 1.7em;
}
#tabs li {
float: left;
list-style: none;
background: #008000 url(/mini/images/tab-right-green-new.gif) top right no-repeat;
padding:0;
margin:0 5px 0 0;
}
#tabs li.on {
background-color: #003300;
}
#tabs li a {
background:url(/mini/images/tab-left-green.gif) top left no-repeat;
display: block;
float: left;
width: 7em;
line-height: 1.7em;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}
#tabs a:hover, #tabs a:active {
text-decoration:underline;
color:#6f6f3a;
}
Those with a larger monitor (19"+) may notice that the tabs do not sit in the middle of the main table? How can I make this happen?
Cheers,
Picco
<div id="main">
<ul id="tabs">
<li><a href="/"><span style="font-size: 9pt;">Home</span></a></li>
<li><a href="/mini/phpBB2/index.php"><span style="font-size: 9pt;">Forum</span></a></li>
<li><a href="/mini/en/galleries.php"><span style="font-size: 9pt;">Galleries</span></a></li>
<li><a href="/mini/en/contact.php"><span style="font-size: 9pt;">Contact</span></a></li>
<li><a href="/mini/en/links.php"><span style="font-size: 9pt;">Links</span></a></li>
</ul>
</div>
CSS styling:
#main {
width: 62em;
position: absolute;
top: 74px;
left: 70%;
margin-left: -31em;
padding: 0;
}
#tabs {
font-family: Verdana;
font-size: .95em;
margin: 21px 0 0 21px;
padding: 0;
height: 1.7em;
}
#tabs li {
float: left;
list-style: none;
background: #008000 url(/mini/images/tab-right-green-new.gif) top right no-repeat;
padding:0;
margin:0 5px 0 0;
}
#tabs li.on {
background-color: #003300;
}
#tabs li a {
background:url(/mini/images/tab-left-green.gif) top left no-repeat;
display: block;
float: left;
width: 7em;
line-height: 1.7em;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}
#tabs a:hover, #tabs a:active {
text-decoration:underline;
color:#6f6f3a;
}
Those with a larger monitor (19"+) may notice that the tabs do not sit in the middle of the main table? How can I make this happen?
Cheers,
Picco