PDA

View Full Version : Horizontal Rule



QuizToon
12-09-2005, 05:40 PM
How do I use my own graphic as the horizontal rule, and how do i refer to it in the style?

:confused:

Quiztoon

jscheuer1
12-09-2005, 07:38 PM
It would be easier just to use the image:


<img src="my_rule.gif" width="200" height="3">

You could style it as display:block; to avoid having to add <br> elements around it, if that is the effect that you want. Or, you could use a division or other block level element and use your image as its background. This would be particularly useful if your image were one that could be repeated to produce any length 'rule'. That could be styled like so:


.myrule {
width:100%;
height:3px;
background:url('my_rule.gif') center black repeat;
text-align:center;
}

.myrule img {
height:3px;
}

with markup like so:


<div class="myrule"><img src="my_rule.gif></div>

Ideally, my_rule.gif's actual height would match the desired height of the 'rule'.

QuizToon
12-11-2005, 08:59 PM
Thanks for that, will give it a try