Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12

Thread: CSS Hover

  1. #1
    Member
    Join Date
    May 2004
    Posts
    76
    Member #
    5925
    I'm trying to have the background colour created by the css "hover" span the width of a div, instead of just the width of link. Is this possible, or would I have to use javascript?

  2.  

  3. #2
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    just make the link the width of the div, e.g.


    <div style="width:30px; height:10px;">
    <a href="#" style="width:30px; height:10px;">Link</a>
    </div>
    tekp :cheeky: tekponline.com

  4. #3
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    I've not tried it ever, but what tekp says should also work with 100% width instead of in pixels.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    100% width for a hyperlink won't work in Mozilla, but it will work in IE for a hyperlink. Pixels is a sure thing either way.

    Personally, I like the way IE handles this. It allows for creation of a dynamic link width, which is really handy for menus.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Yeah, mail Mozilla to include it in next version... I'm to lazy...

  7. #6
    Member
    Join Date
    May 2004
    Posts
    76
    Member #
    5925
    I have tried to make the hover width equal to the width of the div. It doesn't seem to have any affect on it in any browser including (IE)

    Here is my html,and css code I used.

    Code:
    <div class="menu">
    <a href="index.asp"> Empty</a><br />
    <a href="index.asp"> Empty</a><br />
    <a href="index.asp"> Empty</a><br />
    </div>
    Code:
    .menu {
    background: #DDDDDD;
    color: #000000;
    letter-spacing: -0.5px;
    text-align: center;
    border: thin solid black;
    font-size: 0.7em;
    width: 130px;
    }                     
    
    .menu a:hover {
    background: #DFFFFF;
    color: #000000;
    font-family: verdana;
    text-decoration: none;
    width: 130px;
    }

  8. #7
    Senior Member Aleister's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    250
    Member #
    2329
    This is what I usually use.. I stripped it down a little, but left some things like hover color for the div and borders

    Code:
    <div id="sidebar">
    	<div class="sidesub"><a href="index.htm">Link</a></div>
    	<div class="sidesub"><a href="index.htm">Link</a></div>
    	<div class="sidesub"><a href="index.htm">Link</a></div>
    </div>
    Code:
    #sidebar {
    	width: 120px;
    }
    
    .sidesub {
    	border: 1px solid #586CA0;
    	margin: 4px 0 4px 0;
    }
    
    .sidesub a {
    	display: block;
    	width: 116px;
    	padding: 2px;
    }
    
    .sidesub a:hover {
    	background: #586CA0;
    	color: #FFF;
    }
    The Temple of Dagon | Dagon Design
    "That is not dead which can eternal lie, And with strange aeons even death may die." - HPL

  9. #8
    Member
    Join Date
    May 2004
    Posts
    76
    Member #
    5925
    Thanks for the help, it finally works like I wanted it to I just have a few questions regarding some of the css you posted. Why does the

    Code:
    .sidesub a {
            display: block;
    	width: 130px;
    	padding: 0px;
    }
    need the "display: block" too make it work? Also does it make any difference if I use an ID over a class? I tend to make all my css stuff into classes.

  10. #9
    Senior Member teal's Avatar
    Join Date
    Dec 2003
    Posts
    247
    Member #
    4319
    No diffrence I ever found between an id and a class, although I do ask why you write ".sidesub a" instead of "a.sidesub"
    Is there something I don't know?
    Whoth steps forth to mock the teal? Whom couldst say a color superior!

    Proclamith me, it cannot be done.

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    IDs can only be used once. Classes can be used repeatedly.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com