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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Hover to be bigger than text?

    Hi!

    if you go here: http://www.behrentzs.com/sites/webtjenesten/design2.php and hover on some of the text to the left, you can see that it changes background color. However it's ONLY beneath the text. I want it to change background color all over the row:

    Example:

    NOT like the first one, but like the 2. one:

    Does anybody know how to do that?
    Attached Thumbnails Attached Thumbnails Hover to be bigger than text?-not.png   Hover to be bigger than text?-yes.png  

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Make those links block-level elements through applying display: block;. And I’d encourage you to put them into lists as these are basically lists of links.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    I have now tried to do what you said, however I'm doing something wrong.

    My html:

    Code:
    <ul class="menu">
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 2</a></li>
    <li><a href="">Link 3</a></li> 
    </ul>
    And my css:

    Code:
    ul.links {	list-style:none;
    	display:block;
    	}
    					
    ul.links li {margin-bottom:6px;
    	width:100%;
    	}
    Just so you are aware, I'm working with percent (%) on this layout. I have declared 100% in both the body and html css.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    ul.links?
    This selection will look for a <ul> tag having a class="links" in it and in fact all <ul> , <li> tags are block elements by default.

    What VIPS said is to put display:block to your <a> like
    Code:
    <ul class="menu">
    <li><a class="links" href="">Link 1</a></li>
    </ul>
    and then define it's style

    Code:
    ul a.links{
    display:block;
    }
    and their pseudos
    Code:
    ul.menu a.links:link{
    
    }
    ul.menu a.links:visited{
    
    }
    ul.menu a.links:hover{
    
    }
    ul.menu a.links:active{
    
    }
    Edit: Note that ul.links and ul .links are different.
    The first one behaves as explained above while the second one selects all elements having a class="links" placed inside a <ul>
    Last edited by abduraooft; 10-28-2007 at 01:12 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Uh, thanks for that.

    BUT, even though my css now looks liks this (I have set the ul class to "menu" in my html):
    Code:
    ul.menu {			list-style:none;
    					}
    					
    ul.menu li {		margin-bottom:6px;
    					width:100%;
    					}
    					
    ul a.menu{			display:block;
    					}
    					
    ul.menu a.links:hover{background-color:width:100%;
    					height:100%;
    					color:#000033;
    					background-color:#99ccff;}
    It still does now work as planned. I don't know what the width should be, if it is not 100%. Cause' as I said, I'm working with % in this layout.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    ul.menu a{
    display:block;
    }
    (Read the edit in the above post)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    CaptainB (10-28-2007)

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    O yeah, there we go! Thanks!


  •  

    Posting Permissions

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