After posting I sat down and took the styling to pieces. This might
help someone else.
I started off with just the <hr /> tag inside a <div> that had a 'clear:
both' rule to stop it overwriting other elements.
Then I applied the styling rule of style and hide from [1]. A bit of
tweaking gave me a graphic from one side to the other with a gap for the
margin graphics. Nothing particularly special here. Time to add in the
left side. Wrapping that around the central <div> didn't cause any
problems so I added the right side graphic. Hey presto! - it worked.
Now I must of tried at least a dozen permutations to get this working
and this isn't particularly different from some of the others (I don't
have a history of attempts unfortunately) but I am glad it is working.
The CSS:
.content-pagesplitter {
clear: both; }
.content-pagesplitter-left {
background: transparent url(../images/left_middlebar.jpg) top left
no-repeat; }
.content-pagesplitter-right {
background: transparent url(../images/right_middlebar.jpg) top right
no-repeat; }
div.hr {
height: 22px;
margin-left: 54px;
margin-right: 55px;
background: transparent url(../images/center_middlebar.jpg) top
center repeat-x; }
div.hr hr {
display: none; }
and the source:
<div class="content-pagesplitter">
<div class="content-pagesplitter-left"><div
class="content-pagesplitter-right">
<div class="hr"><hr /></div>
</div></div>
</div>
[1] http://www.sovavsiti.cz/css/hr.html
Thanks, Graham Reeds.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
