image line divider

quartzy · Joined: 26 Dec 2007 Posts: 400

I have a very thin image that I want to use in place of a hr tag. But I dont know where to put it? I tried putting it on paragraph but it went expanded too high and did not remain thin. I tried it on a break but it did not show at all, and it seems to much code for a div is there any other way to do this anyone? Much appreciated

Airick1994 · Joined: 20 Dec 2007 Posts: 100 Location: Canada, eh?

<img src="yourimage.gif" alt="Your Alt" />

That's how to put an image on a site.

Are you using XHTML or HTML? If you're using XHTML, the image tag must be in a <p>, then you can just make the <p>'s height and width to be the same as the image's.

Straystudio · Joined: 14 Apr 2008 Posts: 228 Location: Nord Italy

Progress makes You all forgetting the old tools ...

<div align="left/center/right">
<img height="" width="" src="yourimage.gif" alt="-" />
</div>

Building a whatsover large, colored space with a gradient, say lighter on the left, darker on the right, then saving it as a .gif, is a trick to handle strangely colored hr :
You simply will be assigning any different due thiny height="pixel" to the img Elment shaping them.

quartzy · Joined: 26 Dec 2007 Posts: 400

OK so what I gather is that I have to use a div as it is a repeating image and not a one whole image. So I need to place it as a background image. I thought there was a way to place it as a hr background image.

sticks464 · Joined: 31 Dec 2006 Posts: 933

Why not add padding to the image and use a bottom border. Or use a 1px clearing div or <p> where you can define width and add a bottom border.

quartzy · Joined: 26 Dec 2007 Posts: 400

the image is meant to be the border in place of a hr. Tried doing it with a <p> tag but it did not work, it expanded too high. So I placed a div around it and it is all fine in FF but does not show at all in IE7 anyone know how to correct this?

sticks464 · Joined: 31 Dec 2006 Posts: 933

One thing you might look at before you try my solution is your repeat on the image. just the repeat by itself will do nothing. It has to be no-repeat, repeat-x or repeat-y.

My solution;

quartzy · Joined: 26 Dec 2007 Posts: 400

OK I will do it that way, I wanted to save space of loading by doing it the other way, but as it does not work I guess yours is the most realistic way to do it.

sticks464 · Joined: 31 Dec 2006 Posts: 933

If you want to only make it 5-10px wide it will work. Just change the no-repeat to repeat-x. But in order for it to appear in all the browsers it must be 3px high.

quartzy · Joined: 26 Dec 2007 Posts: 400

I did not know the image had to be 3px high, what if I do a 1px high is that probaly why its not showing. All I wanted to do originally was make the hr tag very small in height, as the default is an ugly big line.

sticks464 · Joined: 31 Dec 2006 Posts: 933

The actual line is only 1 pixel and has 1pixel whitespace on the top and bottom. When you create your image using whatever graphics editor you use, make the new image 3pixels high and 5 pixels wide. Use whatever tool you normally use to create a one pixel line, using the center pixel of the 3. This is what gives it room to appear in IE. Then just lower your margin or padding by 2 pixels to maintain the distance you want from other objects.

quartzy · Joined: 26 Dec 2007 Posts: 400

yes I get it now,took me aw while but I done a 3px image so it will show. Tested it and it shows in IE7 but the dreaded IE6 I have yet to find out. Thanks