Background color <div> not within entire section

Discussion in 'HTML' started by Maarten, Feb 4, 2008.

  1. Maarten

    Maarten Guest

    Hi,

    Recently I restarted some project I began quite some time ago and now I
    am running into some difficulties, for me that is. What I have is one
    <div> section with a limited width in which al the data is being put and
    is centered in the middle. The background colour of the body is one
    colour and the <div> section is another. Somehow, when I assign a colour
    to the <div> that colour is used only for some text which is used right
    at the beginning but all the other elements within the <div> have the
    background colour of the <body>, in Firefox that is because in Internet
    Explorer this aspect is working fine. Now this is a little trick which
    is being used in quite a few websites these days and when I take one of
    them, such as webwereld.nl I can edit it and change the background
    colour for the centered <div> section without too much problems,
    however, I can't figure out why this isn't working in my own page (I
    tried to use the same techniques for positioning the sections etc)

    Can somebody please take a look and tell me what I am doing wrong. I
    have put a simplified page at the bottom of this email and I have put it
    online at: http://home.planet.nl/~koster7/

    I hope I have made it a bit clear what the problem is, though it should
    be apparent taking a look at it in both FF and IE. Also do I hope the
    html is a bit readable.

    Thanks in advance, Maarten


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>

    <head>
    <title>Website version 0.1</title>
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />

    <style type="text/css">
    body {
    background-color:#807539;
    font: 15px arial;
    }

    #mainBody {
    // position: relative;
    width: 950px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    background-color:#e7e2c7;
    color:black;
    }

    ..header1 {
    background-color:#807539;
    color:white;
    text-align:center;
    font-style: oblique; font-variant: small-caps; font-weight:
    900; font-size: 15px; line-height: 24px;
    }

    ..header2 {
    background-color:#e7e2c7;
    color:black;
    font-style: oblique; font-variant: small-caps; font-weight:
    800; font-size: 14px; line-height: 24px;
    }

    ..header3 {
    background-color:#e7e2c7;
    color:black;
    font-style: oblique; font-variant: small-caps; font-weight:
    900; font-size: 15px; line-height: 24px;
    }

    ..bodyText {
    border-width: 20px;

    }

    ..leftColumn {
    float: left;
    width: 450px;
    margin: 10px;
    }

    ..rightColumn {
    float: right;
    width: 450px;
    margin: 10px;
    }

    #mainMenu {
    background-color:#807539;
    color:white;
    border: solid #e7e2c7;
    text-align: center;
    font-style: oblique; font-variant: small-caps; font-weight:
    900; font-size: 15px; line-height: 24px;
    }

    #mainMenuT {
    background-color:transparent;
    width:950px;
    }

    ..mainMenuS {
    position:absolute;
    background-color:#a4a08a;
    border: solid #e7e2c7;
    color:white;
    visibility:hidden;
    text-align: center;
    z-index:1;
    }

    ..mainMenuST {
    width:944px;
    border-width: 20px;
    }

    #maininfo {
    width:950px;
    }

    ..evenEntry {
    background-color: white;
    }
    ..unevenEntry {
    background-color: #dcd5ad;
    }

    #maininfoMusica {
    width: 400px;
    table-layout: fixed;
    }

    #maininfoMusicaTBL {
    width: 400px;
    white-space: nowrap;
    table-layout: fixed;
    border-spacing: 0px;
    }

    .maininfoMusicaTBL-C1 {
    width: 15%;
    white-space: nowrap;
    table-layout: fixed;
    padding-right: 0.2cm;
    overflow: hidden;
    }

    .maininfoMusicaTBL-C2 {
    width: 40%;
    white-space: nowrap;
    table-layout: fixed;
    padding-right: 0.2cm;
    overflow: hidden;
    }

    .maininfoMusicaTBL-C3 {
    width: 45%;
    white-space: nowrap;
    table-layout: fixed;
    padding-right: 0.2cm;
    overflow: hidden
    }

    #maininfoFotografia {
    width: 400px;
    }

    #maininfoCinematica {
    width: 400px;
    }

    </style>

    </head>

    <body>

    <div id="mainBody">
    <div id="maininfo">

    <div id="maininfoMusica" class="leftColumn">


    <div class="header1">Recent Musica Updates</div>


    <table id="maininfoMusicaTBL">

    <tr class="header2">
    <td class="maininfoMusicaTBL-C1">Date</td><td
    class="maininfoMusicaTBL-C2">Artist</td><td
    class="maininfoMusicaTBL-C2">Title</td>
    </tr>

    <tr class="evenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>



    <tr class="unevenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>


    <tr class="evenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>



    <tr class="unevenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>


    <tr class="evenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>



    <tr class="unevenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>


    <tr class="evenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>



    <tr class="unevenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>


    <tr class="evenEntry">
    <td class="maininfoMusicaTBL-C1">date</td>
    <td class="maininfoMusicaTBL-C2">text text text</td>
    <td class="maininfoMusicaTBL-C3">text text text</td>
    </tr>






    </table>

    </div> <!-- End maininfoMusica -->

    <div id="maininfoFotografia" class="rightColumn">

    <div class="header1">Recent Fotografia Updates</div>

    Not yet available

    </div> <!-- End maininfoFotografia -->

    <div id="maininfoCinematica" class="rightColumn">

    <div class="header1">Recent Cinematica Updates</div>

    Not yet available

    </div> <!-- End maininfoCinematica -->

    <div id="bottombanner">

    </div> <!-- End bottombanner -->

    </div> <!-- End mainInfo -->


    </div> <!-- End mainBody -->

    </body>
    </html>
     
    Maarten, Feb 4, 2008
    #1
    1. Advertising

  2. Maarten

    Ben C Guest

    On 2008-02-04, Maarten <> wrote:
    > Hi,
    >
    > Recently I restarted some project I began quite some time ago and now I
    > am running into some difficulties, for me that is. What I have is one
    ><div> section with a limited width in which al the data is being put and
    > is centered in the middle. The background colour of the body is one
    > colour and the <div> section is another. Somehow, when I assign a colour
    > to the <div> that colour is used only for some text which is used right
    > at the beginning but all the other elements within the <div> have the
    > background colour of the <body>, in Firefox that is because in Internet
    > Explorer this aspect is working fine. Now this is a little trick which
    > is being used in quite a few websites these days and when I take one of
    > them, such as webwereld.nl I can edit it and change the background
    > colour for the centered <div> section without too much problems,
    > however, I can't figure out why this isn't working in my own page (I
    > tried to use the same techniques for positioning the sections etc)
    >
    > Can somebody please take a look and tell me what I am doing wrong. I
    > have put a simplified page at the bottom of this email and I have put it
    > online at: http://home.planet.nl/~koster7/
    >
    > I hope I have made it a bit clear what the problem is, though it should
    > be apparent taking a look at it in both FF and IE. Also do I hope the
    > html is a bit readable.


    You can fix it with overflow: hidden on #maininfo.

    See http://netweaver.com.au/floatHouse/index.html, especially pages 3
    and 8.
     
    Ben C, Feb 4, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luigi Donatello Asero

    <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    31
    Views:
    1,209
    Toby Inkster
    May 7, 2006
  2. Luigi Donatello Asero

    Re: <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    0
    Views:
    405
    Luigi Donatello Asero
    May 6, 2006
  3. Luigi Donatello Asero

    Re: <div class="position"> and <div class" section">

    Luigi Donatello Asero, May 6, 2006, in forum: HTML
    Replies:
    1
    Views:
    429
    Luigi Donatello Asero
    May 6, 2006
  4. Luigi Donatello Asero
    Replies:
    4
    Views:
    2,102
    Luigi Donatello Asero
    May 22, 2006
  5. Replies:
    3
    Views:
    1,481
Loading...

Share This Page