Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    nfs
    nfs is offline
    New Coder
    Join Date
    Feb 2005
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hr styling using css

    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!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    they just added a background to the definition list, see
    Code:
    #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

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #4
    nfs
    nfs is offline
    New Coder
    Join Date
    Feb 2005
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Jalenack
    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?

  • #5
    Regular Coder
    Join Date
    Sep 2004
    Posts
    347
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Did you upload the picture to your server?

  • #6
    nfs
    nfs is offline
    New Coder
    Join Date
    Feb 2005
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh...I just figured it out. I have to put
    Code:
    url(images/hr_bg.gif)
    instead of
    Code:
    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?
    Last edited by nfs; 03-06-2005 at 11:17 PM.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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

  • #8
    Regular Coder
    Join Date
    Feb 2005
    Location
    Lawrence, Kansas
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •