SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image based navigation

    Hello everyone,

    I've been trying to assemble the menu of my site but I've been trying for hours and no success. I've tried to give an id to an li element and assign a background to that li element. Then when you hover ove rthe link, there should be another image. So after hours of trying stuff I'm coming to these forums and hoping someone can help me. I'll post some code:

    Code:
    #navigation { 
    	text-align: center;
    	
    	height: 38px;
    	width: 1024px;
    	color: #0a0a0a;
    	
    
     
    
    
    	background:  url(../images/menu.png) no-repeat;
    }
    
     #navigation ul { 
    	 
    	padding-top : 20px; 
    	list-style : none; 
    	border: none;
    }
    	
     #navigation li { 
    	display: inline;
    	
    }
    /*Navigation items*/
     #navigation li#home a {
    	color: #0a0a0a;	
    	font-weight: bold;	
    	height: 69px;
    	width: 25px;
    	background: transparent url(../images/homenormal.png) no-repeat fixed;
    	text-indent: -9009px;
    	margin: 0 0 0 8px;
    	text-decoration: none;
    }
    
     #navigation li#home a:hover{
    	background: url(../images/homeover.png) no-repeat fixed;
    	height: 69px;
    	width: 25px;
    	text-indent: -9009px;
    	margin: 0 0 0 8px;
    	text-decoration: none;
    }
    Code:
    <div id="navigation">
    <ul>
    <li id="home"><a href="index.html">Home</a></li>
    <li id="bio"><a href="pages/bio.html">Biography</a></li>
    <li id="band"><a href="pages/band.html">Band</a></li>
    <li id="links"><a href="pages/links.html">Links</a></li>
    <li id="pictures"><a href="pages/pictures.html">Pictures</a></li>
    <li id="contact"><a href="pages/contact.html">Contact</a></li>
    <li id="gigs"><a href="pages/gigs.html">Gigs</a></li>
    <li id="setlist"><a href="pages/setlist.html">Setlist</a></li>
    </ul>
    
    </div>
    I hope anyone knows what I'm doing wrong.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I take it you want something like this? http://www.pmob.co.uk/temp/navimagereplace.htm

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, so if I get it right they are using one image and they move the backgroundposition when you hover?

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct, and as far as i know. This is still the best course to take with css nav's

    (Originally was used to stop flickering when people used image replacing on hovers)

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep. One background image on an empty element that gets stacked on top of the text. Just slide it up and down (or left to right) to change the appearance.


Bookmarks

Posting Permissions

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