Forum Moderators: not2easy
I would like the background behind a centered webpage to be a different color than the page itself. In my CSS I have the body's background color set to bloack and the container div's background set to white. But what I get is a black page, with what look like transparent divs. Here is the relevent code.
CSS
body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
margin: 0;
text-align: center;
}
#container {
position: relative;
width: 695px;
background-color: #FFFFFF;
color: #000000;
text-align: center;
margin: 0 auto 0;
}
HTML
<body>
<div id="container">
<div id="header"><img src="header.gif"/></div>
<div id="nav"><p>Nav Bar</p></div>
<div id="content"><p>Content</p></div>
<div id="footer"><p>Webmaster Email</p></div>
</div>
</body>
<!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" xml:lang="en">
<head>
<title>
</title>
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index,follow" />
<meta name="language" content="english" />
<meta name="keywords" content="" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="" />
<meta name="" />
<meta name="verify-v1" content="" />
<style type="text/css" media="screen" />
body {
background-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
margin: 0;
text-align: center;
}#container {
position: relative;
width: 695px;
background-color: #fff;
color: #000;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<!--##########
I would like the background behind a centered webpage to be a different color than the page itself. In my CSS I have the body's background color set to black and the container <div> background set to white. But what I get is a black page, with what look like transparent divs. Here is the relevant code.
-->
<div id="container">
<div id="header"><img src="aaa.jpg"/></div>
<div id="nav"><p>Nav Bar</p></div>
<div id="content"><p>Content</p></div>
<div id="footer"><p>Webmaster Email</p></div>
</div>
</body>
</html>
margin: 0 auto 0; /**********shorthand is two values, full declaration is 4 values. Though I don't see any negative effect, I would be leery of citing only top, right, bottom with that auto declared. It is a valid declaration however. - 0 auto 0 auto*/
W3C - Margin Properties [w3.org]
To clarify what is being rendered when I load the page: The whole background is black, as if the div backgrounds were set to transparent, instead of white.
PAGE
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<html>
<body>
<div id="container">
<div id="header"><img src="header.gif"/></div>
<div id="nav"><p>Nav Bar</p></div>
<div id="content"><p>Content</p></div>
<div id="footer"><p>Webmaster Email</p></div>
</div>
</body>
</html>
RESET.CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px 0px 15px;
border: 0;
padding: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
STYLE.CSS
a {
color: #000000;
text-decoration: none
}
a:hover {
text-decoration: underline
}
body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
margin: 0;
text-align: center;
}
#container {
position: relative;
width: 695px;
background-color: #FFFFFF;
color: #000000;
text-align: center;
margin: 0 auto 0;
}
#header {
position: absolute;
top: 10px;
height: 115px;
width: 695px;
overflow: hidden;
}
#nav {
position: absolute;
top: 125px;
background-color: #00CCFF;
height: 40px;
width: 695px;
padding-top: 12px;
color: #000000;
font-size: 20px;
font-weight: bold;
text-align: center;
}
#content {
position: absolute;
top: 200px;
height: auto;
width: 695px;
text-align: left;
}
#sidebar {
position: absolute;
background-color: #CCFF99;
height: 400px;
width: 200px;
font-weight: bold;
text-align: center;
}
#main {
position: absolute;
left: 215px;
height: 600px;
width: 480px;
}
h1 {
font-size: 25px;
font-weight: bold;
text-align: center;
}
#contact {
position: absolute;
height: 25px;
width: 695px;
}
#pic1 {
position: absolute;
top: 50px;
height: 200px;
width: 67px;
}
#bio1 {
position: absolute;
top: 50px;
left: 82px;
height: 200px;
width: 613px;
}
#pic2 {
position: absolute;
top: 300px;
height: 200px;
width: 67px;
}
#bio2 {
position: absolute;
top: 300px;
left: 82px;
height: 200px;
width: 613px;
}
#pic3 {
position: absolute;
top: 500px;
height: 200px;
width: 67px;
}
#bio3 {
position: absolute;
top: 500px;
left: 82px;
height: 200px;
width: 613px;
}
#pic4 {
position: absolute;
top: 725px;
height: 200px;
width: 67px;
}
#bio4 {
position: absolute;
top: 725px;
left: 82px;
height: 200px;
width: 613px;
}
#pic5 {
position: absolute;
top: 950px;
height: 200px;
width: 67px;
}
#bio5 {
position: absolute;
top: 950px;
left: 82px;
height: 200px;
width: 613px;
}
#contact2 {
position: absolute;
top: 1175px;
height: 25px;
width: 695px;
}
#pic6 {
position: absolute;
top: 1225px;
height: 350px;
width: 67px;
}
#bio6 {
position: absolute;
top: 1225px;
left: 82px;
height: 350px;
width: 613px;
}
#pic7 {
position: absolute;
top: 1600px;
height: 200px;
width: 67px;
}
#bio7 {
position: absolute;
top: 1600px;
left: 82px;
height: 200px;
width: 613px;
}
#footer {
position: absolute;
top: 1150px;
height: 40px;
width: 695px;
font-size: 10px;
text-align: center;
}
#footer-cont {
position: absolute;
top: 3000px;
height: 40px;
width: 695px;
font-size: 10px;
text-align: center;
}
#footer-how {
position: absolute;
top: 2400px;
height: 40px;
width: 695px;
font-size: 10px;
text-align: center;
}
Interestingly, the sidebar div is the only one actually picking up the background color.
I organized the code and in the process noted a few things you'll want to look at.
1) ALWAYS start commenting code blocks in and out to help identify where the design is breaking.
2) The problem is definitely in all of this extra CSS and the problem is more than just the white background in #container. IE may need some work on to center the design.
3) Add height: 1300px; to #container and that will solve the problem of the white background in FF, Opera, and IE.
However, IE6 (my boxes with IE7 and IE8 are running long scans, so can't say what is going on there until tomorrow) is breaking the design hard to the right!
4) This height fix is probably required to manage the tremendous amount of absolute positioning in this code.
5) To further establish that the absolute positioning needs a hard look, comment out the height: line and comment out /*postion: absolute;*/ in #header, #nav, #content, and #footer - BAM. IE6 pops to the center, and the white background behaves in the most current versions of FF, and Opera.
6) So - You've got to do some testing and make some decisions regarding height on #content, and all of that absolute positioning better be perfect, or you will have more problems than you need.
7) Will actually adding content to the page blow up #content without a declared height? If you work with the absolute positioning with the code provided, #content has no height issues. Add content, and that may return.
8) At any rate, there is plenty here for you to see the problem, test and confirm two approaches to a fix, and be aware that a combination of the two may be required.
9) Sorry about the IE6, but I've always got something time consuming running on one or more boxes, and at night, when I usually have time for this kind of thing, is also the only available time to tie up equipment.
10) The defaults for these tags are not required by W3C recommendations; but FF, Opera, and IE all line-through; for <del>. The usage here of <ins> would not be considered optimal. The recommendation is that edited inserts be 'obvious'. Removing the usual underline; makes the use of <ins> pointless in the code provided.
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
Also a full doctype would do wonders to keep browsers out of quircksmode.
Validate your html and CSS!
