- Prepare Images
- Float Images
- Place Images
- Add Background Images
- Extra Bits
This chapter is from the book
This chapter is from the book
This chapter is from the book
Place Images
Now let’s put the theory into practice for the photos on the Alpaca Repo site. First, in the styles.css file, we’ll need to create three new classes to handle photos: floatRight, floatLeft, and photo.
The photo class sets up the styling for the photo and its caption that we use on the front page of the site.
.photo {
width: 200px;
font-size: .8em;
font-style: italic;
line-height: 1em;
}
Let’s also look at the XHTML for the image, which is in the index.html file:
<p class="photo floatRight" ><img src="images/3alpacas.jpg" width="200" height="237" alt="alpacas" />Some of the alpacas we've recovered.</p>
In this XHTML, you can see that we’ve put the image inside a paragraph, which is a block element. We’ve applied two class attributes to the paragraph: photo and floatRight, each of which has a rule inside styles.css. Let’s explain what those rules do.
The photo class makes this paragraph block have a width of 200 pixels—the same width as the image. Because the paragraph is set to be the same width as the image, the caption, which is inside the paragraph tags, goes under the image without any need for a break or second paragraph. The photo class also sets the text in the paragraph to be italic, and sets the font size and line height, so the caption has the style of our choice.
The floatLeft and floatRight classes just push the block to either the left or the right, with other text wrapping around it. There’s also a margin here to keep a little offset to make the picture pop. Because the margin is applied to the entire paragraph, the caption does not get pushed away by the margin.
.floatRight {
float: right;
margin-left: .8em;
}
.floatLeft {
float: left;
margin-right: .8em;
}
Next, in the site’s index.html file, there’s a line that says
<br clear="right" />
In this particular case, we had floated the photo to the right, so we clear it by giving clear a value of right. That bit of markup forces the following paragraphs to go below the right-floated photo instead of wrapping around it.
In case we want to clear all of our floats, we’ve also created a class that does that, which we’ve cleverly called clearfloat.
.clearfloat {
clear: both;
height: 0;
font-size: 1px;
}
See that the clear property has the value of both? That means that any element with clearfloat applied to it clears all elements floated to either the left or right.
We don’t want to use the clearfloat class after the images inside #mainContent, though, because it would clear the sidebar as well (remember that we floated the sidebar in Chapter 2, and we don’t want to force everything following to go after the sidebar ends).
If index.html used floatLeft for the photo instead of floatRight, that line above would instead have to be
<br clear="left" />
However, then we’d have the same possible problem—clearing the left-floated item would also clear the sidebar, forcing the following paragraphs way down the page. That isn’t a problem when your sidebar is short (as ours is here), but it’s something to keep in mind.
One more thing that relates to images, then we’re done with this page. We’ve added a property to the header rule we created back in Chapter 2, so that it looks like this:
#header {
background-color: #91A43D;
text-align: center;
margin: 0;
padding: 0;
overflow: hidden;
}
The property that we added, overflow: hidden; is what performs the cool shrinking effect when we make any page narrow. All it does is tell the browser that if there isn’t enough room to display the entire header image, don’t worry about it. Just hide whatever doesn’t fit. This allows us to have a wide header image that shows just what we want it to show, but it doesn’t force the window to be a particular width.