Graphic before H2 header

[janiceelizabeth]

I would like to place a graphic before each of my H2 headers using CSS.

All looks Ok using a simple vertical align property for the image (which is larger than the text height) until I reduce the window width. (It is a liquid layout). The longer H2 headers then overflow under the graphic.

Is there a way to keep the text aligned to the right of the image?

I tried using a bullet image too but got in a real mess with that - I think because the image is larger than the text height.

Does anyone have an example of this I could follow?

If you do I'd be very grateful

Cheers

Janice

[BadFeeling]

Hi Janice,

I think the right way seems to be what you already tried. But you are right, the image has to be made so that it "fits".

Here's the list-style approach code that I use:

h2 { list-style-image: url(yourimagehere.gif); list-style-position: inside; display: list-item; margin: 0; padding: 0;}

Hope this helps.
/BF

[just a feeling]

Try this , " assuming that ur img is 58x91 "

[HTML]h2 {
background-image: url(bg_banner.gif);
background-repeat: no-repeat;
padding-left: 58px;
padding-bottom: 91px;
}[/HTML]

Playing with background positions values and padding values helps u position the text exactly as u want.

Bad feeling, Most browsers understand only 3 of Display options: "block", "inline" and "none". So try to not choose "list-item". It has no effect.

[janiceelizabeth]

Thank you so much for your help bad feeling and just a feeling - not sure where all the feeling names come from but I'm feeling happy now I have a way to solve this!

I used your suggestion just a feeling as I need to be browser compliant as far as possible.

I'm playing around with the values to get the positioning right but I can see that this is going to work out and the headings stay nice and neat when the browser window shrinks.

This is just my second site using CSS so I really do appreciate the help you guys gave

Cheers

Janice

[drhowarddrfine]

I think we're getting way too complicated for such a simple thing. Without seeing any of your css or html, we can only guess how to fix what you have, especially with a liquid layout.

First, it must be remembered that images are inline elements, just like text, and cannot be moved or positioned in any way, just like text. Unless, of course, we change the styling.

So, the first thing that must be done is to float the image to the left. Then the image size must be set so it doesn't occupy the full width.
[code=css]
<img src="image.png" style="width:200px; float:left">
<h1>My heading</h1>

That should work except for the 'liquid' part you are now doing.

[BadFeeling]

Bad feeling, Most browsers understand only 3 of Display options: "block", "inline" and "none". So try to not choose "list-item". It has no effect.

Er, the "most browsers" you are referring to must be "most old browsers" (IE5 and older).
But I can see from searching the net that there are indeed some problems with using "list-item" when it's not "native" to the tag, like it is with ul, so Janice, for compatiblility, take the advice of one of the others, please. ;)

/BF