The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Rollover affecting another DIV

Hi All,

I am starting to create a new site that will use a lot of CSS. I have a design created for me that I need to follow. One specification is the 4 links on the home page. I have positioned the links using CSS. I have also positioned the underline image where they need to be and set the visibility to hidden.

Now when the user mouses over the link I would like the underline image to appear.

You will need to recode the above into valid code as you have nested block level elements inside inline elements which is not allowed.

Heres a simple example that you can copy to get the effect that you want. The rollover image is in the anchor itself (no need for another div). Just give the image an id and put it where you want by absolutely placing it.

If you want it relative to the parent then give the parent a position:relative to gain a local stacking context then the image will be placed in relation to its parent and not the viewport.

You will need to recode the above into valid code as you have nested block level elements inside inline elements which is not allowed.

What does that mean? I am using Dreamweaver to test the pages as I make them and they seem to be working fine with these nested statements. I believe you when you say they are wrong but I don't see a DIV within a DIV if thats what you mean by "nested elements". Will it fail in other browsers?

If you want it relative to the parent then give the parent a position:relative to gain a local stacking context then the image will be placed in relation to its parent and not the viewport.

My brain gave me the "blue screen of death" and then crashed after I read this. After the shock (and fear that i'm in way over my head) cleared I looked at the code and think I have pieced something together.

I think I can now get the code to make the underline appear. Now about the box of text that should appear with text specific to the link... How can I manipulate that box with a:hover? When hovering over each link the box will show different text and when its not over any link the box is not visible.

If the underline is just a solid colour then you can just use the border property, which I have also included in the demo above. Manipulating 2 images makes it a bit harder to code but can be done although positioning both becomes a little complicated.

Holy cow!! Translation please

Sorry! As you were requesting what is usually deemed as an advanced technique I assumed you were familiar with the terminology etc

What does that mean? I am using Dreamweaver to test the pages as I make them and they seem to be working fine with these nested statements

The fact that it works in ie does not mean that the code is valid or indeeed stable. Although DW produces pretty good code its where you put it that it can't control.

Although some browsers will allow invalid code to work theres no gurantee that it will work in more compliant browsers like mozilla/firefox which are gaining in popularity at the moment (still a long way to go yet though).

Your anchor which is an inline element is surrounding a div which is a block element and is invalid structure. Html has rules and this is one of them

You can nest inline elements inside a blobk level element but not vice versa. You can nest divs inside divs with no problems either, but you cant nest block level elements inside inline elements such as anchors.

The reasoning behind it is that block level elements generate a line-feed whereas inline elements don't therefore you shouldn't need to do it that way around.

I changed my mind (this morning) and decided to throw out the idea of using frames and stick to what the pro's say... CSS. So I went to your (Paul) sticky post and grabbed one of your Header/Footer 2 column layouts and removed the left column. I then stuck the CSS you created for me into it and have been playing around with it to get it to look right.

The footer is now working proplerly and the text appears in the right place. The only thing you will need to do is replace the "|" with whatever image you require. As the text is different sizes you may want to set up an id for each span and place each image slightly differently in order to center it.

The techiques are in place so just copy the format of the existing one