471,583 Members | 1,488 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,583 software developers and data experts.

Graphic before H2 header

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
Aug 29 '07 #1
5 2830
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:
Expand|Select|Wrap|Line Numbers
  1. h2 { list-style-image: url(yourimagehere.gif); list-style-position: inside; display: list-item; margin: 0; padding: 0;}
Hope this helps.
/BF
Aug 29 '07 #2
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.
Aug 29 '07 #3
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
Aug 29 '07 #4
drhowarddrfine
7,435 Expert 4TB
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.
Aug 29 '07 #5
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
Aug 31 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

20 posts views Thread by Joe exCSSive | last post: by
1 post views Thread by Peter | last post: by
3 posts views Thread by djohnson | last post: by
1 post views Thread by icepick72 | last post: by
reply views Thread by XIAOLAOHU | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by Vinnie | last post: by
1 post views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.