PDA

View Full Version : place an image line under heading


spazzer
10-06-2009, 03:47 PM
Hi,
I have designed a 2 pixel wide line to underline my h1 tag ,how can I place this image under the tag to then be copied sitewide through my template !!

any help appreciated, NC

d a v e
10-06-2009, 05:36 PM
why not use a css border for all your h1s like this in your stylesheet

h1 {border-bottom:2px solid black;} (adjust colour to suit)

or is it a special kind of line?

spazzer
10-06-2009, 05:49 PM
Hi,
Thanks for reply Dave , yes I created a 2 pixel line in Fireworks and wanted to insert it under all my h1 tags !

Cheers if any can assist it would be great !

DWcourse
10-06-2009, 09:00 PM
Using CSS set the image as the background for the H1 tag and align it to the bottom with no repeat:

h1 {
background: url(img.gif) no-repeat left bottom;
}

You might need to add some padding-bottom to get the spacing you need.

Although if it's a solid color just use the CSS border-bottom property and you won't need the image.

d a v e
10-07-2009, 03:08 AM
you didn't answer my question: why can't you simply use a coloured border in css? is the line a solid colour or not.

spazzer
10-07-2009, 02:07 PM
Hi,
Thanks for replies on this.
I know I can create a solid border with css but I created a 2 pixel image in Fireworks that fades from one colour into another sorry if this caused any confusion, thanks again.

Nick C :-)

domedia
10-07-2009, 04:59 PM
Not knowing exactly how it's going to look or what your image looks like I would try something like this using CSS background:
h1 {background: url(file.gif) repeat-x left bottom;}
Then you can adjust with padding-bottom.

EDIT: lol just saw DWCOurse's post. Funny stuff..