In my previous tutorial "Basic Layout of Nine Palaces", I introduced the method of using relative positioning and absolute positioning to create the basic layout of Nine Palaces. This is a method that is more in line with people's inertial thinking. It seems that everything in the production process is a matter of course. However, because of the disgusting parity BUG of IE6, it has become a bit out of reach for this layout method to be universal, because Most domestic users still use IE6, and we cannot lose these users because of this.
There is currently no cure for this BUG, and there are no hacks that can be used. The only way to use it is to bypass it. In other words, I want to locate the four corner containers of the nine-square grid. The absolute positioning method cannot be used. This is a major blow. It will completely overturn the method used in my previous article. We I had to start anew.
So what other technologies can save this BUG from dire straits? We know that if you use the left and right floating method, you can accurately offset the element object, and this method can also avoid the parity BUG of IE6. OK, let's use it.
Key points and difficulties in layout
We still build the structure of our new model according to the structure of the table, but this time it will be different from the structure of the previous article. The key points and difficulties we need to pay attention to in this model are the following two points:
1. The width values of the two intermediate containers t_m and b_m must be a percentage value, otherwise the left and right dynamic expansion of the entire nine-square grid cannot be guaranteed, and it must not be a fixed pixel value. Its width is equal to the total container width minus the sum of the widths of the two corner containers as a percentage. The calculation formula is:
The width of t_m (or b_m) = (total container width - (upper left corner container width + upper right corner container width)) / total container width
That is to say, the width of t_m or b_m is not 100%. However, the width of the two containers t_l and t_r is generally the width of a picture in actual cases, so it is generally a fixed width value, so that in the same three In a container, the width on the left and right sides is a fixed value, but the middle requires a percentage, and the total width of these three containers should add up to 100%. What should we do?
Here we use a relatively safe method to make the middle container reach the ideal width percentage:
We can use a DIV container and set its padding: 0 10px; do not set its width. By default, its width is 100%. Because the left and right padding values are set, the internal width is the ideal width value of t_m we want, so we define a container inside it, and the width of this sub-container is set to 100%. The background color of this subcontainer can be set to a horizontally tiled background image on the left and right. This subcontainer is the top container we are going to use. It meets our special requirements for width values.
Therefore, the structure of t_m can be made into the following structure:
<div class="top"><span class="t_m"></span></div>
However, this definition will cause another problem. This problem exists in browsers below IE7. Because we define padding, it will also generate left and right inner patches in the middle body layer below. This is a bit unclear. Yes: Why does it affect IE7?
So the remedy is to use a HACK trick here for IE6 and IE7:
.b_l{margin-left:0px;+margin-left:-10px;_margin-left:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}
This sentence sets different offset values for three browsers, and offsets b_l and b_r to the left and right to the specified position.
2. The height values of the two containers b_l and b_r must be the same so that they can tile the background color vertically downwards. In this way, when the height of the content in the middle main content area (context) changes, the background color on both sides can always maintain the same height as the main content area (context). That is to say, they can freely stretch their height according to the height of the content body.
We can use the method of multiple columns with the same height that is often used in daily work to deal with this problem. This method uses a combination of inner patches and negative outer patches to achieve the same height for multiple columns:
.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}
We set the padding-bottom value of the lower inner patch of m_l and m_r to a relatively large value. For example, I set them to 30000px (you can set it to the value you want). I believe that in general, It will not exceed this height value. Then set the lower outer patch (margin-bottom) to the same negative value as the lower inner patch (padding-bottom) value, pull it back to its original position, and set the total container (box) to overflow:hidden;, Cut off the excess height to ensure that the two columns are the same height.
After solving the above two difficult problems, the rest is simple and enjoyable! [Cut-Page]
structural layer
Now we have adjusted the structure layer based on the previous case, so it becomes the following structure:
The following is the quoted content: <div class="box"> <!--Second line—middle content area*/--> <!--Third line—bottom*/--> |
style layer
Here are the main style settings:
The following is the quoted content: /*Total container*/ .box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;} /*Top style*/ /*Intermediate style*/ /*Bottom style*/ |
You can use eight pictures to make a beautiful nine-square grid box. Look how perfect it is.
This model has been tested in the following browsers:
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
The following is the quoted content: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Link to this article: http://www.blueidea.com/tech/web/2009/6805.asp