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">
</a>
</div>
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;
}
