Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P7

Tham khảo tài liệu creating cool web sites with html, xhtml and css (2010)- p7, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Creating Cool Web Sites with HTML, XHTML and CSS (2010)- P7 274 Creating Cool Web Sites with HTML, XHTML, and CSS Notice that, in addition to specifying float: left; in the style attribute, I also add a 10 pixel margin around all four sides of the container border and spruce things up with a light-red background (which appears gray in the black and white figure). Technically, #FDF results in a light purple—red + blue = purple—but your color may note vary, as mine does! If you really want purple, try #C9F instead. Figure 12-8 shows the attractive results and should certainly inspire you regarding ways to improve long passages of text! Figure 12-8: Float and container tweaks produce a delightful result. The float: CSS attribute can take three possible values: left, right, or none; you use the last to override the parent float: value if you specify one. Remember that this attribute affects any container, even one that has child containers, so you can use this layout technique with a parent container that includes multiple paragraphs of text, graphics, hyperlinks, or whatever. It still acts as a single unit for any CSS presentation speci fications that you apply at the parent container level. Container Positioning The idea that containers can hold child containers and that you can alter the appearance of the parent through CSS is a cornerstone of advanced Dynamic HyperText Markup Language (DHTML) Web design. It’s also why accurately and precisely positioning the container is so important. In the CSS world, you have four different container-positioning options: absolute, relative, fixed, and static. The good news is that one of these—static—is the default, so you’re already familiar with it. In static positioning, the container lays out as it would if you didn’t specify any positioning, with preceding material appearing on-screen before the container and subsequent material appearing after the container.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 12: Advanced Cascading Style Sheets 275 Absolute positioning Absolute positioning offers a way to specify, pixel by pixel, exactly where the container appears on-screen. You set this positioning through a combination of three CSS attributes. The most obvious is position: with the value absolute, but you also need to specify some combination of the top:, left:, right:, and bottom: values, all of which are relative to the edges of the parent container. Those last few words are so critical, I want to repeat them again: all of which are relative to the edges of the parent container—not relative to the Web page itself. If you specify top: and left:, for example, they’re relative to the top-left corner of the parent container. Here’s an example of how you can use absolute positioning to change the appearance of our working passage from Arthur Conan Doyle’s novel, The Red-Headed League: The stout gentleman half rose from his chair and gave a bob of greeting, with a quick little questioning glance from his small fat-encircled eyes. “Try the settee,” said Holmes, relapsing into his armchair and putting his fingertips together, as was his custom when in judicial moods. “I know, my dear Watson, that you share my love of all that is bizarre and outside the conventions and humdrum routine of everyday life. You have shown your relish for it by the enthusiasm which has prompted you to chronicle, and, if you will excuse my saying so, somewhat to embellish so many of my own little adventures.” Figure 12-9 shows the results. Figure 12-9: Absolute positioning often layers containers atop each other.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 276 Creating Cool Web Sites with HTML, XHTML, and CSS I don’t know about you, but Figure 12-9 gives me a bit of a headache! The good news is that you have a couple of different ways to address the overlapping container problem. The fastest solution is to simply restore the background color so that you can’t see the text of the second paragrap ...