SitePoint.com

obrienkev · May 26, 2006, 08:42

Hi all,

I want to use images to replace my text menu links.

Problem is how to get each image to fit correctly?

Any ideas? Don't have url yet. sorry.

Code:

 <style type="text/css">
 <!--
 
 #book { 
   background: #ccc;
   height: 300px;
   width: 196px;
   }
 
 ul#menu li {
 			list-style: none;
 }	
 
 	
 ul#menu li a {
 	font-size: 1.5em;
 		 font-stretch: ultra-expanded; 
 	  text-decoration: none;
 }
 	
 ul#menu li a i { visibility: hidden; }
 
 
 a.home { background-image: url('images/home.gif'); }
 a.contact { background-image: url('images/contact.gif'); }
 a.test { background-image: url('images/test.gif'); }
 
 a.home:hover { background-image: url('images/home_on.gif'); }
 a.contact:hover { background-image: url('images/contact_on.gif'); }
 a.test:hover { background-image: url('images/test_on.gif'); }
 
 -->
 </style>
 
 </head>
 
 <body>
 
 <div id="book">
 
  <ul id="menu">
   <li><a href="" class="home"><i>home</i></a><li>
 	<li><a href="" class="contact"><i>contact</i></a><li>
 	<li><a href="" class="test"><i>test</i></a><li>
  </ul>
 
 </div>

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Switch to Hybrid Mode Threaded Mode