Placing Introductory Images

Introductory images are most typically seen on designers’ weblogs but these images are a fun way for anyone to introduce a post.
As the name suggests, introductory images appear at the beginning of the text. However,
you can give them a lot more impact by playing around with their placement via the
manipulation of their borders and padding values.
Using Borders and Padding
Let’s work through an example, which you can see in Figure 2.16, that uses borders and
padding to extend an image beyond the width of the page content. This approach makes
the layout a little more interesting, and makes the image seem more deliberate—it doesn’t
seem as if it’s just been “placed” there.It’s very easy to create this look. We start with the proper markup—simply replace the text
and images used here with the content that you want:

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



/>

The “Cat Vase” that won’t go away.

Published on Saturday, September 23, 2006, at 4:00pm
by

I remember the day that my grandmother told me what she
was giving me in her will. She pointed to the vase in
the corner. This vase always intrigued me, in all its
elegance and gaudiness. But I certainly did not wish to
own it.

It is a big white vase painted with large pink, yellow,
and purple flowers, butterflies, and ornamentation
around the top. All the line work was painted in glossy,
shiny gold. And all around the vase were
three-dimensional figurines of cats attached on to it,
so it would look like they were climbing the vase.
The cats are cute, white, with gold-trimmed ears and
tails.

Don’t get me wrong. I love cats. But I was never one
to collect memorabilia.

Years went by and I never put another thought to the vase.
Then the day came that my father showed up to visit.
He was holding the vase.

"Grandma told me to give this to you," he said
with a smirk on his face.

"She did? But that was part of her will... Why is she
giving it to me now?"

"Guess she wanted to get rid of it."

I reluctantly received the vase. I kept it in the closet
of my old bedroom I had when I lived with my boyfriend
at the time. After I moved out into my own apartment,
I didn’t think much of it again. About a year went by,
and I was moving once again to a nicer apartment. My
ex-boyfriend began bringing things that I had left at
his house. I didn’t realize how much I had left over
there.

Then the day came that Michael showed up at the door.
He was holding the vase, in a much similar style that
my father had done, with the same smirk.

I don’t know what to do with it. My grandmother told
me she paid $200 for it, so I don’t want to just get
rid of it. It’s definitely not my style, and certainly
doesn’t match anything in my home. But at the same time,
it’s almost too funny to get rid of. I mean, how often
do you see a vase this ornamental and bizarre?

I’ve considered maybe putting it on eBay but I think I
might hold on to it just for a little while longer.
It’s certainly photogenic.

Contextual Images

Contextual images usually appear in news articles or weblog entries, where they provide
additional visual information or help to illustrate the content. Sometimes they’re used
in a masthead-like manner to introduce the content. Other times, contextual images may
be embedded throughout the content, the text wrapping around them. They may also be
accompanied by a descriptive caption.
This section shows some of the interesting ways in which contextual images can be
displayed, and provides the markup necessary to achieve these effects

Styling the Album Page

We’re almost done! We just need to style the h2s and the thumbnails. Here, the h2 is styled to
look and behave similarly to the images, with the same hover effects. We add clear: left; to
the h2 to ensure that each new album clears the floated thumbnail of the album that precedes
it:
h2 {
margin: 0 0 5px 0;
font-weight: normal;
font-size: 1.5em;
text-align: left;
clear: left;
}
h2 a:link, h2 a {
display: block;
padding: 0 5px;
border: 1px solid #ccc;
border-top-color: #eee;
border-right-color: #ddd;
border-bottom-color: #bbb;
}
h2 a:hover {
border-color: #ccc;
background-color: #eee;
}
Finally, we’ll style the thumbnails to appear like those in Figure 2.14, which share some
styles with ul.thumbnails.
p.thumb, ul.thumbnails {
margin: 0 0 10px 0;
padding: 0;
float: left;
text-align: center;
background-color: #fff;
line-height: 1em;
list-style: none;
}
p.photo a, p.thumb a, ul.thumbnails a {
display: block;
float: left;
margin: 0;
padding: 4px 4px 9px 4px;
border: 1px solid #ccc;
border-top-color: #eee;
border-right-color: #ddd;
border-bottom-color: #bbb;
background-color: #fff;
text-align: center;
}
p.thumb a, ul.thumbnails a {
width: 80px;
margin-right: 10px;
margin-bottom: 10px;
}
p.photo a:hover, p.thumb a:hover, ul.thumbnails a:hover {
border: 1px solid #ccc;
background-color: #eee;
}
Here’s what the final style sheet should look like; it can be used on all three pages:
gallery.css
body {
margin: 0;
padding: 0;
background-color: #fff;
font: 62.5%/1.75em “Times New Roman", serif;
color: #4d4d4d;
}
a:link, a {
border-bottom:1px dotted #960;
color: #960;
text-decoration: none;
}
a:hover {
border-bottom:1px solid #960;
}
h1 {
margin: 05 6px;
padding: 0 0 .5em 0;
font-style: italic;
font-weight: normal;
font-size: 1.25em;
line-height: 2.375em;
color: #ccc;
}
h1 em {
color: #4d4d4d;
}
h1 a:link, h1 a, h1 a:hover, h1 a em, h1 a:link em,
h1 a:hover em {
border-color: #999;
color: #999;
}
h2 {
margin: 0 0 5px 0;
font-weight: normal;
font-size: 1.5em;
text-align: left;
clear: left;
}
h2 a:link, h2 a {
display: block;
padding: 0 5px;
border: 1px solid #ccc;
border-top-color: #eee;
border-right-color: #ddd;
border-bottom-color: #bbb;
}
h2 a:hover {
border-color: #ccc;
background-color: #eee;
}
p, ul {
margin: 0 6px;
padding: 0;
}
img {
display: block;
margin: 0 auto 5px auto;
border:1px solid #ccc;
border-bottom-color: #eee;
border-left-color: #ddd;
border-top-color: #bbb;
}
br {
display: none;
}
#content {
margin: 0 auto 20px 20px;
padding: 1em 0 0 0;
width: 512px;
background-color: #fff;
font-size: 1.25em;
line-height: 1.75em;
p.photo {
margin: 0 0 10px 0;
float: left;
width: 75%;
text-align: center;
background-color: #fff;
line-height: 1em;
}
ul.navigation {
margin: 0 0 10px 0;
padding: 0;
float: left;
text-align: center;
background-color: #fff;
line-height: 1em;
list-style: none;
position: absolute;
top: 76px;
left: 550px;
}
p.thumb, ul.thumbnails {
margin: 0 0 10px 0;
padding: 0;
float: left;
text-align: center;
background-color: #fff;
line-height: 1em;
list-style: none;
}
ul.thumbnails li, ul.navigation li {
display: inline;
margin: 0;
padding: 0;
}
ul.navigation a {
display: block;
float: left;
margin: 0 10px 10px 0;
padding: 4px 4px 6px 4px;
border: 0;
background-color: #fff;
text-align: center;
width: 80px;
}
p.photo a, p.thumb a, ul.thumbnails a {
display: block;
float: left;
margin: 0;
padding: 4px 4px 9px 4px;
border: 1px solid #ccc;
border-top-color: #eee;
border-right-color: #ddd;
border-bottom-color: #bbb;
background-color: #fff;
text-align: center;
}
p.thumb a, ul.thumbnails a {
width: 80px;
margin-right: 10px;
margin-bottom: 10px;
}
ul.navigation a:hover {
background-color: #eee;
border: 0;
}
p.photo a:hover, p.thumb a:hover, ul.thumbnails a:hover {
border: 1px solid #ccc;
background-color: #eee;
}
p.description {
clear: left;
}
We’ve finished marking up and styling our experimental image page, thumbnails, and
album list, and we have a clean, simple image gallery! At the end of this chapter, in Further
Resources, you’ll find a list of some great examples of online image galleries, along with a
couple of gallery and photo album resources.

Looking at an Example

Once again, the basic groundwork has already been done. Here’s the markup:
albums.html
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
lang="en">

Photos

Firenze, Italia 2006

259
Photos

Living in Firenze, Italia {Florence, Italy} for
one month. This is the highlight of my life.

Boston, Massachusetts 2006

38 Photos

From my business trip to Boston {May 2006} when Vineet
& I were working on Mass.gov.

Barcelona, España 2006

src="images/thumb27.jpg" />
110 Photos

My first venture into Europe & a wonderful week of
great food, art, architecture, & culture.

• « Previous 3 Sets


• Next 3 Sets »

Obviously, the number of albums displayed on the page can vary, but I suggest you keep
the number under ten to prevent visual clutter. In the example shown in Figure 2.13, we’ve
used three. We’ve applied a class of thumb to the paragraph holding the thumbnail image.
The total number of photos in each album appears underneath that album’s thumbnail
image, similar to the display of the pagination thumbnails used on the image page. An h2
has been added to hold the album titles, and a paragraph is used for the descriptions.

Styling the Thumbnails

To produce the display shown in Figure 2.11, we now need to add the following styles for
thumbnails:
gallery.css (excerpt)
ul.thumbnails {
margin: 0 0 10px 0;
padding: 0;
float: left;
text-align: center;
background-color: #fff;
line-height: 1em;
list-style: none;
}
These styles are the same as those we used for navigation, except that we’re not positioning
this unordered list. We also want to style the list items in exactly the same way as we did
for the navigation list items. The results of this markup

ul.thumbnails li, ul.navigation li {
display: inline;
margin: 0;
padding: 0;
}
Finally, let’s style the navigation. As we’re not using a thumbnail image, we can use a
slightly different style in this case:
gallery.css (excerpt)
ul.navigation a {
display: block;
float: left;
margin: 0 10px 10px 0;
padding: 4px 4px 6px 4px;
border: 0;
background-color: #fff;
text-align: center;
width: 80px;
}
ul.navigation a:hover {
background-color: #eee;
border: 0;
}

Creating a Thumbnails Page

We’ll create a typical thumbnails page—a display of small images, each of which links to
its respective image page. Actually, since we’ve already created the look and feel of the
image page, most of the groundwork is completed. The markup for our thumbnails page
looks like this:
thumbnails.html
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
lang="en">

Photos » Album: Firenze,
Italia 2006

• src="images/thumb1.jpg" />


• src="images/thumb2.jpg" />


• src="images/thumb3.jpg" />


• src="images/thumb4.jpg" />


• src="images/thumb5.jpg" />


• src="images/thumb6.jpg" />


• src="images/thumb7.jpg" />


• src="images/thumb8.jpg" />


• src="images/thumb9.jpg" />


• src="images/thumb10.jpg" />


• src="images/thumb11.jpg" />


• src="images/thumb12.jpg" />


• src="images/thumb13.jpg" />


• src="images/thumb14.jpg" />


• src="images/thumb15.jpg" />


• src="images/thumb16.jpg" />


• src="images/thumb17.jpg" />


• src="images/thumb18.jpg" />


• src="images/thumb19.jpg" />


• src="images/thumb20.jpg" />


• src="images/thumb21.jpg" />


• src="images/thumb22.jpg" />


• src="images/thumb23.jpg" />


• src="images/thumb24.jpg" />


• src="images/thumb25.jpg" />

• « Previous


• Next »

You’ll notice that this markup is very similar to the image page’s markup, except the h1 is
different, and the description area has been removed. We’ve created an unordered list to
contain the thumbnails; it utilizes the class of thumbnails that we used previously on the
navigation for the photo page.
The number of thumbnails displayed on this page can be varied to suit your preferences.
I’ve chosen to display 25, as the layout is wide enough to accommodate five thumbnails
per row and per column, which echoes the 1:1 proportions of the thumbnails themselves.
A little aesthetically pleasing balance is never a bad thing!
The pagination-style navigation is very similar to the navigation on our single image page,
but the class of thumbnails was removed, since these links don’t contain thumbnail images
and don’t need to be styled as such. At the moment,

Producing a Quick and Simple Layout

Now, we want to define the spacing and width of the div that contains all the elements
of our page. We’ll also increase the font size for items within this div, to create the effect
shown in Figure 2.6. By adding the code at this point, instead of at the body level, we
ensure that relative padding and margin sizes are affected only within this div: #content {
margin: 0 auto 20px 20px;
padding: 1em 0 0 0;
width: 512px;
background-color:#fff;
font-size: 1.25em;
line-height: 1.75em;
}
Because the images we’re using are no wider than 500px, and we want to have room for the
border around each image, we’ll use a width of 512px for #content. You can vary this value
to reflect the maximum width of your images. I recommend setting a maximum of 500px to
ensure that the entire image will fit within most browser viewports. Just make sure that the
width of #content is equal to the total width of the image plus any left or right padding and
border properties.
We’re almost done!