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 to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making a dynamic "frame" around content with CSS

    I know exactly how to do this with tables, but am trying to get away from using them, and rely on css. I usually create 4 corner images (top left, top right, bottom left, and bottom right) with horizontal and vertical images as backgrounds that will repeat as long as necessary to fit around whatever the content is inside. The table looks like this:

    TR
    TD with top left image
    TD with repeating horizontal background
    TD with top right image
    TR

    TR
    TD with repeating vertical image
    TD with content
    TD with repeating vertical image
    TR

    TR
    TD with bottom left image
    TD with repeating horizontal background
    TD with bottom right image
    TR

    Then, whatever the content is decides the width and height, but the repeating background images allow the "frame" to be dynamic.

    In this specific instance, I only need the vertical sides to grow dynamically as the content increases downward in a blog layout. I've tried searching for help, but when I search for how to use css to make a border, or a frame, well...you can guess how many hits I get for the wrong kind of borders and frames. I don't know how else to refer to what I need css to do.

    My corners have shadows, so the repeating backgrounds have to start after one corner image and end before the next corner image, or else you can see where they overlap.

    Any ideas?

    Thanks,
    -Oabie

  • #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
    Read this thread.
    http://www.codingforums.com/showthread.php?t=75868
    the example I posted might get you started.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I thought that was it, but as I replaced the images with mine, I noticed that the top, bottom, and sides that repeat are extending underneath the corners, which doesn't work with my images because I am using pngs with a drop shadow, and you can see the repeating middle section through the drop shadows. I need a way to have the middle sections start and stop between the corners, and not be behind them.

    Make sense?
    Last edited by Oabie; 07-15-2008 at 07:41 AM.

  • #4
    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
    Attach your images.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I wound up combining a few different approaches and finally got it to work, thanks for your help.


  •  

    Posting Permissions

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