HTML and CSS Reference
Entering the <div> Tags Containing Pop-up Caption Text
The text that appears in each of the four pop-up captions on the Trails Web page
is enclosed in <div> tags. The <div> tags use the id and class attributes to associate the
pop-up captions with the embedded style sheet declarations that control the appearance
of the text in the caption. Table 11-20 shows the HTML code used to enter the <div> tags
that define the caption text.
Table 11-20 Code for <div> Tags Containing captionText Text
<div id=”trailImg1” class=”captionText”>
Hickory Oaks closes early on Christmas Eve and is closed Christmas Day,
Thanksgiving Day, and Easter Sunday.
<div id=”trailImg2” class=”captionText”>
A wide variety of bees and wasps frequent our flower gardens This bumble
bee is one example.
<div id=”trailImg3” class=”captionText”>
Butterflies often visit our gardens, you'll see Monarch, Hoary Edges, and
swallowtails of all varieties.
<div id=”trailImg4” class=”captionText”>
Baby rabbits are called kits. As many as 12 can be in a litter.
Line 160 is the <div> tag with the trailImg1 id selector and captionText class
selector. Line 161 contains the text for the pop-up text when the mouse is over the 362
link. Line 163 is the <div> tag for the trailImg2 id selector and captionText class selector.
Line 164 is the pop-up text for the bees link. Line 166 is the <div> tag with the trailImg3 id
selector and captionText class selector. Line 167 is the text for the butterfly link. Line 169
is the <div> tag with the trailImg4 id selector and captionText class selector. Line 170 is the
text for the baby bunnies link. Lines 162, 165, 168, and 171 close the <div> tags.
To Enter <div> Tags Containing Pop-up Caption Text
The following step enters the <div> tags containing the pop-up caption text.
each <div> tag id and class
relates text to selectors in
CSS for display
Click line 160,
between the closing
</div> tag and the
closing </body> tag.
Enter the code
shown in Table 11-20
to create <div>
containers for the
pop-up caption text.
Do not press e n t e r
after the </div>
tag on the last line
do not press
e n t e r key