Tham khảo tài liệu 'tự học html và css trong 1 giờ - part 43', công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 396 LESSON 13 Advanced CSS Page Layout in CSS So what s happening here The first rule sets the margin and padding of the body to 0. This is an important first rule for layout because browsers typically add one or the other or both to any web page. The sitenav rules in Listing are used to turn the ordered list of links into a horizontal navigation bar. The main section is set to position relative to become the containing block around the content sidebar and footer sections. The main section is also given a large padding on the right 12em. This is where the sidebar will be located. Absolute positioning is used to move the sidebar into the margin out of its place in the normal flow of content. It is positioned 1 em to the left of the right edge of its containing block main by right 1em and 1 em down from the top edge of the containing block by top 1em. FIGURE Positioning properties define the rough outline of the page. Figure shows the results of linking this style sheet to the HTML file from Listing Th Dunbar Proj It s still quite rough but you can see the different sections moved into place. You should note the silver bars above and below the header. Where did they come from and why Download from Laying Out the Page 397 The silver bars are the result of the background color set on the body showing through. They are formed because of the default margin properties set on the hi and h3 headings used on the page. Remember that margins are outside of the border of an element s box and the background-color property on a box colors only the interior content not the margin. This applies even when you have a div wrapped around a heading such as hl . The margin extends beyond the edge of the div s background-color. To fix this we explicitly set the heading margins to zero on the heading tags. Listing is a style sheet that not only does that but also assigns colors fonts and other styles on the site. The teal purple white and yellow .
