Website DIV + css elasticity + fixed width layout Case Study

Today, the user's display is getting bigger and bigger, and the previous 1024*768 fixed width layout is a little more out of date. For large screen users, the blank white spaces on both sides give people the first impression of serious screen waste. As a web designer, you have the responsibility to give this group of users a good user interface.

Of course, in order to reduce the waste of such screens, the use of elastic fluid layout is the best solution, it can make full use of the screen space, no matter how high your resolution users can fully display the content. However, due to various restrictions, the current web pages are completely fluid-based and flexible layout conditions are not available yet (especially the browser vendors are arrogant about the Standard and CSS standards are not fully supported ). As a person between users and vendors, we can only adapt to the gaps with a compatible mindset. Therefore, as a transitional solution, we have such a layout: elasticity + fixed width layout.

Elasticity refers to the adaptive screen width of the background, while the fixed width enables the body content to be automatically centered in either a wide screen or a narrow screen. To meet the needs of users with different sizes and resolutions. The design shown in is a typical example.

 

To put it bluntly, let's get down to the truth and make a layout structure like this:

First, construct the structural layer:

<Div id = "wrapper">
<Div id = "Main" class = "Clearfix">
<Div id = "Header">
<Div id = "inheader"> </div>
</Div>
<Div id = "content"> </div>
</Div>
</Div>
<Div id = "footer">
<Div id = "infoot"> </div>
</Div>

Analyze the structure layer. A webpage generally consists of three parts: the page header, content area, and footer. We place the page header and content on a container layer named wrapper and separate the footer, the name is footer. Why should we design it like this? We want this footer to stay at the bottom when the content area is less than a screen. For specific implementation principles, refer to this article: CSS Sticky Footer: the absolute bottom of perfect CSS.

We set the wrapper and footer containers to 100% in width so that they can automatically adapt to the screen width. The header area of the header page is also set to 100% width. In this way, We can insert a horizontally tiled image in the header and footer of the page so that the background of the page header and footer can be horizontally filled with the entire screen space on the big screen.

As the body content, we generally choose to center the resolution and leave blank spaces on both sides when the resolution increases. Because the page header area has been set to 100% width, we add a container layer inheader in the header, which serves as the carrier of the real page header text content, we will set a fixed width value for it, for example, 960 pixels wide, and then let it automatically center.

# Inheader {width: 960px; height: 110px; margin: 0 auto ;}

In this way, the content of the page header is floating on the upper layer of the haeader. Different Background images can be set on these two layers to form an overlay page header effect, which can automatically adapt to larger screen resolutions.

In the same way, footer can also be implemented in this way.

In the above structure layer, I did not use this method in the intermediate content area, but made some changes. We can see that in the content area, there is no embedded container, but only one container. What should we do if we want to make the two sides of the body look like a space hole in the lower sides of the body at a high resolution? Of course, you can use the page header and footer, add a div to its content. Of course, we can adopt a work und to reduce nesting. We can add a large image to the background of the body and use background-position to center the image so that the image on both sides of the content area is displayed.

This blog is a specific case. Let's look at the pictures on both sides of this blog at a high resolution level, and then zoom out the window. Then we can see that the pictures on both sides show only a small piece at 1024*768, the body content is always centered.

To demonstrate the effect, we add some other color settings. The final style is as follows:

* {Margin: 0; padding: 0 ;}
Html, body, # wrapper {height: 100%; font-size: 12px ;}
# Wrapper {width: 100%; background: #777 ;}
Body> # wrapper {height: auto; min-height: 100% ;}
# Main {padding-bottom: 54px; min-width: 960px;}/* must use the same height as footer, and add JS in ie6 to Solve the Problem */
# Header {text-align: center; color: # fff; background: #333 ;}
# Inheader {width: 960px; height: 110px; line-height: 110px; margin: 0 auto; background: # CC9933 ;}
H3 {font-size: 14px; line-height: 50px ;}
# Inheader p {font-size: 12px; line-height: 30px ;}
# Footer {
Position: relative;
Margin-top:-54px;/* negative value of footer height */
Height: 54px;/* footer height */
Width: 100%;
Min-width: 960px;/* JS solution in ie6 with the minimum width */
Clear: both;
Background: #666;
Text-align: center;
Color: # fff;
}
# Infoot {height: 54px; line-height: 54px; width: 960px; margin: 0 auto; background: # CC9966 ;}
# Footer p {line-height: 26px ;}
# Content {background: #999; width: 960px; margin: 0 auto; height: 692px ;}
# Content p {line-height: 30px; padding: 0 30px; color: # fff ;}
/* Note: the padding value of # main, the height of footer, and the negative margin value must be consistent. Below is the famous omnipotent float closed Clearfix Hack */
. Clearfix: after {
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden ;}
. Clearfix {display: inline-block ;}
/* Hides from IE-mac \*/
* Html. clearfix {height: 1% ;}
. Clearfix {display: block ;}
/* End hide from IE-mac */

Test demo:

[Code]

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> elastic + fixed-width layout design </title>
<Link href = "css/main.css" rel = "stylesheet" type = "text/css"/>
<Style type = "text/css">
/* In this example, a footer container that is always fixed to the footer is used. This layer is independent from the main content area .*/
* {Margin: 0; padding: 0 ;}
HTML, body, # wrapper {Height: 100%; font-size: 12px ;}
# Wrapper {width: 100%; Background: #777 ;}
Body> # wrapper {Height: auto; Min-Height: 100% ;}
# Main {padding-bottom: 54px; Min-width: 960px;}/* must use the same height as footer, and add Js in IE6 to Solve the Problem */
# Header {text-align: center; color: # FFF; Background: #333 ;}
# Inheader {width: 960px; Height: 110px; line-Height: 110px; margin: 0 auto; Background: # cc9933 ;}
H3 {font-size: 14px; line-Height: 50px ;}
# Inheader P {font-size: 12px; line-Height: 30px ;}
# Footer {
Position: relative;
Margin-top:-54px;/* negative value of footer height */
Height: 54px;/* footer height */
Width: 100%;
Min-width: 960px;/* js solution in IE6 with the minimum width */
Clear: both;
Background: #666;
Text-align: center;
Color: # fff;
}
# Infoot {height: 54px; line-height: 54px; width: 960px; margin: 0 auto; background: # CC9966 ;}
# Footer p {line-height: 26px ;}
# Content {background: #999; width: 960px; margin: 0 auto; height: 692px ;}
# Content p {line-height: 30px; padding: 0 30px; color: # fff ;}
/* Note: the padding value of # main, the height of footer, and the negative margin value must be consistent. Below is the famous omnipotent float closed Clearfix Hack */
. Clearfix: after {
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden ;}
. Clearfix {display: inline-block ;}
/* Hides from IE-mac \*/
* Html. clearfix {height: 1% ;}
. Clearfix {display: block ;}
/* End hide from IE-mac */
</Style>
</Head>
<Body>
<Div id = "wrapper">
<Div id = "main" class = "clearfix">
<Div id = "header">
<Div id = "inheader">
<H3> elastic + fixed-width layout design (for wide screen and large background layout) <P> the page header background can be tiled across the browser width, while the body content is always centered, regardless of the resolution. </P>
</Div>
</Div>
<Div id = "content">
<P> & nbsp; </p>
<P> the background of the body content can be tiled across the browser width. You can add a large background image to the body and set the image to center. The body content is always centered, regardless of the resolution. When the resolution is over 1024, an image will appear on both sides of the body, so that the content area of the wide screen is not empty. </P>
</Div>
</Div>
</Div>
<Div id = "footer">
<Div id = "infoot">
<P> I am a floating DIV that is always fixed at the bottom. no matter whether the height of the text in the middle is not enough, I can still display it at the bottom. </p>
<P> when the middle content exceeds one screen, I can float down again </p>
</Div>
</Div>
</Body>
</Html>

[/Code]