rhodarose
08-05-2010, 10:05 AM
Good day!
I got a navigation bar in dynamicdrive and the problem is the alignment of the text link:
here is the code of css and html:
<style type="text/css">
#nav_vertical {
position:absolute;
width:191px;
height:111px;
z-index:7;
left: 10px;
top: 159px;
}
#nav_vertical ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
#nav_vertical li{
display:inline;
margin: 0 0 0 0;
padding: 0;
text-transform:uppercase;
}
#nav_vertical a{
float:left;
color: green;
/*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}
#nav_vertical a span{
float:left;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:9px 9px 2px 6px;
}
#nav_vertical a:hover{
color:#00CC00;
}
#nav_vertical a:hover span{
color: #00CC00 ;
}
#nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
/*background-color: #678b3f; */
color:#FFFFFF
}
</style>
<div id="nav_vertical">
<ul>
<li id="current"><a href="player.php" title="PLAYERS"><span>PLAYERS</span></a></li>
<li><a href="photos.php" title="PHOTOS"><span>PHOTOS</span></a></li>
<li><a href="news.php" title="NEWS"><span>NEWS</span></a></li>
</ul>
</div>
the output of this code is like this:
PLAYERS PHOTOS
NEWS
I want that like this:
PLAYERS
PHOTOS
NEWS
I got a navigation bar in dynamicdrive and the problem is the alignment of the text link:
here is the code of css and html:
<style type="text/css">
#nav_vertical {
position:absolute;
width:191px;
height:111px;
z-index:7;
left: 10px;
top: 159px;
}
#nav_vertical ul{
font: bold 12px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
#nav_vertical li{
display:inline;
margin: 0 0 0 0;
padding: 0;
text-transform:uppercase;
}
#nav_vertical a{
float:left;
color: green;
/*background: #8cb85c url(layout_image/color_tabs_left.gif) no-repeat left top;*/
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}
#nav_vertical a span{
float:left;
display:block;
/*background: transparent url(layout_image/color_tabs_right.gif) no-repeat right top;*/
padding:9px 9px 2px 6px;
}
#nav_vertical a:hover{
color:#00CC00;
}
#nav_vertical a:hover span{
color: #00CC00 ;
}
#nav_vertical #current a, #nav_vertical #current span{ /*currently selected tab*/
/*background-color: #678b3f; */
color:#FFFFFF
}
</style>
<div id="nav_vertical">
<ul>
<li id="current"><a href="player.php" title="PLAYERS"><span>PLAYERS</span></a></li>
<li><a href="photos.php" title="PHOTOS"><span>PHOTOS</span></a></li>
<li><a href="news.php" title="NEWS"><span>NEWS</span></a></li>
</ul>
</div>
the output of this code is like this:
PLAYERS PHOTOS
NEWS
I want that like this:
PLAYERS
PHOTOS
NEWS