Tài liệu CSS Cookbook- P7 pptx

And the CSS rule looks like this: .flagicon { text-align: center; } To center elements with fixed widths, such as images, first set the value of the parent’s padding-left property to 50%

So, to ensure cross-browser support within IE versions, make sure you include bothsets of properties:

.highlight { scrollbar-face-color: #99ccff;

5.4 Techniques for Centering Elements on a Web Page Problem

You want to center parts of a web page, as in Figure 5-8

Figure 5-8 The headline text centered

Discussion

By using text-align, you can center text inside block-level elements However, in thisexample, the heading takes up the entire width of the body element, and if you don’tapply a background color to the element, you probably won’t even notice this is hap-pening The gray background color in Figure 5-9 shows the actual width of the centeredelements

Figure 5-9 The actual width of the elements shown by the gray background color

An alternative approach is to use margins to center text within its container:

h1, h2, h3 { margin-left: auto;

<td>This is the first cell</td>

<td>This is the second cell</td>

</tr>

<tr>

<td>This is the third cell, it's under the first cell</td>

<td>This is the fourth cell, it's under the second cell.</td>

<div class="flagicon"><img src="flag.gif" alt="Flag" width="160"

height="60" /></div>

And the CSS rule looks like this:

.flagicon { text-align: center;

}

To center elements with fixed widths, such as images, first set the value of the parent’s padding-left property to 50%

Then determine half of the width of the element you are centering and set it as a negativevalue in the margin-left property That prevents the element’s left side from resting onthe 50% line caused by its padding and makes it slide into the middle of the page.The markup for an image in a web page using this technique looks something like this:

<img src="wolf.jpg" width="256" height="192" alt="Photo of wolf.">

The CSS rule to produce the result shown in Figure 5-10 looks like this:

body { padding-left: 50%;

} img { /* equal to the negative of half its width */

img { position: absolute;

Figure 5-11 The image centered horizontally and vertically on the web page

With absolute positioning (see Recipe 2.23), you take the element out of the normalflow of the document and place it wherever you want

If you want to center both text and an image (or other images) instead of just one image,enclose all of the content with a div element:

<div id="centerFrame">

<p>Epsum factorial non deposit quid pro quo hic escorol Olypian quarrels et gorilla congolium sic ad nauseum Souvlaki ignitus carborundum e pluribus unum Defacto lingo est igpay atinlay.</p>

<img src="wolf.jpg" width="256" height="192" alt="Photo of wolf." />

</div>

Then in the CSS rule, remove the height property and adjust the negative value of thetop margin to compensate for the additional elements on the page:

#centerFrame { position: absolute;

If you have numerous images and large amounts of HTML text, users with low lutions will have to scroll the page to see your centered content.

You want to place a visual frame or border around a web page, as shown in Figure 5-12

Figure 5-12 A framed web page

Solution

Use the border property on the body element:

body { margin: 0;

padding: 1.5em;

border: 50px #666 ridge;

}

Figure 5-13 The available border styles in CSS

Note that the groove style is the inverse of the shades of shadow as seen in the Solution,which uses the ridge value

The only browser incompatibilities to worry about are that in Internet Explorer forWindows the dotted style appears as aliased circles, whereas in Firefox, Opera, andSafari the dotted style appears as blocks.

5.6 Placing a Border Around the Browser’s Viewport Problem

You want to place a border around the viewport of the browser

#left, #right { width: 24px;

Then assign each part to its respective corner and side of the viewport:

#top { top: 0;

}

#bottom { bottom: 0;

}

#left { left: 0;

}

#right { right: 0;

}

#topleft { top: 0;

left: 0;

}

#topright { top: 0;

right: 0;

} #bottomleft { bottom: 0;

left: 0;

} #bottomright { bottom: 0;

Instead of using background colors for the bars, another technique similar to this one

is to use PNGs (or even CSS gradients with opacity as in Recipe 4.16) to set a fade effect

As the user scrolls the browser, the text fades out along the edges of the browser’sviewport

See Also

The CSS2 specification for fixed positioning at http://www.w3.org/TR/CSS2/visuren html#fixed-positioning

5.7 Customizing a Horizontal Rule Problem

You want to change the look of a horizontal rule from the solid line in Figure 5-15 tosomething more interesting, such as the graphic in Figure 5-16

Figure 5-15 The default rendering of a horizontal rule

Solution

Use a mixture of CSS properties on the hr element to obtain the desired effect:

<style type="text/css">

hr { border: 0;

<! [if lt IE 8]>

<style type="text/css">

hr { display: list-item;

list-style: url(hr.gif) inside;

Before HTML 4.0, you could manipulate the presentation of horizontal rules through

a set of four attributes: align, width, size, and noshade Since HTML is intended tomark up content and not the look of the content, those values are no longer a part ofthe HTML specification (Browser vendors may support the values, but your mileagewill vary.) With CSS rules controlling the presentation, you have far greater controlover the appearance of horizontal rules

To create a cross-browser styling of horizontal rules, set the border to zero and thenbring in an image through the background property Adjust the margins above and below

to taste

For cross-browser support for older IE browsers, use conditional comments to deliver

an alternative method of bringing in the background image:

<! [if lt IE 8]>

<style type="text/css">

hr { display: list-item;

list-style: url(hr.gif) inside;

To remove the border of the hr element set the opacity to zero using Microsoft’s CSSfilter

See Also

The HTML 4.01 specification for hr elements at http://www.w3.org/TR/html401/ present/graphics.html#edef-HR; an overview of styling an hr element at http://www.so vavsiti.cz/css/hr.html

5.8 Adding a Lightbox Problem

You want to overlay images on top of a current web page (as shown in Figure 5-17)without popping a new browser window

<title>Mr McCool's Homepage</title>

<! Structure for Lightbox effect >

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript" src="scriptaculous.js?load=effects"></script>

<! Script for Lightbox >

<script type="text/javascript" src="lightbox.js"></script>

Figure 5-17 The default page

Next, link to the stylesheet that renders the look and feel of the overlay effect:

<title>Mr McCool's Homepage</title>

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript" src="scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="lightbox.js"></script>

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

Within the web page content, include a link to an image, making sure to include arel attribute with a value of lightbox A common link example would be to wrap a linkaround a thumbnail image:

<a href="trammell_shoes.jpg" rel="lightbox" title="Trammell shows off his happy shoes."><img src="trammell_shoes_tn.jpg" alt="Mark Trammel

is happy with his shoes." /></a>

Clicking on link activates the lightbox effect, as shown in Figure 5-18

Scriptaculous is a collection of JavaScript libraries When used in conjunction withPrototype, Scriptaculous allows developers to build dynamic, Asynchronous JavaScriptand XML (Ajax) interactions For more information on Scriptaculous, see http://script aculo.us/.

With the JavaScript foundations in place, web developer Lokesh Dhakar (see http:// www.lokeshdhakar.com/projects/lightbox2/) developed a clever image viewer that dis-plays a full-size image without having to leave the web page that displays thethumbnails

Figure 5-18 The lightbox appearing on top of the page

Other JavaScript libraries and gallery plug-ins are also available For example, check out jQuery (see Chapter 14) and the galleria image gal- lery (see http://code.google.com/p/galleria/).

Setting up the files

When you download and link the JavaScript files and stylesheet to a web page, makesure the files are properly linked For example, if you place the JavaScript and stylesheet

in separate folder locations, make sure the code reflects their locations:

<script type="text/javascript" src="/_assets/js/prototype.js"></script>

<script type="text/javascript" src="/_assets/js/scriptaculous.js?load=effects">

</script>

<script type="text/javascript" src="/_assets/js/lightbox.js"></script>

<link rel="stylesheet" href="/_assets/css/lightbox.css"

type="text/css" media="screen" />

In the lightbox JavaScript file, also make sure the locations of the images are correct

If you need to edit the locations of the images, look toward the top of the JavaScriptfile for the following lines to modify:

var fileLoadingImage = "/_assets/img/loading.gif";

var fileBottomNavCloseImage = "/_assets/img/closelabel.gif";

The stylesheet for the lightbox utilizes the background image property three times Makesure those images referenced in the properties are also set to the correct locations:

#prevLink, #nextLink { width: 49%;

height: 100%;

/* Trick IE into showing hover */

background: transparent url(/_assets/img/blank.gif) no-repeat;

In addition to showcasing one image at a time, you can set up the lightbox to display

a slideshow, as shown in Figure 5-19

To achieve this effect, modify the value of the rel element by using right-angle bracketsafter lightbox and inserting a gallery name In the code example, I used the gallery nameaustin because I took the pictures in Austin, Texas:

<ul>

<li><a href="trammell_shoes.jpg" rel="lightbox[austin]"

title="Trammell shows off his happy shoes."><img src="trammell_shoes_tn.jpg"

alt="Mark Trammel is happy with his shoes." /></a></li>

<li><a href="molly_andy.jpg" rel="lightbox[austin]" title="Molly and

Andy pose for a shot."><img src="molly_andy_tn.jpg" alt="Molly and Andy pose for a shot." /></a></li>

<li><a href="msjen.jpg" rel="lightbox[austin]" title="Ms Jen at

breakfast."><img src="msjen_tn.jpg" alt="Ms Jen at breakfast." /></a></li>

</ul>

Figure 5-19 The lightbox displaying a slideshow of images

The gallery name needs to be the same for related images to be put into the sameslideshow presentation

Known browser issues

Since the lightbox effect is built on the Prototype Framework, the lightbox effect’ssupport in browsers is based on how many browsers Prototype supports As of thiswriting, the following browsers support Prototype:

• Microsoft Internet Explorer for Windows 6 and later

• Firefox 1.0 and later

• Safari 1.2 and later

• Opera 9.25 and later

• ChromeThe lightbox effect degrades gracefully If a visitor’s browser does not support thelightbox effect, the browser will follow the value of the href attribute:

<a href="trammell_shoes.jpg" rel="lightbox" title="Trammell shows off

his happy shoes."><img src="trammell_shoes_tn.jpg" alt="Mark Trammel

is happy with his shoes." /></a>

In this example, the browser pulls up the file trammell_shoes.jpg.

The value of .4 for the opacity property means the element is 40% opaque A value of

0 means the element is invisible, whereas a value of 1 means there is no transparency.The proprietary property for Internet Explorer, filter, needs to be set with a valuethat’s equal to the percentage of the transparency The value of opacity for an alphafilter ranges between 0 and 100 A value of 0 means the element is invisible and a value

of 100 means there is no transparency

Opacity changes everything contained in the block-level element, whereas setting the opacity with RGBA (see Recipe 5.10) changes the opacity of the element itself.

A drawback to using the opacity filter is that the value is inherited If a parent element is set to be 10% transparent, the child elements’ trans- parency is also going to be 10% Watch out for legibility issues within the web page.

Figure 5-20 Implementing transparency on the number 4 and the box

See Also

The CSS3 specification for the opacity property at http://www.w3.org/TR/css3-color/

#transparency; Recipe 5.10 for setting the opacity of an element’s background color;Recipe 4.14 for setting the browser to render images

5.10 Adjusting the Opacity of Background Colors Problem

You want to set the opacity of an element’s background color

Solution

Set the transparency of an element’s background color using the RGBA value, as shown

in Figure 5-21:

#number4 { background-color: rgba(255, 255, 0, 4);

}

Figure 5-21 A transparent background color

Firefox 3 and later, Opera 10 and later, and Safari support RGBA for setting the ground color along with a transparent value When working in cross-browser devel-opment, set the background-color property first with traditional color coding (RGB,hexadecimal, etc.), and then use another background-color property beneath it with avalue set in RGBA:

back-#number4 { background-color: rgb(255, 255, 0);

background-color: rgba(255, 255, 0, 4);

}

This allows browsers such as Internet Explorer and Firefox 2 to at least render thebackground color, while Firefox 3, Opera 10 and later, and Safari users see thetransparency Another tactic is to not use color values, but instead use a small, tiledPNG image processed through a digital imaging program such as Adobe Photoshop orAdobe Fireworks set through the background-image property For more information onthis technique, see Recipe 4.5

Supporting Internet Explorer

Through the use of the gradient filter property available in Internet Explorer 5.5 andlater, it’s possible to create transparency on a background color

The first step is to convert the RGB value of the color to hexadecimal In this example,rgb(255,255,0) converts to #FFFF00

Next, convert the alpha transparency value to a hexadecimal string (see Table 5-1) Inthis example, the value is 66

Table 5-1 Alpha conversion table

Alpha value Hexadecimal value

Then assemble the hexadecimal value for transparency and color together in one string,starting with the transparency: #66FFFF00.

Create a separate CSS rule for the element, setting the color of the background to avalue of transparent:

#number4 { background-color: transparent;

}

Then, using the filter gradient property use the transparency and color hexadecimalstring:

#number4 { background-color: transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFF00, endColorstr=#66FFFF00);

}

Since this is a gradient, you could assign a color change from one value to another.However, you have found a new use for this proprietary filter With both the startingand ending colors remaining the same along with the transparency value, a cross-browser transparent color is achieved

Next, add the zoom property set to a value of 1 to instruct IE to render the effect or toshow that the element “hasLayout” (as shown in Figure 5-22):

#number4 { background-color: transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFF00, endColorstr=#66FFFF00);

zoom: 1;

}

The concept of hasLayout is unique to versions of Internet Explorer 7 and earlier Some elements behave differently depending on whether they have “layout.”

To fix these issues, the property is triggered through some CSS selectors, one of them being the zoom property The use of zoom to enact hasLayout is unique to IE and is promptly ignored by other browsers.

For some CSS solutions, you will find zoom set to a value of 1 only to get previous versions of IE to render elements so that they have “layout.”

For more information on hasLayout, see http://msdn.microsoft.com/en

-us/library/bb250481(VS.85,loband).aspx.

With this being a CSS rule using a proprietary rule, we can wrap the code with a ditional comment so that only IE browsers process it:

con-<! [if IE]>

<style type="text/css">

#number4 { background-color: transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFF00, endColorstr=#66FFFF00);

In web design, it’s the same case.

HTML lists facilitate the presentation of organized content to your site’s visitors bygrouping key elements together Also, HTML lists are appealing in part because of theway they appear on the page

List items are typically indented and keyed off by a marker, usually by a filled circle for

an unordered list or numbers for an ordered list (see Figure 6-1)

With a few lines of HTML, a web coder can create a bulleted list on a web page withoutopening an image editor With CSS, you can create even more visually compelling lists.With a few simple CSS rules, however, web developers can tailor the presentation ofthat same list to complement the design of a web page instead of relying on the stodgybrowsers’ default styling

This chapter illustrates how to change the numbering of list items, use your own imagefor a list marker, create a hanging indent that doesn’t use a list marker, and more

6.1 Changing the Format of a List Problem

You want to change the default list style—for example, to change the bullet or bering, as shown in Figure 6-2