Hi, I am fairly new to CSS and I wanted to know how can achieve this:
I am writing a page that will display a form in the middle (Represented by the black box). I want it to have white background that will overlap the body background (represented by the red lines).
Check out this site for the example image. (Sorry I couldn't post it inline)
http://www.freeimagehosting.net/uploads/bf2d71f238.png
Thank you very much!
Go read a book like 'CSS Mastery'. Once you know some basics and can explain what you tried and have a basis for asking a question in the first place, then ask for help.
You can give your elements a few styles, background can be color, images, etc.
CSS:
body { /* Red Lines Here */
background: #990000;
}
#outer { /* White box Here */
background: #ffffff; /* White */
width: 900px; /* Total width will be 1000px once you include padding */
padding: 50px; /* White border around black box, this is padding on all sides */
margin: 0 auto; /* Centering it */
}
#inner { /*Black Box Here */
background: #000000; /* Black */
color: #ffffff; /* White Text so you can see it */
}
Html:
<html>
<head>
<title>My Page! Step off!</title>
</head>
<body>
<div id="outer">
<div id="inner">
Content!
</div>
</div>
</body>
</html>