HTML and CSS Reference
In-Depth Information
Putting the coupon on the page
Now we're going to get the Free Coffee Coupon on the page.
Let's start by creating a <div> for the coupon to go into:
Here's the <div> with an id of “coupo n”.
<div id="coupon">
<a href="freecoffee.html" title="Click here to get your free coffee">
<img src="images/ticket.gif" alt="Starbuzz coupon ticket">
And we've wra pped the image in a n <a> element so tha t users can click
on the image to be taken to a pa ge with a coupon the y can print.
Go ahead and add this <div> at the bottom of your “index.html” file, just
above the footer. Because we're going to position it, the placement in the
HTML will only matter to browsers that don't support positioning, and the
coupon isn't important enough to have at the top.
Now let's write the CSS to position the coupon:
We're setting th e coupon t o fixed p ositioning, 350
#coupon {
position: fixed;
top: 350px;
left: 0px;
pixels from the top of th e viewport , and let' s put the
left s ide right u p against the edge of the vie wport. So
we nee d to speci fy 0 pixe ls from th e left.
#coupon a, img {
border: none;
Search WWH ::

Custom Search