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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts

    HELP!!! - Background Image Rollover Nav

    Okay so I want to put navigation on my site that has image rollovers, except I want HTML text to be on top of them. So it would basically be like a "background image" rollover.

    Here's an example:

    The one to the left is the hover image and the one to the right is the still one.


    Then I want actual text (not part of the image) to be over these navi tabs.


    And I also want to be able to horizontically repeat these navi tabs over and over again.


    --
    IMPORTANT: The rollover and normal images are actually going to be combined into a 2 state image using this code that I found.

    Code:
    #menu a {
       background: url("tab.jpg") 0 0 no-repeat;
       ...
       }
    #menu a:hover {
       background-position: -157px 0;
       ...
       }
    #menu a:active {
       background-position: -314px 0;
       ...
       }
    --

    If someone could point me in the direction of a tutorial or just a simple guideline on how to do it that would be great.

    THANKS TO ANYONE WHO HELPS!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Well I don't care about the sliding door. The width is going to be the same for each tab.

    All I want is a simple set of tabs with a hover effect that uses a two state image that has HTML text over it.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    i think you should use a list with that..

    try this... just fix the width you like.. you probably know this...

    Code:
    <style>
    li{
       float:left;
       display:block;
       text-align:center;
       background:url(images);
    		 }
    a{padding:0;
       text-decoration:none;
     
       display:block;
       margin:0;	
    }
    
    a:hover{    
    		text-decoration:none;
    		color:#FFFFFF;
    		display:block;
                    background:url(images);
                  		
    }
    
    ul{list-style:none;
             padding:0;
    		 margin:0;
    	
    
    </style>
    <ul>
      <li><a>Home</a></li>
      <li><a>Real Estate</a></li>
      <li><a>Real Estate</a></li>
      <li><a>Real Estate</a></li>
      <li><a>Real Estate</a></li>
    </ul>
    and if you don't get this try to google css menu... there are thousands of this tutorial.. but i bet this will do..


  •  

    Posting Permissions

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