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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Navigation Background problem

    Hello All

    I'm sure this is a simple fix but I can't seem to figure it out. I have the following navigation.



    I am trying to write the css so the wood panel shows on rollover but can't seem to get it to appear.

    Here is my code
    Code:
    #nav {
    	line-height:83px;
    	background-image:url(../images/nav_bg.png);
    	background-repeat:repeat-x;
    	}	
    
    #nav ul{
    	text-align:center;
    	padding: 0;
    	list-style:none;
    	}
    	
    #nav li{
    	color:#FFF;
    	display:inline;
    
    
    	}
    #nav ul li a:link { 
    	text-decoration: none; 
    
    	}
    	
    .nav ul  li a:hover  {
    	background-image:url(../images/nav_ro.jpg);
    	line-height: 60px;
    	background:url(../images/nav_ro.jpg);
    	}
    
    .nav ul li a:visted  {
    	color:#FFF;
    	}

    I want the text to be vertically centered on the black bar as well. The problem with this is that I also have a drop shadow there which it seem to be taking into account when vertically centering so the text is about 10 pixels to low. How can I push it up a bit? I tried using padding but it had no reaction.

    Any help is much appreciated and thank you in advance,
    -puma10

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    1st, why you defined background image twice??

    Code:
    .nav ul  li a:hover  {
        background-image:url(../images/nav_ro.jpg);
        line-height: 60px;
        background:url(../images/nav_ro.jpg);
        }
    You need to define <a> as block and adjust height of block according to background image height.

    Following is sample code;

    Code:
    a {
    display:block;
    height:40px;
    width:100px;
    float:left;
    text-align:center;
    }
    Last edited by vikram1vicky; 09-16-2011 at 02:09 PM.

  • Users who have thanked vikram1vicky for this post:

    puma10 (09-17-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Worked like a charm. I have two background images in there because I was starring at my computer screen entirely to long. Much thanks vikram1vicky!


  •  

    Posting Permissions

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