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
    Regular Coder
    Join Date
    Oct 2005
    Location
    Newberg, Oregon
    Posts
    252
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Custom Image Borders

    Hey all,

    I am working on a site, and for some reason, they want it so that the borders are a kind of stamp pattern rather than a normal border. Is there a decently semantic way to do this without JS the causes it to work both functionally and semantically?

    I've got kind of a start at http://www.premierpostage.com/index1.php

    You'll notice, in FF at least, that the top and bottom are kosher, the sides obviously push the content down and aren't exactly expandable. Any help would be much appreciated!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    I suppose this is going to be a fixed width? Then you can make the side borders one image with as much space in between as the content is wide. You would then use the elements you have to apply the images as background, e.g.:
    Code:
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>
    </div>
    In this scenario you can apply the side borders to the container div, the top border as background to the header div, and the bottom border to the footer div.

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Location
    Newberg, Oregon
    Posts
    252
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried something akin to that.

    If you view the source code, there is essentially a container div that has two divs in it for the left pattern and the right pattern that are supposed, as seen in the CSS, extend 100% of the height of the container, repeating on the y axis. Why it's not working, I'm not entirely sure.

    The CSS is more or less as follows:

    Code:
    #stampleft {width: 6px; height:50em; background: url(../images/leftsidestamp.gif);  background-repeat:repeat-y; float:left; margin-left:-4px}
    #stampright {width: 6px; height:50em; background: url(../images/rightsidestamp.gif);  background-repeat:repeat-y; float:right; margin-right:-4px}
    #container {width:791px; margin:0 auto; border:1px solid #fff }

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    But that's not even necessary! I mean those two divs just for the images. Always try to use as much HTML as necessary but as few as possible.

    You can just combine those two images and put them in the container itself. They would automatically repeat as much as the container's height is increasing.

    Look at this CSS Zen Garden submission, especially at the background image. That's basically the same approach. Two borders as one image with as much space in between as the content will be wide.

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Location
    Newberg, Oregon
    Posts
    252
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I think I understand, would I then just apply the border to the container div as a plain border or as border-left/right? I guess i can just test around a bit. Thanks!

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    No, as the guy with the CSS Zen Garden Design you would apply this image as background image. Remember, that's just an image displaying two borders... so it's like "fake borders". You aren't applying borders to the div but a background image which pretends the container has borders.

  • #7
    Regular Coder
    Join Date
    Oct 2005
    Location
    Newberg, Oregon
    Posts
    252
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks man, I think I got it!

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Great! That's it!
    Now, to extend this method apply the top border as background image to the header div and the bottom border in the same way to the footer div (positioned at the bottom, of course) and remove the actual <img> tags. Saving code, you know?


  •  

    Posting Permissions

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