HTML and CSS Reference
In-Depth Information
Adding the award
Notice that the award is sitting in a position that overlaps both the header
and the main part of the page. It would be pretty tricky to get a floated
image into this position. Not only that, but we know the award shouldn't
affect the flow of any other elements in the page.
This sounds like a job for absolute positioning. After all, by using absolute
positioning you can place it anywhere you want on the page, and since it
isn't in the flow it won't affect any other element on the page. Seems like an
easy addition to make to the page without disrupting what's already there.
Let's give it a try. Start by adding a new
<div>
, just below the header (the
CEO thinks this is pretty important, so it should be up high in the order of
content). Here's the
<div>
:
<div id="award">
<img src="images/award.gif"
alt="Roaster of the Year award">
</div>
Positioning the award
We want the award to sit just about in the middle of the page when
the browser's open to 800 pixels (a typical size for browser widths) and
just overlapping the main content
<div>
.
So we're going to use the
top
and
left
properties to position the
award 30 pixels from the top, and 365 pixels from the left.
We
're using
an abs
olute p
osition
#award {
position: absolute;
top: 30px;
left: 365px;
}
for
the aw
ard <d
iv> tha
t is 30
pix
els from
the t
op and
365
pix
els from
the le
ft.
Add this CSS to your “starbuzz.css” file, save, and reload the web page.
You'll see the award image appear like magic, right where we want it.
Make sure you resize the browser to see how the award displays.
