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

[theGWS]

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.

[mdangelo]

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;
}

[mdangelo]

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

[mate]

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. :-)

[mdangelo]

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.

[Paul O'B]

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

[mate]

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. :-)

[mdangelo]

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 ;-)

[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.

[Paul O'B]

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

[mdangelo]

Glad your thread attached such attention.

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.