PDA

View Full Version : add some styling to the list


dazzclub
03-28-2007, 09:32 AM
hi people,

ive got a top nav using the css list and all that. I would like to put an arrow or any mark besides the link to make it stand out at the moment im having some trouble.

you can have a look at the site www.drinkpromo.com/new, its the white nav bar im talking about.

here is my html code

-----------------------

<div id="sideNav">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="game-cards.html" target="_self" >game cards &amp; stickers</a></li>
<li><a href="beers-mats-coasters.html" target="_self" >beer mats &amp; coasters</a></li>
<li><a href="thermometers.html" target="_self" >thermometers</a></li>
<li><a href="straws.html" target="_self">straws &amp; stirrers</a></li>
<li><a href="glassware.html" target="_self">glassware</a></li>
<li><a href="point-of-sale.html" target="_self" >p.o.s</a></li>
<li><a href="on-packaging.html" target="_self">labels &amp; packaging</a></li>
</ul>
</div>
</div>

-----------------------

and here is the css code
-------------------------

#navcontainer ul
{
position:absolute;
border: 1px solid #FFFFFF;
top:0px;
left:0px;
margin-top:0px;
padding-left: 0;
margin-left: 0;
background-color: #FFFFFF;
color: White;
font-family: Verdana;
font-size:10px;
width: 793px;
z-index: 60;
}

#navcontainer ul li { display: inline; margin:0px;}

#navcontainer ul li a
{
margin:0px;
padding: 0.2em 1em;
background-color: #FFFFFF;
color: #2C80B1;
padding-left:15px;
padding-right:12px;
text-decoration: none;
float: left;
/*border-right: 1px solid #fff;*/
}

#navcontainer ul li a:hover
{
background-color: #369;
color: #fff;
}


-------------------------

domedia
03-28-2007, 02:09 PM
http://css.maxdesign.com.au/listamatic/ look at the horizontal examples. Projectseven uses a little box next to their links.