Two body backrounds in CSS?

Discussion in 'CSS' started by Thomas U, Feb 28, 2007.

  1. #1
    I'm trying to make a strip going across the top of the body that is 100%, but have the website only 770px. I did that by making the header and body have the same strip so it looks like one big fluid strip. Is there an easy way for me to make a footer strip that is 100% maintaining the 770px. I know it's a bit hard to understand. I'll give you an example..

    http://www.weloo.com/

    See how this sites main content is fixed but the header and footer are fluid? I know he/she used divs to do this, but is there any other way?

    Thanks :)
     
    Thomas U, Feb 28, 2007 IP
  2. nicknick

    nicknick Peon

    Messages:
    429
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you can use divs or tables. Is there a reason you don't want to use divs?
     
    nicknick, Feb 28, 2007 IP
  3. Thomas U

    Thomas U Active Member

    Messages:
    175
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #3
    I'm still in the process of learning how to create a website out of divs, if you know of any free templates which use simple tables please tell me so i can study the code :)

    How would I do this using tables?
     
    Thomas U, Feb 28, 2007 IP
  4. nicknick

    nicknick Peon

    Messages:
    429
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You can try having a look at these if you want.

    http://www.opensourcetemplates.org/opensource.cfm

    As for tables. You can make variable width tables on the left and right of your centre table. Then divide the bottom into tables or make it one whole cell. Colour the bottom cells in one colour or give them all the same background and it should work. I'm not sure if that makes sense at all.
     
    nicknick, Feb 28, 2007 IP
  5. nicknick

    nicknick Peon

    Messages:
    429
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I threw this together quickly for you. It's not valid and I'd take the style out of the head and make it a file but you get the idea as to what I meant.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
    body {
    padding: 0;
    margin: 0;
    }
    </style>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <center>
     <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
       <td bgcolor="#999999">&nbsp;</td>
       <td width="400" bgcolor="#999999">&nbsp;</td>
       <td bgcolor="#999999">&nbsp;</td>
      </tr>
      <tr>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>
      </tr>
      <tr>
       <td bgcolor="#990033">&nbsp;</td>
       <td bgcolor="#990033">&nbsp;</td>
       <td bgcolor="#990033">&nbsp;</td>
      </tr>
     </table>
    </center>
    </body>
    </html>
    
    Code (markup):
     
    nicknick, Feb 28, 2007 IP
    Thomas U likes this.
  6. Thomas U

    Thomas U Active Member

    Messages:
    175
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #6
    wow thanks alot :D green for you :p
     
    Thomas U, Feb 28, 2007 IP
  7. nicknick

    nicknick Peon

    Messages:
    429
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #7
    you're welcome. Let me know if you run into any other problems.
     
    nicknick, Feb 28, 2007 IP