The Content Area
new moves and a new outlook as the new season approaches.
</p>
<p><a href="">Read More</a></p>
</div> <! mainfeature >
<h2>Recent Features</h2>
Now you can style the main feature area in your style sheet:
File: styles.css (excerpt)
#mainfeature {
background-image: url(img/mainimg.jpg);
background-repeat: no-repeat;
background-color: #112236;
color: white;
padding: 2em 2em 1em 200px;
}
Here, we add the background image, mainimg.jpg, and set it to no-repeat. But
if a user has the browser open to dimensions that are wider than the image, we
don’t want the exposed areas of the page to display white. To prevent this from
happening, we add a background color of #112236; this is the same color as the
far right-hand side of the image, so the image should appear to fade into the
background color seamlessly. We then set the text color to white and use padding
to position the text two ems from the top of the box, two ems from the right,
one em from the bottom, and 200 pixels from the left-hand side, so that it’s clear
of the image of the footbag player.
Next, we style the heading and the paragraphs within the boxout:
File: styles.css (excerpt)
#mainfeature h2 {
margin: 0;
font-weight: normal;
font-size: 140%;
}
#mainfeature p {
font-size: 110%;
}
Finally, we need to style the “Read More” link that leads readers to the full article.
Let’s start by adding a class="more" attribute to the paragraph element so that
we can target it with our style rules:
193
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
File: index.html (excerpt)
<div id="mainfeature">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change of shoes has given him new
moves and a new outlook as the new season approaches.</p>
<p class="more"><a href="">Read More</a></p>
</div>
First, we remove the top margin from the paragraph that contains the link, to
decrease the space between it and the paragraph. Then, we set text-align to
right:
File: styles.css (excerpt)
#mainfeature p.more {
margin-top: 0;
text-align: right;
}
#mainfeature p.more a:link, #mainfeature p.more a:visited {
color: white;
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
}
We then style the link and visited pseudo-classes, changing their color to white
and adding the more-bullet.gif background image. We only want to see the
bullet once, so we set repeat to no-repeat, then position the background center
and left. This positions the image in the center of the link’s text. Finally, in order
to stop the text from displaying over the top of the background image, we set
padding-left to 14 pixels. The impact of these changes is shown in Figure 8.29.
If you load this page in Internet Explorer 6, you'll see that the peekaboo bug that
affected our right-aligned navigation bar has reared its ugly head once more, and
is randomly causing our feature area to display as a white rectangle. Again, it's
simple to fix this issue by adding the declaration height: 1% to our #mainfeature
rule.
194
Licensed to siowchen@darke.biz
The Content Area
Figure 8.29. After styling the main feature section
File: styles.css (excerpt)
#mainfeature {
background-image: url(img/mainimg.jpg);
background-repeat: no-repeat;
background-color: #112236;
color: white;
padding: 2em 2em 1em 200px;
height: 1%;
}
Reload the page and the main feature area will display as reliably in Internet
Explorer as it does in Firefox, Opera, and Safari.
The Features List
Our layout is really starting to take shape now! Let’s spend some time styling the
main content on this page: the list of feature articles.
At the moment, the text inside the content area butts up against the border of
the box. I want to create some space between that border and the content. The
contents of the home page content div are enclosed in an unordered list, so one
option we have is to add a margin to that list and to the h2 above it. However,
another page might have a different kind of main content, so in order that all of
the pages can be dealt with in the same way, let’s add another div, which wraps
around the heading and features list, and give it a class of inner:
195
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
File: index.html (excerpt)
<div id="content">
<div id="mainfeature">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change of shoes has given him
new moves and a new outlook as the new season approaches.
</p>
<p class="more"><a href="">Read More</a></p>
</div> <! mainfeature >
<div class="inner">
<h2>Recent Features</h2>
<ul>
<li>
<h3>Head for the Hills: Is Altitude Training the
Answer?</h3>
<p>Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>Hack up the Place: Freestylin' Super Tips</h3>
<p>Jules 'Pony King' Szemere</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>The Complete Black Hat Hacker's Survival Guide</h3>
<p>Mark 'Steel Tip' Harbottle</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3>Five Tricks You Didn't Even Know You Knew</h3>
<p>Simon 'Mack Daddy' Mackie</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit
iaculis arcu.</p>
<p><a href="">Full Story</a></p>
</li>
</ul>
196
Licensed to siowchen@darke.biz
The Content Area
</div>
</div> <! content >
To create some space between the features list and the border of the containing
box, let’s add a margin to #content .inner in the style sheet:
File: styles.css (excerpt)
#content .inner {
margin: 10px 20px 10px 40px;
}
If you view your layout in the browser, you should see the space that this margin
creates. We can now address the content of this section.
First, let’s style the heading. In our layout image, the heading has a blue underline
that stretches across the entire width of the content—an effect we can create using
a bottom border. Let’s also add a small amount of padding to the bottom of the
h2, to insert some space between the text and this border:
File: styles.css (excerpt)
#content .inner h2 {
color: #245185;
padding-bottom: 0.2em;
border-bottom: 1px solid #b9d2e3;
font-size: 110%;
}
Next, let’s add a rule to remove the margin and list bullets from the list of feature
items. While we could simply create this rule for #content .inner ul, as there’s
only one list in this page’s layout, that approach might cause problems on other
pages whose content includes lists that are not like this special features list. So
let’s add a class="features" attribute to the ul element first, so we can style
this particular list—and others like it—without affecting any normal, non-feature
lists within page content:
File: index.html (excerpt)
<div class="inner">
<h2>Recent Features</h2>
<ul class="features">
<li>
File: styles.css (excerpt)
#content .inner ul.features {
margin: 0;
197
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
padding: 0;
list-style: none;
}
Each feature has a level three heading; we’ll style these by increasing the font
size:
File: styles.css (excerpt)
#content .inner h3 {
font-size: 130%;
}
Let’s also make each of these headings act as a link to the appropriate article on
the Footbag Freaks site. We can style the link and visited pseudo-classes, as
well:
File: index.html (excerpt)
<li>
<h3><a href="">Head for the Hills: Is Altitude Training the
Answer?</a></h3>
<p>Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit iaculis
arcu.</p>
<p><a href="">Full Story</a></p>
</li>
<li>
<h3><a href="">Hack up the Place: Freestylin' Super
Tips</a></h3>
<p>Jules 'Pony King' Szemere</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit iaculis
arcu.</p>
<p><a href="">Full Story</a></p>
</li>
File: styles.css (excerpt)
#content .inner h3 a:link, #content .inner h3 a:visited {
color: #245185;
}
Finally, let’s style the page’s paragraph text by making it a dark gray and decreas-
ing the font size to 90%:
198
Licensed to siowchen@darke.biz
The Content Area
File: styles.css (excerpt)
#content .inner p {
color: #666666;
font-size: 90%;
}
The Author Images
We want to display an image of the author alongside each feature article listing.
Add the image to each feature item, after the heading, like so:
File: index.html (excerpt)
<li>
<h3><a href="">Head for the Hills: Is Altitude Training the
Answer?</a></h3>
<img src="img/lachlan.jpg" alt="Lachlan Donald" height="48"
width="35" />
<p>Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Praesent hendrerit iaculis
arcu.</p>
<p class="more"><a href="">Full Story</a></p>
</li>
199
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
Figure 8.30. Displaying author images in the document
This markup produces the display shown in Figure 8.30.
Let’s use the float: left declaration to move these author shots to the left of
the paragraph text. Note that we don’t need to include the image’s width here,
as each img already has a width defined.
File: styles.css (excerpt)
#content .inner .features li img {
float: left;
margin: 0 5px 5px 0;
}
Here, we’ve used a selector that will address only those images that are within
an li element with the class="features" attribute. This way, we avoid affecting
any other images that might be added to your content.
We’ve set the image to float left, and added a margin so that the text doesn’t sit
right next to the image—it has a little breathing room, as Figure 8.31 shows.
200
Licensed to siowchen@darke.biz
The Content Area
Figure 8.31. Floating the author image
In our layout graphic, author names appear in bold text, so let’s give the paragraph
surrounding the author name a class attribute with the value author, and use
a CSS rule to style it bold. We’re not doing this with any <strong> or <b> tags
because we’re styling the author names purely for aesthetic reasons—not for any
structural purpose. By keeping the author name styles out of the page markup,
we’re sticking to our goal of separating content from presentation. And, since
we’re using CSS, if we want to change the way the author name displays in future,
we can simply edit the rules for the appropriate class, instead of finding every
page on which an author’s name is displayed and changing it there. Here’s the
change we need to make to the page markup, followed by the CSS rule that will
make all suitably marked-up author names bold:
File: index.html (excerpt)
<img src="img/lachlan.jpg" alt="Lachlan Donald" height="48"
width="35" />
<p class="author">Lachlan 'Super Toe' Donald</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
201
Licensed to siowchen@darke.biz
Chapter 8: Simple CSS Layout
File: styles.css (excerpt)
#content .inner p.author {
font-weight: bold;
}
The final page element that we need to style for this section is the “Full Story”
links that appear beneath each feature. Add a class of more to each link’s
opening <p> tag, then add the following rules to your style sheet:
File: styles.css (excerpt)
#content .inner p.more{
margin-top: 0;
text-align: right;
}
#content .inner p.more a:link, #content .inner p.more a:visited {
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
font-size: 90%;
color: #1e4c82;
}
As I’m sure you’ve noticed, this styling is very similar to that of the “Read More”
link within the feature article section at the top of the page.
Your layout should now look a lot like the original layout graphic. Our progress
is shown in Figure 8.32. The page is very close to completion: we have only the
sidebar left to style!
202
Licensed to siowchen@darke.biz
Không có nhận xét nào:
Đăng nhận xét