473,382 Members | 1,084 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 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 3034
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

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

Similar topics

0
by: David | last post by:
I am using CGI.pm and GD to make a page that generates a diagram based on some form input. The problem I have is under IE (Netscape seems to work correctly) the new graphic that is generated is not...
20
by: Joe exCSSive | last post by:
Hi, folks: I'm back...and now I'm really stuck !! I have a graphic ( http://www.sundialontario.com/images/makeitatable.jpg ) that I would like to convert to CSS and I'm not sure how to do...
1
by: Randy Harris | last post by:
I put the corporate logo on the top of quite a few different reports. It's not huge, but it adds up and grows that application a bit, even before distribution. Anyone know of a way to save the...
7
by: someone | last post by:
Let's say I have a Session timeout of 20 minutes. If the browser periodically request a graphic file, will that keep its Session alive? What keeps the Session alive? Is it the Session cookie that...
1
by: Peter | last post by:
Can someone show me an example of how to add a graphic to one or more days in the calendar control? I would like to add a plus sign graphic to each weekday in the calendar where use can click on...
1
by: hamil | last post by:
I am trying to print a graphic file (tif) and also use the PrintPreview control, the PageSetup control, and the Print dialog control. The code attached is a concatination of two examples taken out...
3
by: djohnson | last post by:
My listview will sort but I would like the column headers to contain up or down arrows to indicate the sort direction. I have an image on the column header, but I'm having a heck of a time...
1
by: anonymous | last post by:
i wrote a graphical program in turbo c 3.0 ,it runs safe on turbo 3.0,(however i'm using xp) so when i wanted to run it for my teacher,both turbo c & program crashed; so i decided to compile it in...
1
by: icepick72 | last post by:
On an academic note, I want to copy a Graphic to an Image (Bitmap). I have the Graphic object but not the origin image from which it originates; this is because I'm overriding the PrintDocument...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.