SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Bendigo
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    XHTML layout - background effect need help

    Hi Guys,

    Anyone here point me in the right direction of developing the following layout in valid tableless css.

    Something similar to http://www.infinitytechnologies.com.au where they have the side backgrounds shrink away on smaller screen resolutions. So needs the fixed with for the centre section aswell as being then able to make a 2 oe 3 column layout inside of this.

    Any advice or even pointing me towards a similr demo somewhere would be great

    Thanks

  2. #2
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The background is very easy,
    if you look at the background image http://www.infinitytechnologies.com....s/bk_left1.jpg

    its 1px wide and Im not sure how long.

    All the CSS is:

    Code:
    background: url(bkleft1.jpg) repeat-x; /*So it wont repeat vertically, only horizontal*/
    They then just slapped some div containers for the layout above it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Bendigo
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lostseed
    The background is very easy,
    if you look at the background image http://www.infinitytechnologies.com....s/bk_left1.jpg

    its 1px wide and Im not sure how long.

    All the CSS is:

    Code:
    background: url(bkleft1.jpg) repeat-x; /*So it wont repeat vertically, only horizontal*/
    They then just slapped some div containers for the layout above it.
    Hey mate nah you might want to look again.

    No problems creating the 1pix wide backgrounds, but there is 1 on each side for left and right then the middle section.

    And theres arent in divs they have them in tables.

    Im after a tableless solution to get this sort of effect.

  4. #4
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just place the background in the body as lostseed suggested, then make a fixed layout = a div with a fixed with and margin: 0 auto;

    If you need more specific help, put something together and put it online.
    Dan G
    Marketing Strategist & Consultant

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Bendigo
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk
    Just place the background in the body as lostseed suggested, then make a fixed layout = a div with a fixed with and margin: 0 auto;

    If you need more specific help, put something together and put it online.
    The background isnt just one background straight across though, there is seperate backgrounds for each side thats where I was getting very confused with myself.

    Thanks for answering though

  6. #6
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like the right background is in a DIV container (floating aside all the content) and the left background is just the original. Its very easy to do, with the firefox Web Developer Tool > Outline > Block Level Elements, it becomes clear

  7. #7
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I love the XRay extension for this purpose also:
    http://www.designmeme.com/xray/

    Will display all tags on a day as well as id and class applied to elements.

    Nadia

  8. #8
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mathawker
    The background isnt just one background straight across though, there is seperate backgrounds for each side thats where I was getting very confused with myself.

    Thanks for answering though
    That's right, but for your simple requirements you stated in your first post, you don't need to do it this way. A simple background in the body, a fixed layout that you center is all there is to achieve this:

    side backgrounds shrink away on smaller screen resolutions. So needs the fixed with for the centre section aswell as being then able to make a 2 oe 3 column layout inside of this.
    Dan G
    Marketing Strategist & Consultant


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
  •