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 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    container border shadow

    Hi

    I'd like to insert a border shadow into a container div - onto both sides and on the bottom - and that is expandable length wise to accomodate different page lengthes.

    This is the effect I'd like to recreate using CSS:
    http://www.walkertest.co.uk/condor/w..._web/test.html

    I've checked out the articles on alistapart on applying shadow borders but these seem to apply a fixed length jpeg image.

    Does anyone have any solutions for achieving this with css?

    Thanks

    Dirk

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Background images in HTML will always repeat themselves automatically - horizontally and vertically. So you can just take the image you posted, make it one pixel high, so only the side borders will show (smaller file size) and apply it to your container div (through CSS) like so:

    Code:
    #container {backgorund: url(graphics/bg_main.gif) repeat-y; /* the repeat value is optional as nobody would notice that it repeats horizontally withou it */}
    Of course such "fake borders" only work if the container has a fixed width which I assume in your case.
    And then you make an image of the bottom border (just as high as the actual border is) and apply it to the last element in your container (e.g. the footer div), positioning it at the bottom:
    Code:
    #footer {background: url(graphics/border_bottom.gif) bottom left no-repeat;}
    And see? This time we told it to not repeat, otherwise it would look funny (try it out).
    So now the bottom border will move down as the content will grow. The side borders are repeating themselves automatically so you don't have to worry about them.

    Hope that helped? Good luck.

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

    thanks for that stephan.

    the critical thing is that the bottom div with the bottom shadow automatically resizes when the content increases.

    Cheers

    Dirk

  • #4
    New Coder
    Join Date
    Sep 2005
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Stephan

    Should the bottom div be within the container divs - or outside it

    Thanks

    Dirk

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background images

    If I may chime in here: by the looks of it, the footer background image covers part of the container background; therefore, it should really be a child of the container to properly overlay it.
    If the footer bg is set to align to the bottom of its div you also solved the stretching footer issue: if its height stretches beyond the bg image height, the bg image will still stick to the bottom of the footer; for the rest of it, the container bg will shine through and maintain the visual effect.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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