Web Design with HTML and CSS

192

Working with CSS background images

Web Design with HTML and CSS Digital Classroom

4 Locate the maincontent rule in your base.css style sheet. Add the following property

and value (highlighted in red) at the top of your list of rules:

#maincontent {

position:relative;

width:600px;

fl oat:right;

/*background-color:#ADA446; */

}

Save the fi le and then preview it in your browser. Although not positioned exactly where you

need it, the splash div is now positioned in the top-left corner of the maincontent div.

By setting a position:relative property on the maincontent div, your heading is using this div as a reference.

Setting this div to position:relative instructs the absolutely positioned splash

div to use the top-left corner of the maincontent div, not the top-left corner of the

page. To position the box exactly where you want it, you can change the top and left

coordinates.

5 Modify the top and left values as follows (highlighted in red):

#splash {

position:absolute;

width:290px;

height:230px;

top: 35 px;

left: 35 px;

}