Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Background color <div> not within entire section

Reply
Thread Tools

Background color <div> not within entire section

 
 
Maarten
Guest
Posts: n/a
 
      02-04-2008
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>
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      02-04-2008
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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
section with in a section config file and reading that config file kampy Python 9 10-19-2012 10:59 PM
rounded corners in which my border color is different than the background color laredotornado@zipmail.com Javascript 1 02-14-2007 07:37 AM
Dynamic updating of background-color within table cells Craig Taylor HTML 1 12-07-2006 08:51 PM
Problem with setting background color alternating item in datalist to a certain color fig000 ASP .Net Web Controls 0 09-06-2004 06:51 PM



Advertisments