Tuesday, October 5, 2010

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">



/>
Introductory Images


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


Published on Saturday, September 23, 2006, at 4:00pm
by
The Cat
<br />Vase

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.





The content and image are contained within a div with a class of content, and we’ve
applied a class of intro to the image. The result is shown in Figure 2.17.

Now, we’ll style the page’s typography, and apply the colors for its background, border, and
font. These styles are merely applied for the sake of the page design, and are not required
by the introductory image itself:
intro

body {
margin: 0;
padding: 0;
background-color: #fff;
font: 62.5%/1.75em “Trebuchet MS", Verdana, sans-serif;
text-align: center;
color: #4d4d4d;
}
#content {
margin: 0 auto;
padding: 1em 0;
width: 500px;
background-color:#fff;
font-size: 1.125em;
line-height: 1.75em;
text-align: left;
}
a:link, a {
border-bottom:1px dotted #960;
color: #960;
text-decoration: none;
}
h1 {
margin: 0;
padding: 0;
border-bottom: 3px solid #eee;
font: 2.75em/1.75em Georgia, serif;
text-align: center;
text-transform: lowercase;
color: #cc6;
}
p {
margin: 0;
padding: 0 0 1em 0;
}
cite {
display: block;
margin-top: 2em;
font-style: normal;
font-size: 1em;
line-height: 1em;
text-align: center;
}
Now, we style the image. We’ll add 4px of padding, and a 3px border with a double style, so
that the image has what appears to be two borders surrounding it:
intro-image.css (excerpt)
img.intro {
padding: 4px;
border:3px double #ccc;
background-color: #fff;
margin:0 -7px;
}
The container is 500px wide, so the text stays within those boundaries. The image is also
500px wide, but since we’ve applied padding and border properties to it as well, we need
to compensate for them. Due to the 4px padding and 3px border, our intro image needs to
have a negative margin of 7px on the left and right to allow the border properties to extend
beyond the #content div. The padding and border properties can be adjusted to suit your
taste; just make sure that the negative margin is the same as the total of your padding and
border properties.
In Figure 2.18, we see an image that’s 500px wide—the same as the content area.

No comments:

Post a Comment