[css-d] Multipart hr styling
Work is continuing apace on the site I am working on:
http://homepage.ntlworld.com/graham.reeds/space
Sometimes I need to split the page into two or more logical blocks.
Naturally a horizontal rule would be the ideal divider for this.
However the current method uses three images to blend it in with the
border effect like so:
img
src=images/left_middlebar.jpg alt= width=54 height=22 /img
src=images/center_middlebar.jpg alt= width=691 height=22
/img
src=images/right_middlebar.jpg alt= width=55 height=22 /
Logically the ideal solution would to wrap a couple of spans around the
hr. That unfortunately causes validation to fail so div's are being
employed instead:
div class=page-splitter splitter-left
div class=splitter-right
hr /
/div
/div
A little CSS:
.page-splitter,
.page-splitter hr,
.splitter-left,
.splitter-right {
display: block;
height: 22px;
clear: both;
}
.page-splitter hr {
border: none;
margin-left: 54px;
margin-right: 55px;
background: #fff url(../images/center_middlebar.jpg) top left repeat-x;
}
.splitter-left,
.splitter-right {
width: 100%;
}
.splitter-left {
background: transparent url(../images/left_middlebar.jpg) left top
no-repeat;
}
.splitter-right {
background: transparent url(../images/right_middlebar.jpg) right top
no-repeat;
}
And the result can be seen halfway down:
http://homepage.ntlworld.com/graham.reeds/space/ (ignore the problem
with the adverts - I know they are broken). The bar works fine in
Windows FF and O8. Unfortunately IE6 is broken. The middle central bar
has a border and is lowered by around 10 pixels.
The fix suggested for IE on http://www.sovavsiti.cz/css/hr.html doesn't
actually work in this instance - my knowledge of CSS is limited so the
why's and wherefore's are beyond me - so I again turn to this list for
assistance.
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/
Re: [css-d] Multipart hr styling
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-leftdiv
class=content-pagesplitter-right
div class=hrhr //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/
Re: [css-d] Multipart hr styling
Actually, I ran some experimental styling on the hr element in my last design project, and found the following: Firefox (1.5beta) and Opera (9beta) allow full customization of the hr element. That's a good sign for the future, but I've yet to test it in earlier versions. IE (6, quirks mode) insists on having a border on an hr, no matter what you tell it. IE also refuses to paint borders on the top of an hr, and forcibly inserts a margin above it (I know this because when I replaced the hr with a div, the space disappeared). I still need to experiment with earlier browsers, though. -- http://www.mozilla.org/products/firefox/ - Get Firefox! http://www.mozilla.org/products/thunderbird/ - Reclaim Your Inbox! Please avoid sending me Word or PowerPoint attachments. See http://www.gnu.org/philosophy/no-word-attachments.html __ 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/
