ptg16476052300 LESSON 11: Using CSS to Position Elements on the Page
That’s looking much better. As you can see, the links are now positioned correctly, in the
upper corners of the image. The final step is to resize the links so that they both consume
20% of the width of the image and run the entire height of the image. Here’s the updated
style:
#picture a {
position: absolute;
border: 3px double #333;
padding: 1em;
height: 337px;
width: 20%;
}When this style is applied, the links take up the full left and right sides of the image. The
links could be more attractive, but this demonstrates how you can create links that over-
lay images. When you resize links, the entire link remains clickable, which enables you
to create large clickable regions, as I did in this example. The final image is shown in
Figure 11 .8.FIGURE 11.7
Links positioned in
the upper left and
right corners.