HTML and CSS

CSS Nav Bar Help needed.

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: May 2004

Posts: 102

Reputation: kained is an unknown quantity at this point

Solved Threads: 0

kained

Offline

Junior Poster

CSS Nav Bar Help needed.

Apr 11th, 2007

Right. I'm designing a site and I at the moment have a very basic nav bar on it. What i want to do is take out the underlines for the links and put an icon next to the text(like a bullet point) for some reason it isn't working, anyone feel like helping me out. I will change all the fonts and formats later so it doesn't matter for now.

css code

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

 html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
/*div#extra{background:#FF8539}*/
/*div#footer{background: #333;color: #FFF}*/
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
 
div#wrapper{float:left;width:100%}
div#content{margin-left:200px}
div#content{padding-top:20px}
div#navigation{float:left;width:200px;margin-left:-100%}
div#extra{clear:left;width:100%}
 
/* The following is the css for a nav bar */
#navlist
{
margin-left: 0;
padding-left: 0;
padding-top:100px; 
list-style: none;
}
 
#navlist li 
{
padding-left: 10px;
background-image:url(../Documents and Settings/Dave/My Documents/appleorganics/appleicon.gif)   ;
background-repeat: no-repeat;
background-position: 0 .5em;
}

and here is my html for the nav div tag.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
 								<div id="navigation">
									<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>  
<li><a href="#">Your Account</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Issues</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
 								<div id="navigation">
									<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>  
<li><a href="#">Your Account</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Issues</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

what have i done wrong?

dave

Last edited by kained; Apr 11th, 2007 at 10:16 am.

•

Join Date: Mar 2005

Posts: 192

Reputation: stupidenator is an unknown quantity at this point

Solved Threads: 4

stupidenator stupidenator is offline

Offline

Junior Poster

Re: CSS Nav Bar Help needed.

Apr 11th, 2007

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

#navlist
{
margin-left: 0;
padding-left: 0;
padding-top:100px; 
list-style: none;
}
 
#navlist li
{
padding-left: 10px;
background: url(../Documents and Settings/Dave/My Documents/appleorganics/appleicon.gif) no-repeat left #356AA0;
}
 
#navlist li a, #navlist li a:link, #navlist li a:visited {
	text-decoration: none;
	color: #FFF;
}
 
#navlist li a:hover {
	text-decoration: underline;
	color: #88AC0B;
}