Markup Language-CSS layout _ HTML/Xhtml _ webpage Creation

Click here to return to the webpage tutorial HTML section. Click here to view the CSS tutorial. Above: Markup Language-Print Style. So far, the chapter 12 CSS layout is mainly about the internal elements of the page, that is, the content. But what about the large structure? For a long time, designers have relied on tables for column-based layout, and often nested in tables, Chapter 12 CSS layout. This book ends with a discussion of the internal elements of the page, that is, the content, but what should we do with a large structure? Designers have been relying on tables for column layout for a long time. They often nest the table and click here to return to the script home HTML tutorial section. To view the CSS tutorial, click here.
Above: Markup Language-Print Style. Chapter 12 CSS layout
So far, this book mainly discusses the internal elements of the page, that is, the content. But what should we do with the large structure? For a long time, designers rely on tables for column-based layout. They often nest other tables in tables to achieve the correct interval and visual effect. these huge typographical contents are not only slow to download, but also cost-effective to maintain, not to mention text browsers, screen readers, and small screen devices.
In this chapter, we will use four common practices and combine CSS with the structured markup syntax to create two-column la S. soon, we will find that, without nested tables, the interval GIF can also make the layout of the partition layout.
Later in "tip extension", we will discuss the problem of the Windows Internet Explorer 5.0 box model and how to bypass it. we will also share a simple secret to achieve an equal-width column with CSS.
# P # How do I use CSS to layout two columns?
The answer is there are several methods. To help you get started and understand the differences between the two common methods (floating and positioning), focus on four different methods first, in each method, two columns can be created, with both the header and the end of the page.
My wish is: You can use this chapter as a guide to build a website and use the methods in other chapters of this book to create content.
The four methods we will discuss are applied toAndBetween tags. At the same time, I will introduce the tag syntax structure that will be used before discussing each method.
To help you understand the Page Structure of each method, let's take a rough look at what else needs to be added:

Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>


CSS Layouts



... Method demonstration...

For more information about the layout, see 2-1. This is the layout we want to complete.
# P # method A: Floating sidebar

P id = "header">
... Page header section...

... Sidebar section...

... Subject section...

... Footer section...

The above is the tag source code that we want to use the float attribute of CSS to make a column layout.

The tag divides the page element into several logical sections, each with a unique id: # header: including the title image, navigation bar, etc. # sidebar: contains additional content links and Related Information # content: contains the main text content, which is also the focus of the page. # footer: Includes copyright information, author, secondary link, etc.
Splitting these page sections allows us to completely control the layout. By specifying several CSS rules, we can complete the layout of the two columns immediately.
The first step to transform the content structure into a column layout is to add a background color and a patch to the header and end of the page, so that the content can be easily highlighted.

# Header {
Padding: 20px;
Background: # ccc;
}
# Footer {
Padding: 20px;
Background: # eee;
}

Adding the preceding CSS to the structure of method A will display it as 2-2. I added some hypothetical content to each section.
Of course, in # header and # footer, you can continue to specify appropriate styles for these paragraphs, such as font-family, color, and link color. now let's create two columns. floating sidebar
The essence of method A is that it uses the float attribute to put # sidebar into the main content.

In this example, place it on the right side of the content, but put it on the other side.
Floating # The Key to sidebar is that it must appear in the main content in the source code.

In this way, the top of the sidebar will be aligned with the top of the main content.
Next, add the float attribute to # sidebar, set its width to 30%, and specify the background color:

# Header {
Padding: 20px;
Background: # ccc;
}
# Sidebar {
Float: right;
Width: 30%;
Background: #999;
}
# Footer {
Padding: 20px;
Background: # eee;
}

2-3 is the display effect after adding this section of CSS. You can see that the sidebar is running to the right, and the main content flows within the sidebar range.
2-3 move # sidebar to the real column on the right of the main content
Let's take a look at 2-3. We haven't actually completed the layout of the two columns. To achieve this effect, we must also take the # content

, Specify the right outer patch with the same width as the sidebar, so the space for placing # sidebar is generated.
The CSS to be added is so simple:

# Header {
Padding: 20px;
Background: # ccc;
}
# Sidebar {
Float: right;
Width: 30%;
Background: #999;
}
# Content {
Margin-right: 34%;
}
# Footer {
Clear: right;
Padding: 20px;
Background: # eee;
}

We will find that the size of the right outer patch we set for the content is 4% larger than that of # sidebar, so that we can leave a blank space between the two columns. 2-4 is the browser view effect, you can find that as long

Set the right outer patch to create the illusion of the second column.
# P # Method B: Double Floating

... Header content here...

... Main content here...

... Sidebar content here...

... Footer content here...

One of the disadvantages of method A is that to float the sidebar, you must put the sidebar in the main content within the source code.

Close the CSS browser, text browser, screen reader and other devices that do not support CSS will display (or read out) the content in the sidebar before the main content of the page. this is not rigorous.
We can use float to avoid this problem, as long as the main content in the source code is exchanged

Position (as shown above), and then use CSS to float the two to different edges.

# Header {
Padding: 20px;
Background: # ccc;
}
# Content {
Float: left;
Width: 66%;
}
# Sidebar {
Float: right;
Width: 30%;
Background: #999;
}
# Footer {
Clear: both;
Padding: 20px;
Background: # eee;
}

By

By floating in different directions, you can arrange the source code in the most appropriate way (the main content is placed in front of the sidebar), and still get the effect of 2-4 to avoid both sides.
Similarly, you must set the # footerdeclear attribute to both, so that no matter how long the two columns are, the end of the page is always displayed at the end, and the content sequence of the tag source code is improved.
# P # method C: Floating Main Content

... Page header content...

... Main content...

... Sidebar...

... Content at the end of the page...

There is also a method worth mentioning, you only need to use a float attribute, while marking the source code can still

Before the sidebar.
You only need

Float to the left side and set a width less than 100% for it, so that you can leave enough space on the right side of the sidebar. CSS content
The CSS content required by method C is no longer as simple as "a float attribute", the Desired width of the content area, and the small boundary left between the two columns.

# Header {
Padding: 20px;
Background: # ccc;
}
# Content {
Float: left;
Width: 66%;
}
# Sidebar {
Background: #999;
}
# Footer {
Clear: left;
Padding: 20px;
Background: # eee;
}

Note that we do not need to define the width of the sidebar because it will automatically fill the main content

Use the rest of the space (34% in this example). Miserable background
2-5 is the result of viewing in a browser! In some common browsers, the background color of the sidebar appears under the main content area. Because the sidebar does not have a specified width, it is as wide as the browser window.
# P # method D: positioning

... Top content...

... Main content...

... Sidebar...

... Footer content...

Method d is to use the same tag source code structure and then arrange it in the most efficient way

: Put the main content in front of the sidebar, close the style browser, the screen reader will first receive the main content, and then receive the sidebar, when positioning, the order in the source code is not related to the position where the page elements appear. predictable height
The CSS content is similar to the first three methods. The first difference is the pixel height specified for the header. We need to be able to predict the height so that we can locate the sidebar later.
A number is randomly selected here, which needs to be adjusted according to the content used on the top, such as the logo, navigation bar, and search form.

# Header {
Height: 40px;
Background: # ccc;
}
# Footer {
Padding: 20px;
Background: # eee;
}

Leave space for each column
Next, we need to set it to # content

Set the right outer patch, just like the previous methods, which can leave space for the right sidebar. Later, we will use the absolute positioning method (not floating) to put the right sidebar.

# Header {
Height: 40px;
Background: # ccc;
}
# Content {
Margin-right: 34%;
}
# Footer {
Padding: 20px;
Background: # eee;
}

Put in sidebar
Finally, use the absolute positioning method to set # sidebar

In the # content boundary, you must remove the preset boundary added by the browser around the page, so that the positioning coordinates will be consistent in all browsers.

Body {
Margin: 0;
Padding: 0;
}
# Header {
Height: 40px;
Background: # ccc;
}
# Content {
Margin-right: 34%;
}
# Sidebar {
Position: absolute;
Top: 40px;
Right: 0;
Width: 30%;
Background: #999;
}
# Footer {
Padding: 20px;
Background: # eee;
}

After specifying position: absolute, You can accurately place # sidebar in the top and right coordinates to the desired position (2-7 ).
We described "put the # sidebar

Place it at a position of 40 pixels on the edge of the browser window and 0 pixels on the right edge. "In addition, you can also use bottom and left to specify coordinates.
When floating the column by the previous method, you can use the clear attribute to ensure that the width of the end of the page spans the entire browser window, without being affected by the main content and the length of the sidebar.
When positioning, the document stream in the sidebar is independent of the entire page, so as long as the sidebar is longer than the content, it will cover the end of the page. (2-8)
# P # threesome
What should I do if I want to make a three-column layout? No problem, and it is easy to add when using absolute positioning. You only need to add the left outer patch to the main content, and the size is enough to accommodate the third column.
Another sidebar can be placed anywhere in the source code, because it will need to be placed again with absolute positioning.
Assume that the second sidebar is added and it is named # sidecolumn. Then, the CSS section below gives it an empty position and puts it in.

Body {
Margin: 0;
Padding: 0;
}
# Header {
Height: 40px;
Background: # ccc;
}
# Content {
Margin-right: 24%;
Margin-left: 24%;
}
# Sidecolumn {
Position: absolute;
Top: 40px;
Left: 0;
Width: 20%;
Background: #999;
}
# Sidebar {
Position: absolute;
Top: 40px;
Right: 0;
Width: 20%;
Background: #999;
}
# Footer {
Margin-right: 24%;
Margin-left: 24%;
Padding: 20px;
Background: # eee;
}

The content just completed is in the main content. The left outer patch (avoid overlap) is blank at the end of the page. Like the previous step in the right sidebar, the new # sidecolumn is placed in the absolute positioning method, place it at a position of 40 pixels from the top edge and 0 pixels from the left edge.
Have you noticed that we slightly corrected the width to accommodate the third column? As we use percentages, this layout scales with the browser width, or you can specify the pixel width for any column to fix the layout width.
2-10 is to use a browser to view the effect of this example, a flexible three-column layout with CSS absolute positioning.
# P # Induction
In this chapter, we have studied the effect of CSS layout planning. The purpose of this chapter is to provide the basis for your use. Therefore, we have demonstrated two main practices: Floating and positioning.
I hope you can continue to explore CSS layout techniques, remove nested tables on the page, and replace the flexible structured markup syntax that can be read by more browsers and devices.
If you want to know