PDA

View Full Version : CSS Containers?

wes4276
06-07-2006, 02:37 AM
can anybody give me the CSS code for making containers? I am trying to make a backgroun "block" of a solid color over my first background, where all of my text will go over. Can I do this with Containers? Is there any other easier way to do this with CSS? I don't want to do it with HTML Tables.
theone3
06-07-2006, 03:24 AM
Put this before </head>

<style type="text/css">
body {border:10px solid #BEEF11; margin:0px; padding:20px; background-color:#FEEB1E}
</style>

Rather than putting a CSS box in the middle, this draws a border around the edge of the page. Is that the effect you were looking for?
Arbitrator
06-07-2006, 03:47 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en">
<head>

<meta http-equiv="content-type" content="text/html; charset = utf-8"/>

<title>Webpage</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #222;
}
#container {
width: 80%;
margin: 0 auto;
background: #bbb;
color: #fff;
font: 12px Verdana, Geneva, sans-serif;
}
</style>

</head>
<body>
<div id="container">

This is a sentence of filler text.

</div>
</body>
</html>
ronaldb66
06-07-2006, 08:17 AM
You don't "make" containers with CSS; "container" is a general term used for elements, usually block level ones, that "contain" other elements or serve as a "wrapper" to be able to control styles for that section and group certain parts of a document logically and/or visually.

Any container element can serve as a "container", but for logically dividing a document in sections and for general wrappers, divs are the favourite choice.

Arbitrator gave an example of how a div can serve as a container for the rest of the content and sit atop the regular body background.
wes4276
06-07-2006, 08:29 PM
That code above for the container worked good, but I have one problem I can't figure out....when I make my container, it awlays shows up at the very top of the page...how can I make it start lower on the page, so the margin is even all the way around?
Arbitrator
06-08-2006, 01:56 AM
* {margin: 0; padding: 0;} removes all default margins and padding from all elements including from the body element (margins and padding on this element create what are known as the page margins/padding).

With that style rule in place, you need to add page margins literally if you want them. Example: body {margin: 10px; background: #222;}.