For example, expanding on the previous example, you could add the following rules to
ensure that the surrounding body copy doesn??™t hug the image:
.photo {
border-width: 8px 8px 20px 8px;
border-style: solid;
border-color: #ffffff;
float: right;
margin-left: 20px;
margin-bottom: 20px;
}
Note that when you??™ve used a contextual selector with an id value to style a bunch of
elements in context, overriding this often requires the contextual selector to again be
included in the override rule. In other words, a class value of .override would not
necessarily override values set in #box img, even if applied to an image in the box div.
In such cases, you??™d need to add the id to the selector: #box .override.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
138
This results in the following effect shown in the following image.
See using-css-to-wrap-around-images.html, using-css-to-wrap-around-images.css,
and sunset.jpg in the chapter 4 folder for a working example of this page.
Displaying random images
This final section of the chapter looks at creating a simple system for displaying a random
image from a selection. This has several potential uses, such as randomizing banners on a
commercial website, or giving the impression that a site is updated more often than it is by
showing visitors some new content each time they arrive. Also, for portfolios, it??™s useful to
present a random piece of work from a selection.
Prior to starting work, you need to prepare your images.
Pages:
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223