• Locked
1 reply [Last post]
Fri, 2014-03-28 17:57
AAB
AAB's picture
Offline
newbie
Last seen: 6 years 9 weeks ago
Timezone: GMT-4
Joined: 2014-03-28
Posts: 1
Points: 2

I am expecting #background color to extend the full width of the browser but its not. #header1 with margin: 0 auto; and fixed width: 820px; is centered. HELP!

CSS:
body {
margin-top: 0;
margin-right: 10%;
margin-left: 10%;
}

#header1 {
margin: 0 auto;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: #333333;
font-family: "Century Gothic", Century Gothic;
width: 820px;
font-size: 40;
color: #000033;
}

#background {
width: 100%;
background-color: #333333;
}

HTML:

<body>
 
<div id="background"><div id="header1">TEST<font size="4">Blah Blah content</font></div></div>

Top
Tags:
Fri, 2014-03-28 23:08
#1
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 7 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9759
Points: 3841

Margin on body

Set the body's margin to zero, and put the background on body.

body {
  background-color: #333;
  color: white;  /*If you specify color or background, specify the other*/
  font: normal 100%/1.25 Century Gothic sans-serif;
  margin: 0;
  }
 
p {
  font-size: 1em;
  }
 
h1 {
  background-color: #333;
  color: #003;  /*this is a bad choice, dark green against a dark gray*/
  margin: .67em auto;  /*.67em is the default top and bottom margins for h1*/
  width: 820px;
  }

There is no purpose in div#header1. Use the proper heading tag, e.g. <h1>.

The <font> tag has not been valid since 1997. Don't use it.

Div#background serves no purpose.

Here is a proper markup:

<body>
  <h1>TEST</h1>
 
  <p>Blah Blah content</p>
</body>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked