Your Electronic Books

Add a link and pop-up content. Surround the image with a dummy link, and then
add a span element immediately after the image. Within this, place the pop-up
content, which can contain text and even other images. Text can be styled within
inline elements (strong, em, and anchors, for example). In this example, the span
contains an image, which will be floated right, and some text (which is truncated
for space reasons??”the completed version in the download files is longer). To
ensure that the floated image is ???cleared,??? making the span??™s background appear
behind it once styled, a clearFix class is added to the span start tag, and an associated
CSS rule created (in step 10). More on this float-clearing technique, along
with floats and clears in general, is given in Chapter 7.
?? width="500" height="375" />?? src="add-a-pop-up-pop-up.jpg" alt="Winter shot" width="126"
?? height="215" />
The text for the pop-up goes here??¦
4. Set defaults. At this stage, the page content is displayed in a linear fashion??”large
image followed by small image followed by text??”so some CSS is now needed. In
the CSS document, add some padding to the existing body element, ensuring the
page content doesn??™t hug the browser window edges when you??™re testing the page.
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
5.


Pages:
239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263