Hi All,

What would be the easiest way to place my h1 tags beneath an image? Everything I seem to try just moves the page layout around ...

URL www.portfolio-properties.net

Thanks,

Dave

A relative positioned container, position absolute and z-index of 1 for the heading so it is out of the document flow and below other elements then use position relative (or absolute) and z-index 10 for the image.

That way the container is part of the layout, while the heading and the image are isolated.

Thanks Chris works a treat

Dave

I would recommend another technique. First, set the image as the background image on your h1 tag, and keep the h1 tag where it is. Set the property text-indent on the h1 tag to some ridiculously negative value like -1000000px. This will hide the h1 text while still keeping the semantic meaning of the element. Be sure to set an explicit height and width on the element that is the same size as your image.

Why are you complicating it?

<h1 style="height: XX; width: XX; background: url(image.jpg) top left no-repeat"><span style="visibility: hidden;">Heading 1 Text</span></h1>

Mooofasa, I don't like that text because I don't think screen readers will pick up on the text if its visibility is set to hidden. I'm not sure though.

Then use display: none.

Most screen readers obey display:none;

I prefer this method where you move the text off the screen (text-indent: -9999px; or any arbitrary large negative figure) to the image replacement technique.

Personally this is how I do it:

h1, p.welcome, ul#nav li a {
display: block;
overflow: hidden;
font-size: 0.0; line-height: 0.0;
text-decoration: none; text-indent: -9999px;
background: transparent no-repeat 0 0;
}
h1 {
height: 20px; width: 500px;
background-image: url(header.img);
}
p.welcome {
height: 150px; width: 350px;
background-image: url(welcome.img);
}

This code easily allows for more elements to be replaced. Simply add the selector to the main replacement code, then create a separate declaration with the height, width and path to the appropriate image.

The display: block allows for the image replacement to be used on inline elements (such as anchors) with no extra code. The 0.0 on font-size and line-height are for bugs in the validator (!). And the overflow: hidden; trims the unsightly long 'focus halo' introduced in Firefox 1.5, so that is only the width of the content.