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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    CSS Wrapper and BG Colour

    I was trying to use a wrapper type css div to make a page 1000px wide with inside it other divs that remain with its formatting.

    The divs I want are:

    wrapper: 1000px wide
    header: 1000px wide and 50px high

    menu: 200px wide
    table: 800px wide

    The problem I have is the background on the menu, and the table doesnt follow the same colour as the wrapper.
    On the left side of the page, the white background ends where the menu div ends, then below it it goes back to the body colour

    Here is an image of the problem: http://i35.tinypic.com/6zrbxx.png

    any idea why?

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    html {
       /*background-color:#CAFF70;*/
       font-family:Arial, Helvetica, sans-serif;
    }
    
    body {
       /*text-align:center;*/
       /*padding: 0 10px 0 10px;*/
       background-color:#CAFF70;
       font-family: Gill Sans MT, Verdana, Arial;
       /*width: 1000px;*/
       margin: 0 auto;
    }
    
    #wrapper {
       width: 1000px;
       background-color:#FFFFFF;
       margin: 0 auto;
    }
    
    #header {
       width: 1000px;
       height: 50px;
    }
    
    #menu {
       width: 200px;
       float:left;
    }
    
    #booktable {
           width: 800px;
           float: right;
    }
    
    table {
       /*margin: 0 auto;*/
       width: 800px;
       float:right;
       /*background-color:#FFFFFF;*/
       border-collapse: collapse;
       text-align: left;
       font-size:12px;
    }
    
    table tr.colour1 {
       background: #E0EEEE;
    }
    table tr.colour2 {
       background: #C1CDCD;
    }
    table tr td {
       padding: 0 5px;
    }
    table tr td.cen {
       text-align:center;
    }
    Code:
    <div id="wrapper">
       <div id="header">
          <h2 align="center">Resetting the Database</h2>
    
       </div>
    
       <div id="menu">
          hi
       </div>
    
       <div id="booktable">
       <table>
          <tr>
             <th scope="col">#</th>
    
             <th scope="col">Creator</th>
             <th scope="col">Title</th>
             <th scope="col">ISBN</th>
             <th scope="col">Price</th>
             <th scope="col">Genre</th>
          </tr>
    
          <tr class=colour1>
             <td>1</td>
             <td></td>
             <td>"Doctor Who" Annual 2006</td>
             <td class="cen">1904419739</td>
             <td class="cen">36.99</td>
             <td>Doctor Who Comics & Graphic Novels Annuals</td>
    
          </tr>
       </table>
       </div>
    </div>
    Here is an image of the problem: http://i35.tinypic.com/6zrbxx.png

  • #2
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Need to clear your floats.

    adding something to clear them at the bottom, inside your #wrapper.
    e.g. <div style="clear:both"></div>

    Also you have <tr class=colour1>, should be <tr class="colour1">

    Also in future it's easier to just post a link to a live copy

  • Users who have thanked Lochlan for this post:

    idire (11-19-2008)

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    wow that was simple. I didnt know that.

    and thanks about the colour, will fix that error.

  • #4
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Yeah, might be useful to read up on floats: http://codingforums.com/showthread.p...640#post617640

    Remember to click thanks if you found this help

  • Users who have thanked Lochlan for this post:

    idire (11-19-2008)

  • #5
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    useful link thanks

    i never really learnt css, just messed about with it


  •  

    Posting Permissions

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