FIGURE 4.28 Here are all the elements
we need to create the thumbnail
area and its associated pop-up.
Let??™s do some basic styling on this markup (Figure 4.29).
div {width:92px; border:2px solid #069; padding:5px;}
h2, p {font-size:.7em; font-family:Arial, sans-serif;
margin:0;}
p {width:80px; border:1px solid gray; padding:.3em;
background-color:#FFD;}
FIGURE 4.29 The ?¬? rst step is to style
the appearance and widths of the
elements.
STYLIN??™ WITH CSS - CHAPTER 4 130
We??™ve added a border to the containing div and some padding to
keep the contents away from the edge (increasing its stated width,
of course!). Now the div is 106 pixels wide (92 + 2 + 2 + 5 + 5 = 106).
We??™ve also set the font for h2 and paragraph and removed the default
margins from both.
We have created a similar box with padding around the paragraph.
This is going to be our pop-up??”it??™s just not positioned or
popping yet.
Now the fun begins. We are going to take the paragraph out of the
document ?¬‚ ow by changing its display setting to absolute. At the
same time, we will set the div??™s display property to relative so that it
becomes the positioning context for the absolutely-positioned paragraph.
Remember, this relatively-positioned context element must
be an ancestor of the absolutely-positioned element. In this case, the
div is the parent of the paragraph, so we??™re ?¬? ne (Figure 4.
Pages:
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174