...

View Full Version : hr styling using css



nfs
03-06-2005, 06:01 AM
Hi! I came across this website http://www.kingcosmonaut.de/ and I like the hr styling. I think it uses background image but I didn't manage to look up the css file for the implementation. Could someone give me a hand? Thanks!

_Aerospace_Eng_
03-06-2005, 07:37 AM
they just added a background to the definition list, see

#photography dl {
clear:both;
margin:0 !important;
padding:8px 0 8px 0;
background:url(/images/layout/hr_bg.gif) bottom repeat-x;
}
and here is that image http://www.kingcosmonaut.de/images/layout/hr_bg.gif

Jalenack
03-06-2005, 08:30 AM
Also, a more common method, they used:

<div class="hrdeco"><hr /></div>

.hrdeco hr {display:none;}

.hrdeco {
clear:both;
height:11px;
margin:3px 0 24px 0;
background:url(/images/layout/hr_bg.gif) top center repeat-x;
}

This is a clever way of using <hr> For environments where css is turned off, a plain-vanilla <hr> is shown, but with css on, the <hr> is set to not display and a div with a background image takes its place.

nfs
03-06-2005, 08:17 PM
Also, a more common method, they used:

<div class="hrdeco"><hr /></div>

.hrdeco hr {display:none;}

.hrdeco {
clear:both;
height:11px;
margin:3px 0 24px 0;
background:url(/images/layout/hr_bg.gif) top center repeat-x;
}

This is a clever way of using <hr> For environments where css is turned off, a plain-vanilla <hr> is shown, but with css on, the <hr> is set to not display and a div with a background image takes its place.

Thank you for the reply! Somehow, the image doesn't show up for me. Any ideas? :confused:

Scootertaj
03-06-2005, 08:50 PM
Did you upload the picture to your server?

nfs
03-06-2005, 10:07 PM
Oh...I just figured it out. I have to put
url(images/hr_bg.gif) instead of
url(/images/hr_bg.gif) in order for the image to show up. So does it mean that the first slash must not be there?

_Aerospace_Eng_
03-06-2005, 10:30 PM
doesn't have to be but the first slash means it should start from the root folder so if you have a folder before the images folder then it wont work

grubesteak
03-07-2005, 09:41 PM
I think this is great. It really adds a new diminsion to styling within the content. Wonderful. I'll have to give it a try.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum