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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Location
    Ireland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts

    CSS nav li a:hover not aligning.

    I'm just starting out playing with css, making a wordpress theme.

    I've set up my nav bar, and I want it to change colour when I hover the mouse over it. When It does, but it isn't aligned correctly. I'm sure i'm just missing something pretty simple.

    this is the css I have

    Code:
    #nav {
    	border-bottom:1px solid #eee;
    	
    	margin:0;
    	border-top:1px solid #eee;
    	height:45px;
    	
    	padding: 20px 5px 0px 5px ;
    	background: #333333; /* old browsers */
    	background: -moz-linear-gradient(top, #A8A8A8 0%, #4F4F4F 50%, #232323 51%, #A8A8A8 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A8A8A8), color-stop(50%,#4F4F4F), color-stop(51%,#232323), color-stop(100%,#A8A8A8));
    //	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A8A8A8', endColorstr='#4f4f4f',GradientType=0 );
    	background: -o-linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* IE10+ */
    	background: linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* W3C */
           	text-align: left;
    }
    
    
    #nav li {
    	float:left;
    	list-style:none;
    }
    
    #nav li a {
    	color:#999;
    	padding:0px 5px 0px 5px;
    	font:1.6em Trebuchet MS;
    	text-decoration:none;
    	display:block;
    	
    	
    }
    #nav li a:hover {
    	/*
    	
    	*/
    	color:#999;
    	padding: 20px 5px 0px 5px ;
    	font:1.6em Trebuchet MS;
    	text-decoration:none;
    	display:block;
    	height:45px; 
    	
    	background: #333333; /* old browsers */
    	background: -moz-linear-gradient(top, #C9DBFF 0%, #99BAFF 50%, #5E91FC 51%, #C9DBFF 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C9DBFF), color-stop(50%,#99BAFF), color-stop(51%,#5E91FC), color-stop(100%,#C9DBFF));
    //	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9DBFF', endColorstr='#99BAFF',GradientType=0 );
    	background: -o-linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* IE10+ */
    	background: linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* W3C */
         text-align: left;
    }
    which results in this



    if anyone can point me the right direction I would be most appreciative.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You're increasing the top padding on the :hover:

    Code:
    #nav li a {
    	color:#999;
    	padding:0px 5px 0px 5px;
    	font:1.6em Trebuchet MS;
    	text-decoration:none;
    	display:block;
    }
    #nav li a:hover {
    	color:#999;
    	padding: 20px 5px 0px 5px ;
    ...
    }[/CODE]

  • Users who have thanked SB65 for this post:

    Rigas (05-23-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Location
    Ireland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks SB65, I tried that but It still seems lower than It should be.



    I was reading that I might need to reset my <ul> tags, but I'm not sure how to do that.

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

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's because of the 20px top padding on the ul element. Have a try making your css:

    Code:
    #nav {
    	border-bottom:1px solid #eee;
    	margin:0;
    	border-top:1px solid #eee;
    	height:45px;
    	padding: 0 5px 0px 5px ;
    	background: #333333; /* old browsers */
    	background: -moz-linear-gradient(top, #A8A8A8 0%, #4F4F4F 50%, #232323 51%, #A8A8A8 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A8A8A8), color-stop(50%,#4F4F4F), color-stop(51%,#232323), color-stop(100%,#A8A8A8));
    //	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A8A8A8', endColorstr='#4f4f4f',GradientType=0 );
    	background: -o-linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* IE10+ */
    	background: linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* W3C */
           	text-align: left;
    }
    #nav li {
    	float:left;
    	list-style:none;
    }
    
    #nav li a {
    	color:#999;
    	padding:0px 5px 0px 5px;
    	font:1.6em Trebuchet MS;
    	text-decoration:none;
    	display:block;
    	line-height:45px; /* will centre the text vertically*/
    }
    #nav li a:hover {
    	background: #333333; /* old browsers */
    	background: -moz-linear-gradient(top, #C9DBFF 0%, #99BAFF 50%, #5E91FC 51%, #C9DBFF 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C9DBFF), color-stop(50%,#99BAFF), color-stop(51%,#5E91FC), color-stop(100%,#C9DBFF));
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9DBFF', endColorstr='#99BAFF',GradientType=0 );
    	background: -o-linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* Opera11.10+ */
    	background: -ms-linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* IE10+ */
    	background: linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* W3C */
    }
    If that makes the whole menu too small vertically adjust the line-height on #nav li a and the height on #nav

  • Users who have thanked SB65 for this post:

    Rigas (05-23-2012)

  • #6
    New to the CF scene
    Join Date
    May 2012
    Location
    Ireland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks guys, forgive my noob-ness. I just can't my head around it.

    Here is a link to that page.

    http://westpcrepair.com/

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Yes, if you just replace the relevant bits of your css with the version in my previous post it should be OK I think.
    (Beautiful part of Ireland you're in, by the way...)

  • #8
    New to the CF scene
    Join Date
    May 2012
    Location
    Ireland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've added

    Code:
    line-height:45px; /* will centre the text vertically*/
    to #nav li a

    and it looks like this now.



    Thanks, it's actually warm here today and yesterday. was like living in a monsoon the few days before that :P

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Sorry,didn't make it clear. Copy the whole of the css in my post and use that instead of what you've got now.

  • Users who have thanked SB65 for this post:

    Rigas (05-23-2012)

  • #10
    New to the CF scene
    Join Date
    May 2012
    Location
    Ireland
    Posts
    5
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks SB65!

  • #11
    New Coder
    Join Date
    Apr 2012
    Posts
    44
    Thanks
    0
    Thanked 14 Times in 14 Posts
    I see you got it working, good job!
    Just a thought I would change the text color to white when hovered. I find it difficult to read once hovered.

  • Users who have thanked Xherdas for this post:

    Rigas (05-24-2012)


  •  

    Posting Permissions

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