...

View Full Version : How do I assign a different image to each link using CSS?



juxmedia
10-04-2007, 04:58 PM
can you tell me how to asign a difernt image to each link in this code useing css



<div id="nav">
<ul>
<li><a href="w" title="webdesign link">webdesign</a></li>
<li><a href="p" title="printing Link">printing</a></li>
<li><a href="a" title="advertising link">Advetising</a></li>
<li><a href="h" title="hotsing link">Hosting</a></li>
</ul>
</div>

vtjustinb
10-04-2007, 05:08 PM
Sure, assuming you want to use the image as a bullet:



<div id="nav">
<ul>
<li id="design"><a href="w" title="webdesign link">webdesign</a></li>
<li id="print"><a href="p" title="printing Link">printing</a></li>
<li id="advert"><a href="a" title="advertising link">Advetising</a></li>
<li id="host"><a href="h" title="hotsing link">Hosting</a></li>
</ul>
</div>

Then in the CSS:



#nav #design,
#nav #print,
#nav #advert,
#nav #host {
link-style: none;
padding-left: 20px;
height: 20px;
background-image: none;
background-position: left center;
background-repeat: no-repeat;
}
#nav #design { background-image: url(img/design.png); }
#nav #print { background-image: url(img/print.png); }
#nav #advert { background-image: url(img/advert.png); }
#nav #host { background-image: url(img/host.png); }

juxmedia
10-04-2007, 05:48 PM
cheers for the code but i still cant seem to get the images to show up

this is my css


html, body {
margin:0;
padding:0;
}

body {
font-family: "Lucida grande", verdana, sans-serif;
font-size:11px;
color:#333;
text-align:center;
background:url(images/bg_gradient.jpg) repeat-x;

}

#wrap {
width:870px;
margin:auto;
text-align:left;
background-position:center;
background:url('images/mid_bg.jpg') repeat-y;

}

#hdr {
height:352px;
margin:0;
padding: 15px 20px;
background-position:center;
background:url('images/top_bg.jpg') no-repeat;
}

#hdr h1 {
font-size:1px;
color:#333333;
text-indent:-50000em;
width:250px;
height:225px;
margin:100px 0;
padding:0;
background:url('images/logo.png') no-repeat;
}

#hdr h1 a {
display:block;
height:55px;
width:156px;
}

#hdr p {
float:right;
color:#fff;
text-shadow:2px 2px #333;
}

#hdr p a {
color:#fff;
text-decoration:none;
}

#hdr p a:hover {
color:#44cd44;
}

#nav {
float:right;
padding:0 1px;
width:260px;
height:220px;
text-align: right;
}
#nav ul li a {
display:block;

}

#nav #design,
#nav #print,
#nav #advert,
#nav #host {
link-style: none;
padding-left: 20px;
height: 260px;
background-image: none;
background-position: left center;
background-repeat: no-repeat;
}
#nav #design { background-image: url(img/webdesignlink.png); }
#nav #print { background-image: url(img/printing.png); }
#nav #advert { background-image: url(img/advert.png); }
#nav #host { background-image: url(img/host.png); }

#content {
float:left;
width:500px;
padding-left:100px;
}

#content h3 {
color:#44cd44;
}

#ftr {
margin-top:0;
padding-bottom:15px;
padding-left:222px;
background:url('images/ftr.jpg') no-repeat bottom;

}

.clear {
line-height:1px;
height:1px;
clear:both;
}



this is my html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Our Sample Website</title>
<link href="juxmedia.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="hdr"><p><a href="#" title="welcom link">juxmedia</a>|<a href="#" title"portfolio link">portfolio</a>|<a href="#" title="info link">info</a>|<a href="#" title="services link">services</a>|<a href="#" title="theteam link">theteam</a>|<a href="pricing link">pricing</a>|<a href="contact link">contact</a></p>
<h1><a href="/" title="homepage link">Jux media</a></h1>
</div><div id="content">
<h2>Main Page Title</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas facilisis. Fusce aliquam vehicula purus. In hac habitasse platea dictumst. Etiam velit. Maecenas posuere bibendum neque. Donec nec arcu eu nunc elementum lacinia. Curabitur lacus. Cras augue lacus, elementum at, tristique a, luctus eu, nisi. Cras augue est, elementum eget, ullamcorper id, consequat ultrices, ipsum. Etiam sed sapien. Nam a nisl nec erat porta venenatis. Nulla volutpat vestibulum mauris. Phasellus dignissim vulputate nibh. Suspendisse tincidunt. Nulla tristique ipsum sed risus. Etiam molestie tristique nisl. Nunc congue. Morbi imperdiet.</p>
<h3>Page Sub Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas facilisis. Fusce aliquam vehicula purus. In hac habitasse platea dictumst. Etiam velit. Maecenas posuere bibendum neque. Donecnec arcu eu nunc elementum lacinia. Curabitur lacus. Cras augue lacus, elementum at, tristique a, luctus eu, nisi. Cras augue est, elementum eget, ullamcorper id, consequat ultrices, ipsum. Etiam sed sapien. Nam a nisl nec erat porta venenatis. Nulla volutpat vestibulum mauris. Phasellus dignissim vulputate nibh. Suspendisse tincidunt. Nulla tristique ipsum sed risus. Etiam molestie tristique nisl. Nunc congue. Morbi imperdiet.nec arcu eu nunc elementum lacinia. Curabitur lacus. Cras augue lacus, elementum at, tristique a, luctus eu, nisi. Cras augue est, elementum eget, ullamcorper id, consequat ultrices, ipsum. Etiam sed sapien. Nam a nisl nec erat porta venenatis. Nulla volutpat vestibulum mauris. Phasellus dignissim vulputate nibh. Suspendisse tincidunt. Nulla tristique ipsum sed risus. Etiam molestie tristique nisl. Nunc congue. Morbi imperdiet.nec arcu eu nunc elementum lacinia. Curabitur lacus. Cras augue lacus, elementum at, tristique a, luctus eu, nisi. Cras augue est, elementum eget, ullamcorper id, consequat ultrices, ipsum. Etiam sed sapien. Nam a nisl nec erat porta venenatis. Nulla volutpat vestibulum mauris. Phasellus dignissim vulputate nibh. Suspendisse tincidunt. Nulla tristique ipsum sed risus. Etiam molestie tristique nisl. Nunc congue. Morbi imperdiet.nec arcu eu nunc elementum lacinia. Curabitur lacus. Cras augue lacus, elementum at, tristique a, luctus eu, nisi. Cras augue est, elementum eget, ullamcorper id, consequat ultrices, ipsum. Etiam sed sapien. Nam a nisl nec erat porta venenatis. Nulla volutpat vestibulum mauris. Phasellus dignissim vulputate nibh. Suspendisse tincidunt. Nulla tristique ipsum sed risus. Etiam molestie tristique nisl. Nunc congue. Morbi imperdiet.nec arcu eu nunc elementum lacinia. Curabitur lacus. Cras augue lacus, elementum at, tristique a, luctus eu, nisi. Cras augue est, elementum eget, ullamcorper id, consequat ultrices, ipsum. Etiam sed sapien. Nam a nisl nec erat porta venenatis. Nulla volutpat vestibulum mauris. Phasellus dignissim vulputate nibh. Suspendisse tincidunt. Nulla tristique ipsum sed risus. Etiam molestie tristique nisl. Nunc congue. Morbi imperdiet.nec arcu eu nunc elementum lacinia. Curabitur lacus. Cras augue lacus, elementum at, tristique a, luctus eu, nisi. Cras augue est, elementum eget, ullamcorper id, consequat ultrices, ipsum. Etiam sed sapien. Nam a nisl nec erat porta venenatis. Nulla volutpat vestibulum mauris. Phasellus dignissim vulputate nibh. Suspendisse tincidunt. Nulla tristique ipsum sed risus. Etiam molestie tristique nisl. Nunc congue. Morbi imperdiet.nec arcu eu nunc elementum lacinia. Curabitur lacus. Cras augue lacus, elementum at, tristique a, luctus eu, nisi. Cras augue est, elementum eget, ullamcorper id, consequat ultrices, ipsum. Etiam sed sapien. Nam a nisl nec erat porta venenatis. Nulla volutpat vestibulum mauris. Phasellus dignissim vulputate nibh. Suspendisse tincidunt. Nulla tristique ipsum sed risus. Etiam molestie tristique nisl. Nunc congue. Morbi imperdiet.</p>
</div>
<div id="nav">
<ul>
<li id="design"><a href="w" title="webdesign link">webdesign</a></li>
<li id="print"><a href="p" title="printing Link">printing</a></li>
<li id="advert"><a href="a" title="advertising link">Advetising</a></li>
<li id="host"><a href="h" title="hotsing link">Hosting</a></li>
</ul>
</div>

<div class="clear">&nbsp;</div>
<div id="ftr">
<p>Copyright &copy; 2007 Practical eCommerce.</p>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum