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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts

    3 column layout - background image problem

    Hi, I'm trying to use a 3 column layout with a different background image for each column. The only column i'll be using for content is the centre one. The way i've done it at the moment is giving me a problem as when i reduce the size of the window the centre column remains fixed, which i want, but the right hand column travels to the left at full size as i minimise the window size, and therefore obscures the centre column holding the content. Any advice on how i should tackle this problem - i would like a fluid layout ideally, but maybe a fixed layout may work better given the way i've constructed the layout so far. Any advice would be great - as i'm a bit out of my depth and am still in the early stages of learning to use CSS.

    html
    <CODE>
    <body>
    <div id="mainwrap">
    <div id="contentarea">
    <div id="contentarea2">
    <div id="column1">
    </div>
    <div id="column2">
    <div id="header">
    <h1>ANTONINE SPORTS CENTRE</h1>
    </div>
    </div>
    <div id="column3">
    </div>
    </div>
    </div>
    </div>
    </body>
    </CODE>

    the css...
    <CODE>
    * {
    margin: 0;
    padding: 0;
    height:100%;
    }

    #mainwrap{
    background: url(new_background/background_middle.jpg) repeat-x;
    height:100%;
    }

    #contentarea{
    }

    #contentarea2{
    }

    #column1{
    position:absolute;
    left:0px;
    width:240px;
    background: url(new_background/border_left.jpg) repeat-y top left;
    }

    #column2{
    position:absolute;
    margin-left:250px;
    margin-right:250px;
    }

    #column3{
    position:absolute;
    right:0px;
    width:240px;
    background: url(new_background/border_right.jpg) repeat-y top right;
    }

    #header {
    height:90px;
    background: url(antonine_logo_rev3.png) ;
    background-repeat:no-repeat;
    margin-top: 60px;
    }
    </CODE>

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Code:
    <style type="text/css">
     #left, #center, #right { float: left; width: 20%; border-right: 1px solid #000; padding: 10px; }
     #left { background-image: url(path/to/image.jpg); }
     #center { background-image: url(path/to/image.jpg); }
     #right { background-image: url(path/to/image.jpg); }
    </style>
    
     <div id="left">
      <p>This is the left column</p>
     </div>
     <div id="center">
      <p>This is the center column</p>
     </div>
     <div id="right">
      <p>This is the right column</p>
     </div>
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks for the reply bwiz, definitely simplifies the code i originally had. I've still got a problem, however, as I want the background images to repeat for 100% of the page, so i've added the code which i thought would do this. With the code below, strangely anything else i want to add in the center column disappears into whitespace at the bottom of the page, where the background images have stopped repeating. Do you have any idea why this might be happening?

    <code>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    height:100%;
    }

    #left, #center, #right { float: left; width: 20%; height:100%;}

    #left {
    background: url(new_background/border_left.jpg) repeat-y top left;
    }

    #center {
    background: url(new_background/background_middle.jpg) repeat-x;
    width:60%;
    }

    #right {
    background: url(new_background/border_right.jpg) repeat-y top right;
    }
    </style>

    <div id="left">
    <p>This is the left column</p>
    </div>
    <div id="center">
    <p>This is the center column</p>
    <p>more stuff</p>
    </div>
    <div id="right">
    <p>This is the right column</p>
    </div>
    </code>

  • #4
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Can you attach your background images here?
    .
    .

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts
    here they are here....
    Attached Thumbnails Attached Thumbnails 3 column layout - background image problem-background_middle.jpg   3 column layout - background image problem-border_left.jpg   3 column layout - background image problem-border_right.jpg  

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by nicky77 View Post
    With the code below, strangely anything else i want to add in the center column disappears into whitespace at the bottom of the page, where the background images have stopped repeating. Do you have any idea why this might be happening?
    Can you please post your complete code? It would be even better if you gave us a link.

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hi, here is the full code for the xhtml and css files. Don't have a link at present unfortunately. Grateful for any help as i still can't solve this problem.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Antonine Sports Centre</title>
    <link href="style5.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    
    <div id="left">
    </div>
     <div id="center">
    <div id="header">
    <h1>ANTONINE SPORTS CENTRE</h1>
    </div> 
      <p>This is the center column and this is in the correct position</p>
      <p>However, this paragraph is placed in whitespace at the bottom of the screen, 
      where the images have stopped repeating</p>
    </div>
     <div id="right">
     </div>
    </body>
    </html>
    
    //the css file
    * {
    margin: 0;
    padding: 0;
    height:100%;
    }
    
    body,html{height:100%}
    
     #left, #center, #right { float: left; width: 20%;  min-height:100%;}
     
     #left { 
     background: url(new_background/border_left.jpg) repeat-y top left; 
     }
     
     #center { 
     background: url(new_background/background_middle.jpg) repeat-x; 
     width:60%;
    }
     
     #right {
     background: url(new_background/border_right.jpg) repeat-y top right; 
     }
     
     #header {
    height:90px;
    background: url(antonine_logo_rev3.png) ;
    background-repeat:no-repeat;
    margin-top: 60px;
    }


  •  

    Posting Permissions

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