www.webdeveloper.com
Results 1 to 3 of 3

Thread: Linking images into menu navigation bar

Hybrid View

  1. #1
    Join Date
    Sep 2008
    Posts
    2

    Angry Linking images into menu navigation bar

    I am having trouble figuring out what I am doing wrong in my code. What I am wanting to do is call up one of three images, depending on whether the specified page is active or inactive, or the link is being hovered over. I am only getting the anchor image next to my text, instead of the images that I have linked in. Below is a copy of the code for both the html and css. Attached are examples of the images I am trying to link to the navigation tabs.

    CSS:
    Code:
    #mainnav {
    	height: 80px;
    	width: 80%;
    	margin: auto;
    	background: #FFFFFF;
    	
    }
    #mainnav h1  {
    
    	font-family: Britannic Bold;
    	font-size: 20px;
    	
    }
    
    a#nav_league {
    	background-image:url(images/league.gif) no-repeat top right;
        margin: 0px;
        display: block;
        width: 80px;
        height: 0px !important;
        height /**/:33px;
        overflow: visible;
        }
    
    a#nav_league:hover {
        background-position: 0 -36px;
        text-decoration: none;
        margin: 0px;
        display: block;
        
        width: 80px;
        height: 0px !important;
        height /**/:33px;
        overflow: hidden;
        }
        
    a#nav_league.current {
        background-position: 0 -72px;
        margin: 0px;
        display: block;    
        width: 80px;
        
        height: 0px !important;
        height /**/:33px;
        overflow: hidden;
    
        }
    HTML
    HTML Code:
    <div id="mainnav">
            <h1><a id="mainlogo" href="/">The Urban League</a></h1>
        
                <a id="nav_league" href="/page/" class="current">The League</a>
                <a id="nav_programs" href="/page/">Programs</a>
                <a id="nav_events" href="/page/">Events</a>
                <a id="nav_jobs" href="/page/">Jobs</a>
                <a id="nav_resources" href="/page/">Resources</a>
         
    </div>
    Attached Images Attached Images
    Last edited by KDLA; 11-03-2008 at 04:13 PM. Reason: code tags - KDLA

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Code:
    background-image:url(images/league.gif) no-repeat top right;
    "background-image" should be "background" if you're going to include the repeat and positioning in the one line.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Sep 2008
    Posts
    2

    Did it, to no avail

    I took those out, because they were not affecting the display anyway. I also toyed with renaming the css value, but that didn't work. I am at a total loss. I can safely say this is the longest amount of time a bit of code has had me stumped

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles