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

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.

<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

Recommended Answers

All 2 Replies

#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;
}

Here is what I changed in your css for the navlist and it seemed to work on my computer. Is this what you are looking for?

perfect cheers man

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.