If you need or want to support IE5Mac, you need to float the anchor elements as well as the list items by adding this declaration to the beginning of the #nav li a rule: float: left; Th
Trang 1Using Lists for Navigation
The following example is just one of many variations on formatting naviga-tion with floated list items The primary steps are:
Turn off the bullets (list-style: none).
Float each list item (float: left).
Make the anchor elements (a) display as block elements so dimensions may be set (display: block).
Format the links with various styles.
This time, each a element is given a decorative background image that makes
it look like a tab ( Figure 17-10 )
body { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8em;
background-color: #FEF6D6; } ul#nav {
list-style: none;
margin: 0;
padding: 0; } ul#nav li { float: left;
margin: 0 2px;
padding: 0; } ul#nav li a { display: block; /* to set width & height of the a element */
width: 100px;
height: 28px;
line-height: 28px;
background: #E3A7CA url(tab.gif) no-repeat;
text-transform: uppercase;
text-decoration: none;
text-align: center; }
Figure 17-10 Tabbed navigation created with floated list items.
In this example, the list items are still block elements, but because they are all floated to the left, they line up next to one another
Notice that the display property for the anchor (a) elements has been set
to block (anchors are usually inline elements) This was done to allow us to apply width and height attributes to the a elements The remaining properties set the size of each “tab,” apply the tab background image, turn off under-lines, and style and center the text
1.
2.
3.
4.
There is a bug in Internet Explorer 5
for the Mac that causes this floated
list item example not to work
correctly as shown here
If you need (or want) to support
IE5(Mac), you need to float the
anchor elements as well as the list
items by adding this declaration to
the beginning of the #nav li a rule:
float: left;
Then you need to add a “hack” at the
end of the style sheet that overrides
the earlier float value and sets the
float for anchor elements back to
none in all browsers except IE(Mac)
Be sure to copy it exactly, noting
the difference between slashes and
backslashes
/* Commented backslash hack
hides rule from IE5-Mac \*/
#nav li a { float: none; }
/* End IE5-Mac hack */
B R O W S e R B U G
There is a bug in Internet Explorer 5
for the Mac that causes this floated
list item example not to work
correctly as shown here
If you need (or want) to support
IE5(Mac), you need to float the
anchor elements as well as the list
items by adding this declaration to
the beginning of the #nav li a rule:
float: left;
Then you need to add a “hack” at the
end of the style sheet that overrides
the earlier float value and sets the
float for anchor elements back to
none in all browsers except IE(Mac)
Be sure to copy it exactly, noting
the difference between slashes and
backslashes
/* Commented backslash hack
hides rule from IE5-Mac \*/
#nav li a { float: none; }
/* End IE5-Mac hack */
B R O W S e R B U G
Trang 2Image Replacement Techniques
More list and tabbed navigation tutorials
The examples in this section are only the most elementary introduction to
how CSS can be used to create tabbed navigation from semantically logical
list markup For more sophisticated techniques and in-depth tutorials, these
are just a few of the numerous resources online.
Sliding Doors of CSS (Parts I and II), by Douglas Bowman ( www.alistapart.
com/articles/slidingdoors and www.alistapart.com/articles/slidingdoors2 )
A problem with the floated list example above is that if a user makes the
text larger in the browser, it will bust out of the tab graphic In this article,
Doug Bowman introduces his ingenious technique for graphical tabs that
resize larger with the text.
Accessible Image-Tab Rollovers, by David Shea (
www.simplebits.com/note-book/2003/09/30/accessible_imagetab_rollovers.html )
This tutorial combines list-based tabbed navigation with image
replace-ment techniques (we’ll get to image replacereplace-ment in the next section).
Free CSS Navigation Designs, by Christopher Ware ( www.exploding-boy.
com/2005/12/15/free-css-navigation-designs/ )
A collection of 11 navigational menus available for your downloading and
customizing pleasure.
CSS Design: Taming Lists by Mark Newhouse ( www.alistapart.com/stories/
taminglists )
This article demonstrates a number of CSS tricks for controlling the
pre-sentation of lists, including various inline list item applications.
Image Replacement Techniques
Web designers frustrated with typography limitations on the Web have been
using inline images for prettier text since the img element first came on the
scene The problem with swapping out real text, like an h1 element, for an
img is that the text is removed from the source document entirely Providing
alternative text improves accessibility, but it does not repair the damage to the
semantic structure of the document Not only that, in terms of site
mainte-nance, it’s preferable to control matters of presentation from the style sheet
and leave the source free of purely decorative elements.
The year 2003 saw the dawn of CSS image replacement (IR) techniques that
replace text with a background image specified in a style sheet The text
ele-ment itself is still present in the source docuele-ment, so it is accessible to screen
readers and search engine indexers, but it is prevented from displaying in
Trang 3Image Replacement Techniques
Note
For an explanation and comparison of image replacement techniques, see David Shea’s (of Zen Garden fame) list and articles at www.mezzoblue.com/tests/revised-image-replacement/
It should be noted that as of this writing, there is no ideal solution for CSS image replacement, just different approaches and trade-offs Most techniques rely on users being able to read the content in images when the text is hidden, which means users who have CSS turned on but images turned off (or who
are simply waiting for images to load over a slow connection) are not well served This problem remains to be solved.
The IR technique with the most widespread use was created by Mike Rundle for use on his Phark site (it is commonly called the Phark or Rundle/Phark method) It hides the element text by setting an extremely large negative text-indent that pushes the text off the screen to the left where it can’t be seen ( Figure 17-11 ) In this example, the text is set off by -5000 pixels (some authors prefer -999em because it saves a character and results in a larger distance).
background: url(cookingwithrockstars.gif) no-repeat;
text-indent: -5000px;
Figure 17-11 The Rundle/Phark image replacement method works by using a large
negative margin to hide the text in a graphical browser The background image containing a more attractive version of the text appears in place.
The style sheet
body { font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 50px;
background-color: #BEC9F1; }
#cwr { text-indent: -5000px; /* moves the text out of view */
background: url(cookingwithrockstars.gif) no-repeat;
width: 350px; /* sets the dimension of the graphic */
height: 35px; }
The Future of
Image Replacement
In CSS Level 3, image replacement
may be accomplished using
the expanded capabilities of
automatically generated content To
replace an h1 element with an image
in CSS3, the rule would look like this;
h1 {
content: url(headline.gif);
}
Unfortunately, current browsers do
not support this use of generated
content well enough for it to be
a viable option as of this writing
Hopefully, one day that will change
and the image replacement trickery
in this chapter will be a quaint blip in
web design’s past
The Future of
Image Replacement
In CSS Level 3, image replacement
may be accomplished using
the expanded capabilities of
automatically generated content To
replace an h1 element with an image
in CSS3, the rule would look like this;
h1 {
content: url(headline.gif);
}
Unfortunately, current browsers do
not support this use of generated
content well enough for it to be
a viable option as of this writing
Hopefully, one day that will change
and the image replacement trickery
in this chapter will be a quaint blip in
web design’s past
Trang 4CSS Rollovers
The markup
<h1 id="cwr">Cooking with Rockstars</h1>
<p>I’ve been conducting interviews with my favorite bands on the topic
of cooking and eating Ideally, we cook together; more commonly, we
share cooking secrets in a backstage chat Videos of our conversations
are posted here In addition, the artists have generously contributed
their own recipes Thank them by buying their records <strong>Bon
appetit!</strong></p>
Because the headline text is an ordinary h1 element, it will be read by a screen
reader The other advantages to this method are that no extra markup (such
as a span element) is required, and it doesn’t require any browser hacks The
major disadvantage is that users with CSS turned on but images turned off
will see nothing Likewise, users with graphical browsers will see no headline
at all if the image file simply fails to load.
CSS Rollovers
Chapter 15, Colors and Backgrounds briefly introduced the :hover
pseudo-class selector used to create rollover effects when the mouse is positioned
over a link (see note) In this section, we’ll take an expanded look at how it
can be used.
Note
The :hover pseudoclass may be applied to any element according to the CSS2.1
Recommendation, but because Internet Explorer 6 and earlier for Windows only
sup-port it on the anchor (a) element, its practical use has been limited to links IE7 does
support :hover correctly, so authors will have more options as older versions of IE go
away For a JavaScript-based workaround for IE6 and earlier, see the “Suckerfish :
hover” article at www.htmldog.com/articles/suckerfish/hover/
First, for a refresher, here is an example of a simple text link that has been
set to display in dark red text with no underline When someone places the
mouse over the link, the a:hover rule brightens up the text color and adds
a decorative bottom border (a more subtle effect than a real text underline)
The result is shown in Figure 17-12
a:link {
text-decoration: none;
color: #930;
}
a:hover {
text-decoration: none;
color: #F30;
padding-bottom: 2px;
border-bottom: dotted 2px #930;
sIFR Text
Another interesting image replacement technique is sIFR, which stands for Scalable Inman Flash Replacement sIFR replaces text with small Flash movies instead of GIF, JPEG, or PNG images The advantage
is that text in Flash movies is vector-based, so it is smooth, anti-aliased, and able to resize with the page
Using a combination of CSS, JavaScript, and Flash technology, sIFR allows authors to “insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics.” sIFR (in Version 2.0 as
of this writing) was created by Mike Davidson, who built upon the original concept developed by Shaun Inman (the“I”of sIFR)
sIFR is not perfect, but it is a promising technique that could lead to more powerful typography solutions To find out more about sIFR, including how to implement
it on your site, visit www.
mikeindustries.com/sifr
sIFR Text
Another interesting image replacement technique is sIFR, which stands for Scalable Inman Flash Replacement sIFR replaces text with small Flash movies instead of GIF, JPEG, or PNG images The advantage
is that text in Flash movies is vector-based, so it is smooth, anti-aliased, and able to resize with the page
Using a combination of CSS, JavaScript, and Flash technology, sIFR allows authors to “insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics.” sIFR (in Version 2.0 as
of this writing) was created by Mike Davidson, who built upon the original concept developed by Shaun Inman (the“I”of sIFR)
sIFR is not perfect, but it is a promising technique that could lead to more powerful typography solutions To find out more about sIFR, including how to implement
it on your site, visit www.
mikeindustries.com/sifr
Trang 5CSS Rollovers
Figure 17-12 A simple text link as it appears when the page loads and when the mouse
rolls over it.
Swapping background images
Image rollovers work on the same principle as described for text, except that the background-image value is changed for the hover state Again, because Internet Explorer 6 and earlier only support :hover on the a element, a link
is used in this example
In this example, a background image ( button.gif) is applied to links in a
navigational toolbar The a element is set to display as a block so that width
and height values (matching the image dimensions) can be applied to it The
a:hover rule specifies a different background image ( button_over.gif) to
dis-play when the mouse is over the link ( Figure 17-13 ) It also changes the text color for better contrast with the highlighted button color.
#navbar li { list-style-type: none;
float: left; }
#navbar a { color: #FFF;
display: block; /* allows width and height to be specified */ width: 150px;
height: 30px;
background: #606 url(button.gif) no-repeat;
/* the next properties center the text horizontally and vertically*/ text-align: center;
text-decoration: none;
line-height: 30px;
vertical-align: middle; }
#navbar a:hover { color: #000;
background: #f0f url(button_over.gif) no-repeat; }
Figure 17-13 Simple image rollover.
WARNING
Changing the anchor (a) element to
display as a block means that you can’t
apply this method to inline links because
each link will start on a new line This
method is most useful for links that will
be floated to form a horizontal toolbar,
as we saw previously in this chapter.
To clear vertical space for background
images in inline a elements, try
adjust-ing the line-height for the containing
element.
WARNING
Changing the anchor (a) element to
display as a block means that you can’t
apply this method to inline links because
each link will start on a new line This
method is most useful for links that will
be floated to form a horizontal toolbar,
as we saw previously in this chapter.
To clear vertical space for background
images in inline a elements, try
adjust-ing the line-height for the containing
element.
Trang 6CSS Rollovers
In some instances, such as graphical navigation bars, it is desirable for each
link to have its own background and rollover images In this case, it is
neces-sary to give each li (or other containing element) a unique id value
<li id="info"><a href="#">more info</a></li>
<li id="contact"><a href="#">contact us</a></li>
a {display: block; width: 150px; height: 30px; }
#info a {background: #666 url(info.gif) no-repeat; }
#info a:hover {background: #666 url(info_over.gif) no-repeat; }
#contact a {background: #eee url(contact.gif) no-repeat; }
#contact a:hover {background: #eee url(contact_over.gif) no-repeat; }
Shifting the background image
Another popular method for handling image rollovers is to put all the
roll-over states in one image, then change only the background-position for each
link state This avoids the need to load or preload multiple images for each
rollover and can speed up display.
Figure 17-14 shows the image, bothbuttons.gif, that contains both the default
background image and the hover state The style rule shifts the position of
the initial background image from bottom to top, revealing the appropriate
portion of the image Pretty fancy, huh?
a {
display: block;
width: 150px;
height: 30px;
background: #606 url(bothbuttons.gif) bottom left no-repeat;
color: #FFF;
text-align: center;
text-decoration: none;
line-height: 30px;
vertical-align: middle; }
a:hover {
background: #f0f url(bothbuttons.gif) top left no-repeat;
color: #000; }
bothbuttons.gif
background-position:
top left no-repeat;
The image file contains both button states stacked on top of one another.
background-position:
bottom left no-repeat;
Note
This technique was introduced by Petr Stani˘cek [aka "Pixy"] in his article "Fast Rollovers without Preload" ( wellstyled com/css-nopreload-rollovers.html).
Note
This technique was introduced by Petr Stani˘cek [aka "Pixy"] in his article "Fast Rollovers without Preload" ( wellstyled com/css-nopreload-rollovers.html).
WARNING
Applying rollovers to background images can cause a flickering effect in Internet Explorer 6 on Windows One solution is
to apply the background image to both the link (a) and its containing element; however, increased font size could result
in both images showing For an in-depth look at this problem and possible solu-tions, see the article, Minimize Flickering CSS Background Images in IE6 by Ryan Carver at www.fivesevensix.com/stud-ies/ie6flicker/
WARNING
Applying rollovers to background images can cause a flickering effect in Internet Explorer 6 on Windows One solution is
to apply the background image to both the link (a) and its containing element; however, increased font size could result
in both images showing For an in-depth look at this problem and possible solu-tions, see the article, Minimize Flickering CSS Background Images in IE6 by Ryan Carver at www.fivesevensix.com/stud-ies/ie6flicker/
Trang 7CSS Rollovers
You’ve seen horizontal lists you’ve seen CSS rollovers Now
put them together in this exercise As a bonus, I’ve thrown in a
chance to do an image replacement, too The starter document,
designerrific.html, and its respective images directory are
provided with the materials for this chapter, and the resulting
style sheets are in Appendix A
In this exercise, we’ll create a typical page header that consists
of an h1 and a list Figure 17-15 shows the unstyled document
and two designs we’ll create entirely with style sheet rules It
will take us a few steps to get there, but I promise at least one
A-ha! moment along the way
Open designerrific.html in a text editor The first thing we’ll
do is write some rules for the body element to set the font
for the whole page to Verdana (or some sans-serif font) and
set the margin to zero This will allow us to place elements
right against the browser window
body {
font-family: Verdana, sans-serif;
margin: 0; }
Next, use the Phark image replacement technique to replace
the h1 text with an image that contains the company’s
logotype (designerrific-trans.gif, located in the images
directory) Set the dimensions of the element to 360 pixels
wide by 70 pixels high to reveal the whole image
h1#ds {
text-indent: -5000px;
background: url(images/designerrific_trans.gif)
width: 360px;
height: 70px; }
Unstyled
Design A
Design B
Figure 17-15 The Designerrific Studios header before and
after styling.
1
2
Save the document and take a look in the browser You should see the logo shown in Figure 17-15 in place of the h1
text If not, go back and make sure that you aren’t missing any semicolons or brackets in your style rule and that the pathname to the image file is correct
Now we’ll turn the unordered list into navigation using the inline method outlined earlier Set the stage by removing the bullets from the ul and changing the display of the list items to inline
ul#nav { list-style-type: none; } ul#nav li {
display: inline; }
In Design A, each anchor is styled as a dark teal rectangular box with white type and a white 1-pixel border The linked text should be resized to 76% its default size and underlines removed for a clean look In addition, text is centered and transformed to uppercase with 2 pixels of letter spacing added for interest Finally, padding is added around the content (2 pixels top and bottom, and 20 pixels left and right) and a 2-pixel margin is added to keep the links from bumping into one another Take a try at writing these style rules yourself, then check your work against this code: ul#nav li a {
background-color: #0A6D73;
border: 1px solid #FFF;
color: white;
font-size: 76%;
text-decoration: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
padding: 2px 20px;
margin: 0px 2px;
} Save the document and open it in a browser You should see the links lined up in rectangles as shown in Design A (they’ll
be under the logotype because we haven’t moved them yet)
3
exercise 17-2 | Putting it together
Design B is a good example of how small background images can be tucked off into a corner of an element That little star changing color offers good feedback that the link is clickable, but it is more subtle and streamlined than the big 3-D button shown in the earlier example
D e S I G n t I P
Trang 8CSS Rollovers
Let’s add a rollover effect to those links too When the mouse
passes over the “button”, it will turn bright pink (#F8409C)
to match the star in the logo, and the border will turn dark
maroon (#660000, or #600 shorthand) to match the logo
text
ul#nav li a:hover {
background-color: #F8409C;
border: 1px solid #600;
}
When you save the document and refresh it in the browser,
you should see the highlighted pink color when you mouse
over the links Exciting!
Now that we have the pieces built, we can assemble them in
the header layout as shown in Figure 17-15 There are several
approaches to doing this, but we’ll use absolute positioning
to place the h1 and the ul right where we want them
First, let’s set up the shaded masthead area by styling the div
(id="header") that holds the headline and navigation list Give it
a light teal background color (#9CD8CD) and a double bottom
border that matches the logo (#600) Set its height to 100 pixels
In addition, set its position to relative to establish it as a
containing block for the elements it contains
#header {
position: relative;
background: #9cd8cd;
border-bottom: 3px double #600;
height: 100px;}
Save the document and look at it again in the browser You
will see a shaded masthead area waiting for the elements to
be positioned in it You’ll also see that it doesn’t go all the way
to the top of the browser window as we had wanted That
extra space is actually coming from the default margin that
the browser is applying to the h1 element Therefore, we will
set the margin on the h1 (and the ul for good measure) to
zero to eliminate that problem
Add this declaration to the rules for h1#ds and ul#nav Now
when you save and refresh, the extra space is removed and
the shaded header should go all the way to the top of the
window
margin: 0;
Finally, we’ll absolutely position the h1 and the ul I’ve done
the finagling for you and arrived at the following posiitions:
h1#ds {
text-indent: -5000px;
background: url(images/designerrific_trans.gif)
no-repeat;
width: 360px;
height: 70px;
margin: 0;
4
5
6
ul#nav { list-style-type: none;
margin: 0;
position: absolute;
top: 65px;
right: 25px;
} This time when you save and refresh, you’ll find that your page looks just like Design A in Figure 17-1 That wasn’t too bad, was it?
Design B is essentially the same as Design A, except it uses as subtle image swap (the white star turns pink) in the rollover
Save a copy of your document as designerrific-B.html and we’ll
make those changes
Remove the background and border from the links and change the text color to dark teal (#1A7E7B) Remove the background and border from the a:hover rule as well (The resulting rules are shown after Step 8.)
Add the non-repeating star-white.gif background image to
the left edge of each anchor, centered in the height of the element To the a:hover rule, add the star-pink.gif in the
same position The resulting rules are as follows:
ul#nav li a { color: #1A7E7B;
font-size: 76%;
text-decoration: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
padding: 2px 20px;
margin: 0px 2px;
background: url(images/star-white.gif) left center no-repeat;
} ul#nav li a:hover { background: url(images/star-pink.gif) left center no-repeat;
} Save the document, and voila! You’ve created the style sheet for Design B
7
8
It is common to set the margin on elements to zero
to override the browser’s default spacing This makes positioning and floating elements more predictable
c S S t I P
Trang 9Wrapping Up Style Sheets
Wrapping Up Style Sheets
We’ve come to the end of our style sheet exploration By now, you should be comfortable formatting text and even doing basic page layout using CSS The trick to mastering style sheets, of course, is lots of practice and testing If you get stuck, you will find that there are many resources online (I’ve listed many throughout Part III) to help you find the answers you need
In Part IV, we’ll set the source document and style sheets aside and turn our attention to the world of web graphics production But first, a little final exam
to test your CSS techniques chops.
Test Yourself
See how well you picked up the CSS techniques in this chapter with these questions As always, the answers are available in Appendix A
Match the style rules with their respective tables in Figure 17-16
A
D
B
E
C
Figure 17-16 Match these tables with the code examples in Question 1.
table { border-collapse: collapse;}
td { border: 2px black solid; } table { border-collapse: separate; }
td { border: 2px black solid; } table {
border-collapse: separate;
border-spacing: 2px 12px; }
td { border: 2px black solid; } table {
border-collapse: separate;
border-spacing: 5px;
border: 2px black solid; }
td { background-color: #99f; } table {
border-collapse: separate;
border-spacing: 5px; }
td { background-color: #99f;
border: 2px black solid; } 1.
Trang 10Test Yourself
Match the style rules with the resulting lists in Figure 17-17
A
D
B
E
C
Figure 17-17 Match these lists with the code examples in Question 2.
list-style-type: upper-alpha
list-style-type: circle
list-style-type: decimal
list-style-type: disc
list-style-type: upper-roman
What does the display property do?
Name two ways to get unordered list items to line up like a horizontal
navigation bar
Which of these is responsible for creating CSS rollover effects?
A the rollover property
B the :hover property
C the :hover selector
D the onmouseover attribute
2.
3.
4.
5.