How would I create this with CSS?

Discussion in 'CSS' started by Chris369, Nov 18, 2008.

  1. #1
    Hello

    I want a really basic template to use for the initial development of an idea I have. I've put a quick thing together in Photoshop (really simple, see link) and was wondering whether it could be done with CSS?

    Or do I not even need CSS for this? Basically I want the width to stretch depending on the users resolution and I want the gradients at the edge. If I just slice what I have will it not stay the same width?

    Not going to be an awful lot on it. Homepage will have a search box in the middle and a button plus some text at the bottom and the second page will be a results page with a table of results.

    There will also be a header at the top when I get around to doing it.

    [​IMG][​IMG]

    Help much appreciated :)
     
    Chris369, Nov 18, 2008 IP
  2. elias_sorensen

    elias_sorensen Well-Known Member

    Messages:
    852
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #2
    Hmm.... I would create to absolute divs for left and right, but that wouldn't be fantastic good to use.
     
    elias_sorensen, Nov 18, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    To make that be able to stretch, you'll need not one but two images, one for each side.

    Google CSS Sliding Doors. You'll need two elements, each holding a bg image, which move with the edge of the screen. In this case, the easiest solution is to let the <body> hold one side (prolly the right side) and a page-wrapping #container holding the left.

    You may also then need a 100% height model to keep #container tall enough. Google 100% height model css.
     
    Stomme poes, Nov 20, 2008 IP