Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Navigation Image CSS Hover Problem

Discussion in 'Website Design Forum:' started by Keitho, Dec 8, 2011.

  1. Keitho

    Keitho Junior Member

    I cant seem, to find the error in my CSS Code for my navigation.

    Basically the image height is 100px but only 50px of the navigation is shown so that when a user hovers over that image I set for the navigation link 50px of the navigation will be hidden and the other 50px will be shown to add a hover effect. However the Hover effect I wanted doesint seem to work. Here is my code, I'd really appreciate help :)

    HTML :
    HTML:
    <div id="nav"> 
           						 <ul>
                                 	<li class="about"><a href="about.html">About</a></li>
                                    <li class="services"><a href="services.html">Services</a></li>
                                    <li class="clients"><a href="clients.html">Clients</a></li>
                                    <li class="contact"><a href="contact.html">Contact</a></li>
            					 </ul>
    						</div>
    

    CSS :
    HTML:
    /*  Navigation Styling */
    #nav {
    	width:388px;
    	height:50px;
    	float:left;
    	margin-bottom:10px;
    }
    #nav ul {
    	list-style:none;
    	float:left;
    	width:400px;
    	height:50px;
    	float:left;
    }
    #nav ul {
    	display:inline;
    }
    #nav li.about a:link, #nav li.about a:visited {
    	float:left;
    	display:block;
    	width:115px;
    	height:50px;
    	background-image:url(images/nav/about.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    }
    #nav li.services a:link, #nav li.services a:visited {
    	float:left;
    	display:block;
    	width:85px;
    	height:50px;
    	background-image:url(images/nav/services.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    }
    #nav li.clients a:link, #nav li.clients a:visited {
    	float:left;
    	display:block;
    	width:75px;
    	height:50px;
    	background-image:url(images/nav/clients.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    }
    #nav li.contact a:link, #nav li.contact a:visited {
    	float:left;
    	display:block;
    	width:125px;
    	height:50px;
    	background-image:url(images/nav/contact.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    }
    
    /*  Navigation Hover-Styling */
    
    #nav ul li.about a:hover{
    	float:left;
    	display:block;
    	width:115px;
    	height:50px;
    	background-image:url(images/nav/about.png) no-repeat 0 -50px;
    }
    #nav ul li.services a:hover{
    	float:left;
    	display:block;
    	width:85px;
    	height:50px;
    	background-image:url(images/nav/services.png) no-repeat 0 -50px;
    }
    #nav ul li.clients a:hover{
    	float:left;
    	display:block;
    	width:75px;
    	height:50px;
    	background-image:url(images/nav/clients.png) no-repeat -50px -50px;
    	background-repeat:no-repeat;
    }
    #nav ul li.contact a:hover{
    	float:left;
    	display:block;
    	width:125px;
    	height:50px;
    	background-image:url(images/nav/contact.png) no-repeat 0 -50px;
    }
    
     
  2. br3n

    br3n Senior Member

    you're missing
    Code:
     overflow:hidden 
    from your anchor css
     
  3. Keitho

    Keitho Junior Member

    Still not working, or I've done something wrong :

    CSS :
    HTML:
    /*  Navigation Styling */
    #nav {
    	width:388px;
    	height:50px;
    	float:left;
    }
    #nav ul {
    	list-style:none;
    	float:left;
    	width:400px;
    	height:50px;
    	float:left;
    }
    #nav ul {
    	display:inline;
    }
    #nav li {
    	text-shadow: #000 1px 1px 1px;	
    }
    #nav li.about a:link, #nav li.about a:visited {
    	float:left;
    	display:block;
    	width:115px;
    	height:50px;
    	background-image:url(images/nav/about.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    	overflow:hidden;
    }
    #nav li.services a:link, #nav li.services a:visited {
    	float:left;
    	display:block;
    	width:85px;
    	height:50px;
    	background-image:url(images/nav/services.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    	overflow:hidden;
    }
    #nav li.clients a:link, #nav li.clients a:visited {
    	float:left;
    	display:block;
    	width:75px;
    	height:50px;
    	background-image:url(images/nav/clients.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    	overflow:hidden;
    }
    #nav li.contact a:link, #nav li.contact a:visited {
    	float:left;
    	display:block;
    	width:125px;
    	height:50px;
    	background-image:url(images/nav/contact.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    	overflow:hidden;
    }
    
    /*  Navigation Hover-Styling */
    
    #nav ul li.about a:hover{
    	float:left;
    	display:block;
    	width:115px;
    	height:50px;
    	background-image:url(images/nav/about.png) no-repeat -50px;
    	overflow:hidden;
    }
    #nav ul li.services a:hover{
    	float:left;
    	display:block;
    	width:85px;
    	height:50px;
    	background-image:url(images/nav/services.png) no-repeat -50px;
    	overflow:hidden;
    }
    #nav ul li.clients a:hover{
    	float:left;
    	display:block;
    	width:75px;
    	height:50px;
    	background-image:url(images/nav/clients.png) no-repeat -50px;
    	background-repeat:no-repeat;
    	overflow:hidden;
    }
    #nav ul li.contact a:hover{
    	float:left;
    	display:block;
    	width:125px;
    	height:50px;
    	background-image:url(images/nav/contact.png) no-repeat -50px;
    	overflow:hidden;
    }
    a {
            overflow:hidden;
    }
    
     
  4. br3n

    br3n Senior Member

    You need to add the overflow hidden to whatever div or element you are using to hide the rest or crop the background image with.

    For example if you have a list with a set height of 300px and your using backgrounds of 600px and using background position to shift it up or down 300px you need to add overflow hidden to the list item.

    Basically whatever defines the size of the 'viewport' needs a hidden overflow.
     
  5. br3n

    br3n Senior Member

    So on your code I believe you need to add it to:

    [EDIT - This is incorrect, needs to be applied to the anchor]

    #nav ul li { overflow:hidden; }

    or specifically

    #nav ul li.about, #nav ul li.services, #nav ul li.clients, #nav ul li.contact { overflow:hidden; }
     
  6. Keitho

    Keitho Junior Member

    Thanks but it still doesint seem to be working for me :/ I have a big feeling that I've been doing something wrong. This is the first time I tried this method.

    Do you think you could edit the source code I posted and fix it where you think it needs to be fixed? Thanks for your help :)

    HTML:
    /*  Navigation Styling */
    #nav {
    	width:400px;
    	height:50px;
    	float:left;
    	overflow:hidden;
    }
    #nav ul {
    	list-style:none;
    	float:left;
    	width:400px;
    	height:50px;
    	float:left;
    	display:inline;
    }
    #nav ul li {
    	text-shadow: #000 1px 1px 1px;	
    	overflow:hidden;
    }
    #nav ul li.about a:link, #nav li.about a:visited {
    	float:left;
    	display:block;
    	width:115px;
    	height:50px;
    	background-image:url(images/nav/about.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    	overflow:hidden;
    }
    #nav ul li.services a:link, #nav li.services a:visited {
    	float:left;
    	display:block;
    	width:85px;
    	height:50px;
    	background-image:url(images/nav/services.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    	overflow:hidden;
    }
    #nav ul li.clients a:link, #nav li.clients a:visited {
    	float:left;
    	display:block;
    	width:75px;
    	height:50px;
    	background-image:url(images/nav/clients.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    	overflow:hidden;
    }
    #nav ul li.contact a:link, #nav li.contact a:visited {
    	float:left;
    	display:block;
    	width:125px;
    	height:50px;
    	background-image:url(images/nav/contact.png);
    	background-repeat:no-repeat;
    	text-indent: -9999px;
    	overflow:hidden;
    }
    
    /*  Navigation Hover-Styling */
    
    #nav ul li.about a:hover{
    	float:left;
    	display:block;
    	width:115px;
    	height:50px;
    	background-image:url(images/nav/about.png) no-repeat -50px;
    	overflow:hidden;
    }
    #nav ul li.services a:hover{
    	float:left;
    	display:block;
    	width:85px;
    	height:50px;
    	background-image:url(images/nav/services.png) no-repeat -50px;
    	overflow:hidden;
    }
    #nav ul li.clients a:hover{
    	float:left;
    	display:block;
    	width:75px;
    	height:50px;
    	background-image:url(images/nav/clients.png) no-repeat -50px;
    	background-repeat:no-repeat;
    	overflow:hidden;
    }
    #nav ul li.contact a:hover{
    	float:left;
    	display:block;
    	width:125px;
    	height:50px;
    	background-image:url(images/nav/contact.png) no-repeat -50px;
    	overflow:hidden;
    }
    
    /* Content Styling */
    
    p {
    	color:#CCC;
    	text-shadow: #000 1px 1px 1px;	
    }
    h1, h2, h3, h4, h5, h6 {
    	text-shadow: #000 1px 1px 1px;	
    }
    a {
    	overflow:hidden;
    }
    
     
  7. br3n

    br3n Senior Member

    Can you upload somewhere with the html
     
  8. Keitho

    Keitho Junior Member

  9. br3n

    br3n Senior Member

    Sorry I meant so its functional, images etc
     
  10. Keitho

    Keitho Junior Member

    I PM'd you a link to my dropbox, from there you can download the files.
     
  11. br3n

    br3n Senior Member

    My apologies I missed a simple little mistake

    You have used background-image but then specified more than just the image

    change

    Code:
    background-image:url(images/nav/services.png) no-repeat -50px;
    to

    Code:
    background: url(images/nav/services.png) no-repeat -50px;
    and it works.

    or you could use

    Code:
    background-color: black;background-image: url(images/nav/servies.png);background-repeat: no-repeat;background-attachment: inherit /* You dont need this but meh */background-position: 0 -50px;
    Which is the same, just not shorthand and for the record you still need to keep overflow:hidden on the a elements where the bg position changes.
     
  12. Keitho

    Keitho Junior Member

    hahaha , awesome. It works ! Thanks so much :)
     
  13. br3n

    br3n Senior Member

    We got their in the end eh :D

    What are you using to write your code, I only ask as - as soon as I opened it in komodo edit (I guess like notepad+ but for mac) it highlighted the background-image as non-valid.
     
  14. Jazajay

    Jazajay Active Member

    Wo nice catch, hate simple mistakes like that. :)
     

Share This Page