SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to have a layout like this?

    Hello,

    I'm looking a layout like that of http://www.tesco.com/

    My questions are:
    1) is this a three column layout or one column with flexible margin?
    2) how to get a page border like this?

    thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Toronto, Canada
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I have a couple of comments for you:

    1 | This site is a one-column layout with a margin that "flexes" vertically -- but it doesn't stretch horizontally. You can have a look at their source code to examine the structure, and you'll see it's relatively well organized so it'll be easy for you to break down.

    2 | The site itself is constructed very poorly, so I wouldn't advise following suit.

    a - The menu system doesn't work properly (at least in IE7, still the most important browser)
    b - that "border" is actually a background image that stretches the length of the whole <div> -- white space and all. What that means is that the file size of the image is unduly increased and that the layout is not scalable.

    Here, the designer/developer has used CSS, a great way to create fluid layouts, to create a static and hard-to-maintain site.


    You were on the right track originally by thinking it was a 3-column layout. To achieve the same effect with better design, you would need to make 2 shadows -- one for either side, and save them as slices 1px in height. Use them as background images in DIVs 1 and 3, and use DIV 2 as your content box -- nesting additional divisions inside it as necessary.

    FL

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks felix for your reply,

    I can do a one-column layout like this:
    body {margin:0; text-align:center;}
    #main {width:84&#37;; margin:0 8%;}
    how to a get border like theirs? I know it will need a background image, but how to add it to the border of main div and repeat vertically?

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    The example site you gave was a fixed width, and you could make the border with a background image repeated on the body..
    So something more like
    Code:
    body {margin:0; text-align:center; background: #EFEFEF url(bg.gif) repeat-y top left}
    #main {width:760px; margin:0 auto;}
    If you want #main to be a percentage then you will need to use two containers and use two background images (one for the left, one for the right) - because only one background image can be put on any element.

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Mark,

    I'll have a go with fixed width!


Bookmarks

Posting Permissions

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