2 replies [Last post]
Gray
Offline
newbie
Last seen: 16 years 28 weeks ago
Joined: 2004-10-30
Posts: 5
Points: 0

Hi,

I want to place a horizontal rule across about 95% of the width of a page, then have an image on the right end of the hr, touching the right side of the page.

If the page is resized I want the hr to be dynamic, but I still want the image to stay on the right side of the page.

Is this possible, and if so, can anyone help?

Also, Firefox shows my <hr> in black, Opera and IE6 paints them white. I can fix this using <hr color="#ffffff"> but then this breaks the validation at w3c.org

Isn't web design fun?!

Gray

obsidian
Offline
Enthusiast
South Carolina
Last seen: 14 years 30 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

hr and an image on the same line

ok... as far as color goes... opera, ie, and mozilla all view hr tags a little differently. you need to define your border color, and your background color, and your height to keep it equivalent in all browsers:

hr.white {
    color: #fff;
    background-color: #fff;
    border: 1px solid #fff;
    height: 3px;
}

as far as the image goes, you can do something like this:

<div id="hrImage">
<span class="left"><hr class="white" /></span>
<span class="right"><img src="" alt="" /></span>
</div>

then, you'd need to define css to line them up right:

div#hrImage {
    clear: both;
}

span.left {
    float: left;
    width: 94%;
}

span.right {
    float: right;
    width: 5%;
}

with a little playing with the widths, you can get your alignment how you want it.

You can't win, you can't lose, you can't break even. You can't even get out of the game!

Gray
Offline
newbie
Last seen: 16 years 28 weeks ago
Joined: 2004-10-30
Posts: 5
Points: 0

hr and an image on the same line

Thanks for that, much appreciated.

Gray