Đang chuẩn bị liên kết để tải về tài liệu:
Wrox Professional CSS Cascading Style Sheets for Web Design phần 9

Ví dụ, Safari của Apple đã không có cách nào để lựa chọn phong cách trang thay thế hoặc ưa thích. Và, bạn đoán nó, Internet Explorer (trình duyệt đã biết và yêu mến trên toàn thế giới) sẽ không cho phép người dùng lựa chọn giao diện người dùng thay thế chúng tôi xây dựng cho họ. Nếu trình duyệt phổ biến nhất của thế giới vẫn tiếp tục tính năng này ra khỏi bàn tay của người sử dụng của chúng tôi, sau đó chúng tôi đã làm việc nhiều hơn một chút để làm được nêu ra. | Bringing It All Together Figure 9-20 Selecting the extra color from elsewhere in the design After the color selection I want to move the tagline to be closer to the logo. I do this by applying a negative value to the margin property. Also I want the tagline to be flush to the left of the logo so I apply a left padding value of 15 pixels. Finally I want to spread out the letters in the tagline by setting the value of letter-spacing to 0.3em as shown in Figure 9-21. With the logo all set up it s time to move to the Web page columns. Figure 9-21 The logo with the newly stylized tagline Starting the Two-Column Layout The elements of the header span the entire 800 pixels I allotted for the design. While that s good for branding purposes it s not an efficient use of the space in terms of displaying information. Imagine if everything you read from newspapers to magazines had their articles and photos stacked on top of each other from top to bottom. 343 Chapter 9 It would take a lot longer to scroll down the Web page and it would probably look a lot like what the Web looked like in 1993. I sure don t want to re-create that for my Web site. Thus I need columns actually two columns. Columns in HTML First let s look at the HTML for that s what will be used to define the areas of the two columns in the Web page body div id frame fieldset id searchbox .content goes here. fieldset div id header .content goes here. div div id sidecol .content goes here. div div id maincol .content goes here. div body In this version I decided to have the content for the side column on the right-hand side come first in the HTML while the main content on the left-hand side comes later. Side Column What I want to do to get the side column is to bring the content out of the normal flow of the document. I do this by using the position property and setting the value to absolute. Absolute positioning allows me to take a certain element and put it at a precise point in the Web page. I m talking .