SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A hover/change-color link box that's 100% width of a <div>

    I've got a 3-div layout: one header and two columns. I'm trying to make the links in the menu column act as though they are the whole width of that column. I've seen this done using tables, but Yahoo! Mail does this without using tables. How???

    So ultimately I want my links to be the entire width of the div column that they occupy - not just the text, but the whole width so if a person mouses-over anywhere horizontal to the link (while staying in the div) the entire box can change color.
    ~Dorian

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Maryland
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this code:

    /*<group=navigation>*/

    #navigation {
    border: 0px solid silver;
    text-decoration: none;
    color: white;
    height: 118px;
    float: right;
    }



    #navigation a {
    text-decoration: none;
    color: white;
    border-bottom : 1px transparent solid;
    border-top : 1px white solid;
    border-style: none;
    width: 100px;
    display: block;
    text-align: center;
    float: left;
    height: 29px;
    padding-top: 44px;
    padding-bottom: 44px;
    font-weight: bold;
    }


    #navigation a.#current {
    background-color:#EFEFEF;
    border-bottom :1px solid #ebebeb;
    border-top :1px solid #ebebeb;
    font-variant: normal;
    }

    #navigation a:hover {
    background-color : #00699D;
    border-bottom : 1px solid #000000;
    border-top : 1px none #F10000;
    font-variant: normal;
    }
    Michael D'Angelo
    mdangelo@mdangelo.com
    Free Link Popularity, www.expirednic.com
    Macintosh Webmaster Information, www.webmastermac.com

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Maryland
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the above should get you started. If not feel free to ask for more ;-D

    Keep in mind its not compatible with internet explorer as far as i recall... Only quazy standards based browsers does it work in- liek firefox, safari
    Michael D'Angelo
    mdangelo@mdangelo.com
    Free Link Popularity, www.expirednic.com
    Macintosh Webmaster Information, www.webmastermac.com

  4. #4
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by theGWS
    So ultimately I want my links to be the entire width of the div column that they occupy - not just the text, but the whole width so if a person mouses-over anywhere horizontal to the link (while staying in the div) the entire box can change color.
    As in the code Michael posted, the <a> element needs to be given a value of display:block. I wouldn't give it a width though if you want it to stretch.

    Personally, I would mark it up as an unordered list in order to be structurally and semantically correct. So, I would make sure there was no padding on the navigation div and no padding or margin on <ul> or <li>. <a> may need some padding to tweak the text into the right spot, vertically within the box.

    Then, as Michael indicated, apply borders, background colours etc as you require, including the hover state.

    A really good guide to this is Project Seven's CSS Uberlinks tutorial which has the bonus of showing you how to implement a "you are here" indicator if you require one.

    HTH.

    mate. :-)

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Maryland
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a you are here was built in:
    #navigation a.#current {
    background-color:#EFEFEF;
    border-bottom :1px solid #ebebeb;
    border-top :1px solid #ebebeb;
    font-variant: normal;
    }


    But sure valuable comments- its some code I wrote for my personal site a while ago when i first was learning css. I still don't know it that well- havent had the time.
    Michael D'Angelo
    mdangelo@mdangelo.com
    Free Link Popularity, www.expirednic.com
    Macintosh Webmaster Information, www.webmastermac.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mdangelo
    Keep in mind its not compatible with internet explorer as far as i recall
    Ie is fine with display:block and allowing the element to expand to fill its parent. (Sometimes a width or height hack is needed in certain circumstances but most of the time its ok.)

    I would mention that floats really should have a specific width (unless they are replaced elements such as images that have intrinsic width) because you can never be sure whether the browser will default to 100% width or content width.

    However, as long as you test then there are some instances where you can get away with it ok, but its worth bearing in mind

    Paul

  7. #7
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Perth, Western Australia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I would mention that floats really should have a specific width (unless they are replaced elements such as images that have intrinsic width) because you can never be sure whether the browser will default to 100% width or content width.

    However, as long as you test then there are some instances where you can get away with it ok, but its worth bearing in mind
    Yep, my undestanding is that IE (what else?) spits the dummy at floats without widths.

    But for this kind of menu there is no need to float it so no need to specify the width. (Not that you said there was - I think you are only just pointing this out for "educational purposes" for anyone who doesn't know, which is the reason I am writing this too. ) Although there is a float in Michael's code in a post above, I don't personally see any need for it - the only float declaration in the PVii tutorial is a hack for MacIE5. (The exception would be for a horizontal menu.) If it can be done simply, I like to do it simply.

    mate. :-)

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Maryland
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm well this has been great and all- but THEWGS has any of this talk helped you any... Wish you the best

    My code may not be the best I admit- But It I figured was a good start. That project sevens tutorial link above is very good to keep an eye on...

    Anyway this has been quite educational ;-)
    Michael D'Angelo
    mdangelo@mdangelo.com
    Free Link Popularity, www.expirednic.com
    Macintosh Webmaster Information, www.webmastermac.com

  9. #9
    BLYAT! theGWS's Avatar
    Join Date
    Jun 2001
    Location
    Melbourne, AU & Seattle, WA
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woah! Hey thanks everyone. I wasn't expecting this many responses. The tutorial looks excellent, mate. Especially the 'You Are Here'. Thanks for the code, Michael. I'll put them both to use.
    ~Dorian

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mate
    I think you are only just pointing this out for "educational purposes" for anyone who doesn't know, which is the reason I am writing this too
    Yes - lol - I was in teacher mode

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Maryland
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad your thread attached such attention.

    Quote Originally Posted by theGWS
    Woah! Hey thanks everyone. I wasn't expecting this many responses. The tutorial looks excellent, mate. Especially the 'You Are Here'. Thanks for the code, Michael. I'll put them both to use.
    Michael D'Angelo
    mdangelo@mdangelo.com
    Free Link Popularity, www.expirednic.com
    Macintosh Webmaster Information, www.webmastermac.com


Bookmarks

Posting Permissions

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