250 html and web design secrets phần 6 ppt

Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna.. Maecenas nunc tellus, adipiscing eget, tincidunt ut, venenatis ut, e

Trang 1

Figure 8-20 shows the results.

Figure 8-20: Text mouseovers using CSS work well in today’s modern Web

browsers

tip Add additional features to your links styles to enhance the look Or, create anawesome list-based navigation, as described earlier in this book, to create

horizontal as well as vertical navigation options with this technique

Trang 2

You can use the same swapping technique using images In this case, you’ll beplacing an image element directly into the anchor element and, instead of usingthe display element to hide and then reveal the image, you’ll set the image to have

no height and width until the hover state, in which you’ll include width and height(see Listing 8-9)

Listing 8-9: CSS mouseovers using images

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

background-color: #FFF;

}

#links a span { display: none;

}

(continued)

Trang 3

</body>

</html>

Figure 8-21 shows the results

This technique is an extension of the ideas in the CSS mouseover techniques, but

it applies the :hover pseudo class to other elements—this is actually a perfectlyacceptable use of :hover, but, unfortunately, IE doesn’t support it As a result,you’ll only have access to the primary links

So, while you can use this effect to create great menus (see Figure 8-22) withoutJavaScript, you can’t do it in IE (see Figure 8-23) However, because you’re simplystyling lists, they will tend to degrade to nested lists in most browsers without CSSsupport (as shown in Figure 8-24)

Trang 4

Figure 8-21:CSS-based mouseovers with images

Figure 8-22: A CSS-based dynamic menu in action

note For more information about the mouseover and menu techniques discussedhere, visit Eric Meyer’s CSS Edge, at www.meyerweb.com/eric/css/

edge/ A good explanation for hierarchical dynamic menus can be found at

Trang 5

Figure 8-23: IE will only display the top links of the menu.

Figure 8-24: The same menu with styles completely disabled

Trang 6

Still another interesting effect offered up by Eric Meyer is a technique wherebyyou can use images to create a rounded tab effect in horizontal list navigation.Rounded tabs are a mainstay of navigation, providing a softer look than squaretabs tend to offer

The beauty of this technique is that it is supported in all contemporary browsers(see Figure 8-25)

Figure 8-25: Rounded tab technique from complex spiral consulting

note This technique is described in a white paper on Eric’s consulting Web site, atwww.complexspiral.com/publications/rounding-tabs/.

Another awesome effect for tabbed navigation is the “Sliding Doors’’ techniquecreated by CSS designer Douglas Bowman

In this technique, you use two separate images, one small and one large, to create asliding effect This allows you to create dynamic navigation that is far more friendly

to the resizing of fonts while maintaining the navigation design Figure 8-26 showsthe concept at work

Trang 7

Figure 8-26: The Sliding Doors effect.

Figure 8-27: Horizontal rule fade effects

note To learn the Sliding Doors technique as well as some variants, seewww.alistapart.com/articles/slidingdoors/.

Trang 8

I stumbled upon this technique while writing this chapter Ethan Marcotte (thisbook’s technical editor) and designer Dunstan Orchard worked together to find ameans to style horizontal rules using background graphics

Through a bit of trial and error, Ethan and Dunstan came up with a means to createcross-browser horizontal rule effects including subtle fades Figure 8-27 shows theresults

note To read more about styling horizontal rules, see www.sidesh0w.com/

weblog/2004/03/17/sexily-styling-horizontal-rules.html.

Summary

Obviously, there are still concerns about the role CSS plays for certain audiences,but CSS has truly emerged as more than just a band-aid solution for font and colorcontrol You can now enhance your pages in so many ways, and I really believe

we have only just begun to understand where CSS will take us in terms of visualdesign

If you’re excited about CSS after this chapter—and I hope you are—you’ll be happy

to know you get to spend another chapter with CSS, examining how CSS worksfor layout, how to manage workarounds, deal with hacks, and write CSS for othermedia types

Trang 9

208

Trang 10

9

Laying Out

Pages with CSS

Secrets in This Chapter

#148: Two-Column Layout, Positioned Left Navigation 211

#149: Float-Based Layout 212

#150: Nested Float 214

#151: Three-Column Layout 218

#152: Vertical Centering in CSS 220

#153: Ordering DIVs for Backward Compatibility 226

#154: @import for Graceful Degradation 227

#155: CSS Hacking Strategies 228

#156: The Box Model Hack 230

#157: The High Pass Filter 231

#158: The Mid Pass Filter 232

#159: IE 5.0 Windows Band Pass Filter 232

#160: IE 5.5 Windows Band Pass Filter 233

#161: Opera Hacks 233

#162: Understanding CSS Media Types 234

#163: Alternate Style Sheet for Print 235

#164: Alternate Style Sheet for Small-screen Media 236

#165: Alternate Style Sheet for Projection 237

#166: CSS Best Practices 237

Trang 11

means of presenting and delivering designs to various media including, but notlimited to, the following:

In this chapter, you’ll learn about some of the most practical means of laying outpages The examples are made simple so you can both begin using them quicklyand gain insight into the concepts being employed Also included in this chapterare numerous hacks to assist you in making sure your CSS layouts are as backwardcompatible as possible

CSS Layout Basics

Several terms and concepts are referred to throughout this chapter, so it’s good tolet you know them up front:

Box Model Any HTML or XHTML element creates a box, and you can

use CSS to access and style aspects of that box, including margins,padding, and borders There are problems in Box Model

implementations—which is one of the reasons that CSS layouts require

so much attention to detail and often require hacks to ensure propercross-browser display

Graceful degradation This is the concept that when styles are removed

from a design, the actual text content is still available and easilyaccessed, even if all the visual layout and design elements are gone

Hack A hack is any use of code outside its original, intended purpose.

Workaround A workaround is typically an exploitation of a bug within a

browser allowing you to bypass support problems Hacks andworkarounds are very similar, and there’s always dissent as to whether ahack is a hack, a workaround, or a technique

Positioning In CSS, you can position element boxes either absolutely,

via specific coordinates, or relatively, in relation to other elements Youcan create complete layouts with absolute positioning, as is sometimescalled for

note The layouts in this chapter use positioning in conjunction with other methodsfor maximum flexibility Many visual editors, such as Dreamweaver, use the

term “layers” to refer to absolutely positioned CSS boxes

Trang 12

Floats Floats in CSS are a means of floating something to the right or

left Intended mostly to float images, floating has become one form oflaying out documents

Filters Filters in this context are a means of bypassing specific browsers

while targeting others Filters are really hacks, but the terminology isused to define specific hacks that are filtering specific browsers

note See Appendix C for helpful resources to assist you in your CSS education

Positioned Left Navigation

Using absolute positioning, you can create a two-column layout with a left columnmenu and right content area

Listing 9-1 shows the CSS and markup used to create the layout

Listing 9-1: Working with positioning in layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

padding:10px;

}

#nav { position:absolute;

Trang 13

tellus Vivamus dictum egestas mi Cras justo Vestibulum nisl mauris, convallis a, vestibulum et, accumsan vel, lacus Morbi mattis viverra turpis Pellentesque blandit quam in sapien Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna Ut adipiscing.</p>

<p>Morbi ut sem non diam fringilla tincidunt Maecenas nunc tellus, adipiscing eget, tincidunt ut, venenatis ut, enim Sed posuere turpis at nisl Sed at sem Nullam sagittis tincidunt magna Duis tempus Proin dui turpis, consequat quis, porttitor

ut, molestie vel, libero Phasellus sodales venenatis urna.</p>

<p>Maecenas ipsum risus, fringilla rutrum, porta id, congue id, leo Fusce augue nulla, vestibulum at, euismod ut, ultrices in, felis Cras vitae pede ac mi lobortis fermentum Phasellus viverra Ut ultrices, neque ac congue varius, justo quam elementum

mi, at nonummy urna elit quis augue Praesent feugiat pede a turpis Duis libero diam, volutpat id, dictum vitae, aliquet sed, lorem </p>

<li><a href="about.html">About Molly</a></li>

<li><a href="fun.html">Fun Stuff</a></li>

</ul>

</div>

</body>

</html>

While not primarily intended for laying out documents, the use of the float erty in CSS does allow you to create a number of convenient layouts with minimumfuss

prop-Floating layouts are common because they are functional, flexible, and easy towork with Floating layouts use the float property and a value of left or right

to determine which element gets floated

Trang 14

Figure 9-1: A CSS layout using positioning

Listing 9-2 shows how

Listing 9-2: Float-based layout, floating left content

}

</style>

</head>

(continued)

Trang 15

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit In vestibulum vestibulum elit Ut porta Duis vulputate bibendum tellus Vivamus dictum egestas mi Cras justo Vestibulum nisl mauris, convallis a, vestibulum et, accumsan vel, lacus Morbi mattis viverra turpis Pellentesque blandit quam in sapien Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna Ut adipiscing.</p>

mi, at nonummy urna elit quis augue Praesent feugiat pede a turpis Duis libero diam, volutpat id, dictum vitae, aliquet sed, lorem </p>

</ul>

</div>

</body>

</html>

The nested float layout in Listing 9-3 shows how you can nest div elements to getmore interesting layouts Nesting div elements can be an important part of

Trang 16

Figure 9-2: A CSS layout using float

complex layout designs This simple example will help give you a taste of how itworks

Listing 9-3: Nested Float

}

#content #nav { border-left: 1px solid #000;

Trang 17

</ul>

</div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit In vestibulum vestibulum elit Ut porta Duis vulputate bibendum tellus Vivamus dictum egestas mi Cras justo Vestibulum nisl mauris, convallis a, vestibulum et, accumsan vel, lacus Morbi mattis viverra turpis Pellentesque blandit quam in sapien Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna Ut adipiscing.</p>

mi, at nonummy urna elit quis augue Praesent feugiat pede a turpis Duis libero diam, volutpat id, dictum vitae, aliquet sed, lorem.</p>

Reversing the layout is simple, too All you need to do is modify the float from right

to left and change the borders, as follows:

Trang 18

Figure 9-3: The basic layout styles for a nested float

Figure 9-4: A styled example of a nested float from Owen Brigg’s CSS panic guide

Trang 19

background: #ccc;

margin: 0px 0px 10px 0px;

}Figure 9-5 shows the reverse

Figure 9-5: Reversing the float

Add a little style to the page and you’ve got an easy, useful float-based layout

This is a very popular layout, used frequently to emulate the three-column layouts

to which we’re accustomed in table-based designs In this case, each of the flankingcolumns is a fixed width, and the center content column will adjust dynamically(see Listing 9-4)

Listing 9-4: Dynamic three-column layout

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Trang 20

(continued)

Trang 21

felis Cras vitae pede ac mi lobortis fermentum Phasellus viverra Ut ultrices, neque ac congue varius, justo quam elementum

mi, at nonummy urna elit quis augue Praesent feugiat pede a turpis Duis libero diam, volutpat id, dictum vitae, aliquet sed, lorem.</p>

</div>

<p><em>Maecenas ipsum risus, fringilla rutrum, porta id, congue

id, leo Fusce augue nulla, vestibulum at, euismod ut, ultrices

</ul>

</div>

</body>

</html>

Add a little CSS pizzazz, and you end up with a fully styled site, such as that shown

in Figure 9-7

Recently, designers have got back to fixing their CSS designs In other words,instead of having the design flow dynamically to the browser size, the design isfixed to a certain pixel width (see Figure 9-8)

note While some designers prefer fixed designs, other camps strongly advocate“fluid” or “liquid” designs—those designs that flow to fill the browser window.

Advantages of liquid design include that no browser space is wasted, and nomatter how you size your browser, the design will flow to fit it Liquid designmeans less control of aspects of the overall design, and managing text line

Trang 22

Figure 9-6: The basic three-column layout

Figure 9-7: Molly.Com uses this three-column layout

Tiêu đề	Style Tips For Type And Design
Tác giả	Molly
Người hướng dẫn	Ethan, Technical Editor
Trường học	Wiley
Thể loại	Bài viết
Năm xuất bản	2025

Định dạng
Số trang	44
Dung lượng	2,55 MB