HTML and CSS Reference
In-Depth Information
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
Line
Code
160
<div id=”trailImg1” class=”captionText”>
161
Hickory Oaks closes early on Christmas Eve and is closed Christmas Day,
Thanksgiving Day, and Easter Sunday.
162
</div>
163
<div id=”trailImg2” class=”captionText”>
164
A wide variety of bees and wasps frequent our flower gardens This bumble
bee is one example.
165
</div>
166
<div id=”trailImg3” class=”captionText”>
167
Butterflies often visit our gardens, you'll see Monarch, Hoary Edges, and
swallowtails of all varieties.
168
</div>
169
<div id=”trailImg4” class=”captionText”>
170
Baby rabbits are called kits. As many as 12 can be in a litter.
171
</div>
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.
1
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
(Figure 11-37).
do not press
e n t e r
key
Figure 11-37
