Tài liệu CSS Cookbook- P7 pptx

So, to ensure cross-browser support within IE versions, make sure you include both sets of properties: .highlight { scrollbar-face-color: #99ccff; scrollbar-shadow-color: #ccccff; scrollbar-highlight-color: #ccccff; scrollbar-3dlight-color: #99ccff; scrollbar-darkshadow-color: #ccccff; scrollbar-track-color: #ccccff; scrollbar-arrow-color: #000033; -ms-scrollbar-face-color: #99ccff; -ms-scrollbar-shadow-color: #ccccff; -ms-scrollbar-highlight-color: #ccccff; -ms-scrollbar-3dlight-color: #99ccff; -ms-scrollbar-darkshadow-color: #ccccff; -ms-scrollbar-track-color: #ccccff; -ms-scrollbar-arrow-color: #000033; } Use conditional comments (see Recipe 12.7) to pinpoint CSS rules to a specific version of IE. The Safari browser also has proprietary CSS rules for colorizing a scroll bar. For more information, see http://webkit.org/blog/363/styling-scroll bars/. See Also Internet Explorer-specific Functionality at http://msdn.microsoft.com/en-us/library/ cc304082(VS.85,loband).aspx#ie_specific; the “IE Colour scrollbar maker” at http:// www.sean.co.uk/a/webdesign/color_scrollbar_maker_ie.shtm 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. Solution To center text in a block-level element, use the text-align property: h1, h2, h3 { text-align: center; } 5.4 Techniques for Centering Elements on a Web Page | 275 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 5-8. The headline text centered Discussion By using text-align, you can center text inside block-level elements. However, in this example, the heading takes up the entire width of the body element, and if you don’t apply 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 centered elements. Figure 5-9. The actual width of the elements shown by the gray background color 276 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. An alternative approach is to use margins to center text within its container: h1, h2, h3 { margin-left: auto; margin-right: auto; width: 300px; } When you set the margin-left and margin-right properties to auto (along with a value for the width property), you center the element inside its parent element. Tables To center a table, set a class attribute with a value: <div class="center"> <table> <tr> <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> </tr> </table> </div> Then write the following CSS rule: .center { width: 50%; margin-left: auto; margin-right: auto; } Images If you want to center an image, wrap a div element around the img element first. This technique is required because an img element, like em and strong, is inline. It rests in the flow of the web page instead of marking off space like the p or blockquote block- level elements do. The markup looks like this: <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%. 5.4 Techniques for Centering Elements on a Web Page | 277 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Then determine half of the width of the element you are centering and set it as a negative value in the margin-left property. That prevents the element’s left side from resting on the 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 */ margin-left: −138px; } Figure 5-10. The image centered without the deprecated center element Vertical centering With the element centered horizontally, you can take this technique one step further and center the image (or any other element) vertically as well. The difference with this method is that it uses the position property to make this work. The markup is the same as that used for the image element in the previous example, but this time the CSS rule is for just one selector (see Figure 5-11): img { position: absolute; top: 50%; left: 50%; margin-top: −96px; margin-left: −138px; height: 192px; width: 256px; } 278 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 normal flow 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 the top margin to compensate for the additional elements on the page: #centerFrame { position: absolute; top: 50%; left: 50%; /* adjust negative value until content is centered */ margin-top: −150px; margin-left: −138px; width: 256px; } Keep the amount of content that you want centered short. This Solution is going to only roughly center the text and the images because the text will render at different heights on different computers. 5.4 Techniques for Centering Elements on a Web Page | 279 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. If you have numerous images and large amounts of HTML text, users with low reso- lutions will have to scroll the page to see your centered content. See Also Chapter 10 for information on multicolumn layouts, which deal with the position of elements in a web page 5.5 Placing a Page Border Problem 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; } 280 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Discussion The border property is a shorthand property, in that it enables you to set the width, color, and style of the border around an element in one step instead of three. If you didn’t use this shorthand property in the preceding Solution, you would have to replace the line that reads border: 50px #666 ridge; with the following three lines: border-width: 50px; border-color: #666; border-style: ridge; You can create a framing effect with other styles as well, such as dotted, dashed, solid, double, groove, inset, and outset (see Figure 5-13). 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. 5.5 Placing a Page Border | 281 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. The only browser incompatibilities to worry about are that in Internet Explorer for Windows the dotted style appears as aliased circles, whereas in Firefox, Opera, and Safari the dotted style appears as blocks. Borders on images You also can place a stylized border on images (see Recipe 4.2). Instead of having a default solid line, try experimenting in your designs with grooved or double borders, as shown in Figure 5-14: img.left { float: left; margin-right: 7px; margin-bottom: 3px; border: 4px double #666; } Figure 5-14. A double border around an image See Also Recipe 3.21 for creating pull quotes with different border styles 282 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 5.6 Placing a Border Around the Browser’s Viewport Problem You want to place a border around the viewport of the browser. Solution First set up a series of eight div elements that are placed beneath the content of the web page, but right before the closing body element: <div id="top"></div> <div id="topright"></div> <div id="right"></div> <div id="bottomright"></div> <div id="bottom"></div> <div id="bottomleft"></div> <div id="left"></div> <div id="topleft"></div> Set the corners of the frame to have the same width and height and set the position to fixed: #topleft, #topright, #bottomleft, #bottomright { height: 24px; width: 24px; position: fixed; display: block; z-index: 20; } Set the borders to a fixed position. Also, set the top and bottom sides to a height of 24 pixels and the left and right sides to a width of 24 pixels: #top, #bottom { height: 24px; position: fixed; left: 0; right: 0; display: block; background-color: #ccff00; z-index: 30 } #left, #right { width: 24px; position: fixed; top: 0; bottom: 0; display: block; background-color: #ccff00; z-index: 50; } 5.6 Placing a Border Around the Browser’s Viewport | 283 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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; right: 0; } Discussion A character of this recipe’s approach is that the border expands to the height of the content within the body element. To have a border or framing device that is visible around the entire viewport at all times, no matter the length of content, use fixed positioning (see Recipe 4.10). 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’s viewport. See Also The CSS2 specification for fixed positioning at http://www.w3.org/TR/CSS2/visuren .html#fixed-positioning 284 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... problem, set the left margin or left padding of the ul to at least 1 em See Also Recipe 6.11 for creating hanging indents; the CSS 2.1 specification for padding at http: //www.w3.org/TR /CSS2 1/box.html#propdef-padding; the CSS 2.1 specification for margin at http://www.w3.org/TR /CSS2 1/box.html#propdef-margin 6.4 Placing Dividers Between List Items Problem You want to create list dividers between list items... type="text/javascript" src="/_assets/js/scriptaculous.js?load=effects"> 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... mixture of CSS properties on the hr element to obtain the desired effect: hr { border: 0; height: 43px; background-image: url(hr.gif); background-position: 50% 0; background-repeat: no-repeat; margin: 66em 0; } 5.7 Customizing a Horizontal Rule | 285 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark  hr... (the browser-generated list marker and the manually inserted text marker) if CSS is turned off in the browser and the user sees only the content Although this isn’t a critical problem, it adds an unneeded design element to the web page See Also The CSS 2.1 specification for escaping characters at http://www.w3.org/TR/REC -CSS2 / syndata.html#escaped-characters 6.6 Creating Custom Image Markers for Lists... legibility issues within the web page 5.9 Changing the Opacity on Elements | 293 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 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... 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... 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 conditional comment so that only IE browsers process it: 296 | Chapter 5: Page Elements Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark  #number4 { background-color: transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFF00,... 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 without opening 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 of that same list to complement the design of a web page instead of relying on the stodgy browsers’ default... src="prototype.js"> Within the web page content, include a link to an image, making sure to include a rel attribute with a value of lightbox A common link example would be to wrap a link around... li:before { content: ">> "; } However, for embedding special characters, the CSS 2.1 specification calls for Unicode (ISO 10646) values So, you need to write out the character in its escaped Unicode hexadecimal equivalent and not the usual HTML4 entities such as » (see http:// www.alanwood.net/demos/ansi.html) You escape values in CSS by inserting a backslash before each Unicode hexadecimal value: li:before . src="/_assets/js/lightbox.js"></script> <link rel="stylesheet" href="/_assets /css/ lightbox .css& quot; type="text /css& quot; media="screen" /> In the lightbox. edges of the browser’s viewport. See Also The CSS2 specification for fixed positioning at http://www.w3.org/TR /CSS2 /visuren .html#fixed-positioning 284 |