SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Tab Rollovers [SOLVED]

    Hi foreros
    I am trying to code the navigation tabs for this sitehttp://cv.uoc.edu/~agassent/shk/index.html
    but the navigation hover`position won't work.
    I am using the tutorial by Simplebits.com: http://www.simplebits.com/notebook/2...rollovers.html

    here is the css:
    Code:
    /* CSS Document */
    
    /*ESTILOS PARA INDEX*/
    
    #indexFondo {
    	
    	width:800px;
    	height:600px;
    	z-index:2;
    	left: 5px;
    	top: 0px;
    	background-image: url(../images/Portada016.gif);
    }
    
    
    
    #indexNav{
    	position:absolute;
    	margin:0;
    	padding:0;
    	height:20px;
    	list-style:none;
    	display:inline;
    	overflow:hidden;
    	left: 514px;
    	top: 573px;
    	width: 252px;
    			}
    #indexNav li {
    			margin:0;
    			padding:0;
    			list-style:none;
    			display:inline;
    			}
    #indexNav a{
    			float:left;
    			padding:20px 0 0 0;
    			overflow:hidden;
    			height:0px !important;
    			height:/**/:20px;/*for IE5/Win*/
    			}
    			
    #indexNav a:hover {background-position::0 -20px;
    			}
    			
    #indexNav a:active, #indexNav a.selected {
    			background-position::0 -40px;
    			}
    #ienter a {
    			width:80px;
    			background:url(../images/labelEnter.gif) top left no-repeat;
    			}
    #iinfo a {
    			width:80px;
    			background:url(../images/labelInfo.gif) top left no-repeat;
    			}
    #icredits a {
    			width:80px;
    			background:url(../images/labelCredits.gif) top left no-repeat;
    			}
    The images for the tabs are like the attached one.
    I just can't find the mistake. The tabs are supposed to show a different section in each state, but they don't.
    I checked and double checked but I can't solve it.
    Can anybody help me?
    Thanks in advance.
    Attached Images Attached Images
    Last edited by anagr; Jul 30, 2008 at 13:50.

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look at this section of your CSS:

    Code:
    #indexNav a:hover {background-position::0 -20px;
    			}
    			
    #indexNav a:active, #indexNav a.selected {
    			background-position::0 -40px;
    			}
    You have two colons after "background-position". Change it to one colon, as is the case for the rest of your CSS.

    Louis

  3. #3
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's it!!
    Yes, it works wonderfully, thank you Louistar.
    And also thank you, people at Simplebits.com for your tutorials.
    Saludos


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
  •