Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    27
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How do I assign a different image to each link using CSS?

    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>
    Last edited by rmedek; 10-04-2007 at 06:47 PM. Reason: title!

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Sure, assuming you want to use the image as a bullet:

    Code:
    <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:

    Code:
      #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);   }
    Last edited by vtjustinb; 10-04-2007 at 05:10 PM.

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    27
    Thanks
    7
    Thanked 0 Times in 0 Posts
    cheers for the code but i still cant seem to get the images to show up

    this is my css

    Code:
    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

    Code:
    <!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>
    Last edited by rmedek; 10-04-2007 at 06:45 PM. Reason: [code] tags


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •