Image as border in tableless design. HOW?

Discussion in 'HTML & Website Design' started by jordanthegreat, Dec 6, 2007.

  1. #1
    Hey guys,

    I am starting work on my second ever tableless design and this is what I have come up with in photoshop for a general layout: http://www.reelracing.tv/antbar/AB-site.jpg

    It is a fair step up in design from my first tableless site but poses a new hurdle for me. How do I do the borders for this design without using tables since the borders would be made from an image?

    I know the easy way out would be to make one wide slice spanning the entire width of the design and just have that repeat vertically (but remain forever fixed width). But I don't want to do that. I want to know how to make it so that the layout can be stretched both horizontally and vertically.

    Thanks for your help,
    Jordan
     
    jordanthegreat, Dec 6, 2007 IP
  2. EIx

    EIx Peon

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can't post link and I PM you.
    more please google "CSS Round Corners"
     
    EIx, Dec 6, 2007 IP
    jordanthegreat likes this.
  3. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #3
    jordanthegreat, Dec 6, 2007 IP
  4. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #4
    I'm not quite sure what your asking here.

    Your looking at creating that image as a site? Why not just position divs over it? Or have different sections load in ask background-images on different divs. Wouldn't be hard to do at all.
     
    twistedspikes, Dec 6, 2007 IP
  5. live-cms_com

    live-cms_com Notable Member

    Messages:
    3,128
    Likes Received:
    112
    Best Answers:
    0
    Trophy Points:
    205
    Digital Goods:
    1
    #5
    You wouldn't need to code the borders, you would have a position div with set height and width, the size of the layout, and the background-image of that div would be a full size image of the layout excluding all elements bar the borders.
     
    live-cms_com, Dec 6, 2007 IP
  6. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #6
    To answer both of you, I need it to be fluid in both width and height. If you see my previous post, you will see that I got the solution but thanks for your input anyways :)
     
    jordanthegreat, Dec 6, 2007 IP
  7. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #7
    Oh right, so you need it to be fluid. Thats easy to do with height on a layout like that, not so much width. But good that you found a solution :)
     
    twistedspikes, Dec 6, 2007 IP
  8. boogalooDude

    boogalooDude Peon

    Messages:
    82
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Good for you, most people can't be bothered to build properly accessible expandable sites and frankly it's a pain in the arse, but it's the right way to do it.

    There are a bunch of accessible/expandable rounded corner techniques once you get into it. you'll end up deciding which one you like to use.

    Look up the 'sliding door' technique, it's a great way to build expandable nav tabs.
     
    boogalooDude, Dec 8, 2007 IP