Web Design with HTML and CSS

Working with CSS background images

Lesson 8, Advanced CSS Layout 191

2 Add the following code (highlighted in red) around the heading 1:

<div id="splash">

<h1>SmoothieWorld is your #1 destination for smoothie recipes.</h1>

</div>

Add a new style rule for this ID, as shown below.

3 Open the base.css external style sheet, scroll to the bottom, and add the following:

#splash {

position:absolute;

width:290px;

height:230px;

top:0px;

left:0px;

}

Absolute positioning allows you to defi ne the width and height of the div (as you did

earlier), and then it allows you to move this box along a set of coordinates (in this case,

a top value of 0 pixels and a left value of 0 pixels). Note that the default coordinates of

0 top and 0 left are defi ned as the top-left corner of the page.

Save the fi le and preview it in your browser.

Your heading is absolutely positioned, but it is incorrectly using the

entire page as a reference.

Recall that you nested the splash div inside the maincontent div, but this box appears

in the top-left corner of the entire page. This is because absolutely positioned items are

positioned independently of their containers by default, but you can change the position

so it appears relative to the container.