Beauty of negative values: application of negative values in page layout

Negative Numbers always give people a sense of Negative, negative, and rejection. However, if you see negative numbers in your life, you will also be pleasantly surprised. That is, you will see the credit card bill sent by the bank to you, when accounts payable for this month is negative, the larger the negative value, the better. Well, I don't want to talk about it. Today, the negative values of a table are applied in the page layout.

1. negative margin + positioning: center horizontally and vertically

Use absolute positioning to locate the content point to the center of the body, and then use negative margin (half of the content width and height) to pull the content center back to the center of the body, the result has been horizontally and vertically centered.

 
. Content {width: 550px; Height: 400px; position: absolute; top: 50%; left: 50%; margin-left:-275px; margin-top:-210px; Border: 1px dashed #333; Background: # Eee;-moz-border-radius: 5px;-WebKit-border-radius: 5px; border-radius: 5px; padding: 10px ;}
 

Click demo 2. Remove the right margin of the List

A floating list is usually used to display information in a project. For the sake of appearance, a certain margin (margin-right) is usually set between each list. When the width of the parent element is fixed, the right margin of the Li element on the rightmost side of each row is redundant. The removal method is usually to add a class for the Li element on the rightmost side.Margin-Right: 0;This method needs to dynamically determine which Li elements to add class, which is troublesome !!! Using negative margin, you can achieve the following effect:

HTML Structure

<Div> <ul> <li>  </LI> <li>  </LI> <li>  </LI> <li>  </LI> <li>  </LI> <li>  </LI> <li>  </LI> <li>  </LI> <li>  </LI> <li>  </LI> </ul> </div>

CSS

 
. List_wrap {width: 640px; overflow: hidden; Background: # CCC ;}. list_wrap ul {margin-Right:-30px; overflow: hidden; ZOOM: 1 ;}. list_wrap ul Li {float: Left; width: 120px; Height: 120px; margin: 0 10px 10px 0 ;}. list_wrap ul Li IMG {width: 120px; Height: 120px ;}. remove_margin_bottom {margin-top: 30px ;}. remove_margin_bottom ul {margin-bottom:-10px ;}
 

3. Remove the border-bottom of the last Li element in the list.

The border-bottom value is often added to the List. The last border-bottom of Li often overlaps with the outer border, which is visually unsightly and often needs to be removed. The effect is as follows:

There are multiple methods, and the class is removed. This method needs to destroy the HTML structure. Another method is to use the structure pseudo class: Nth-child (An + B) to setA: Last-child {border-bottom: 0 none ;}Unfortunately, our IE6 does not support such an advanced selector. However, we can setMargin-bottom:-1px;But do not set the height for uL/OL. To set the height, nest a DIV in the outer layer.

HTML Structure

<Ul> <li> geographic month imaging later announcement Star Arrow separation delay of 25 seconds </LI> <li> rocket first-level debris falling Guizhou cowl down Jiangxi </LI> <li> China space System traps NASA: when to return to the month is not important </LI> <li> Great Wall now special police on duty Forbidden City tourists exceed the largest capacity National Day topic </LI> <li> In September, the RMB against the dollar rose by 1.74% million, the largest change in foreign exchange in a single month </LI> <li> Wen Jiabao: china will actively participate in the subscription of new Greek Government bonds </LI> <li> Russian President Medvedev intends to log on to the Japan-Russia disputed island next month </LI> <li> Air China merge with the world's largest airline of mainland China Airlines company was born </LI> </ul>
 

CSS

 
Ul. test1 {margin: 20px; width: 390px; Background: # f4f8fc;-moz-border-radius: 3px 3px 3px;-WebKit-border-radius: 3px 3px 3px 3px 3px; border-radius: 3px 3px 3px; Border: 2px solid # d7e2ec;} ul. test1 Li {Height: 25px; line-Height: 25px; padding: 5px; border-bottom: 1px dotted # d5d5d5; margin-bottom:-1px ;}
 

4. Adaptive Layout of negative margins

This example applies to the Adaptive Layout of a column with fixed width and a column with fixed width. Like qqmail, the width of the navigation bar is fixed, and the content area scales automatically with the browser size.

<Div id = "Header"> <H2> # header </H2> </div> <Div id = "Container"> <Div id = "content"> <H2> # content </H2> your content goes here. </div> <Div id = "sidebar"> <H2> # sidebar </H2> <ul> <li> link-1 </LI> <li> link-2 </LI> <li> link-3 </LI> <li> link-4 </LI> <li> link-5 </LI> <li> link-6 </LI> <li> link-7 </LI> <li> link-8 </LI> </ul> </div> <Div id = "footer"> <H2> # footer </H2> </div>
 

We naturally want to use percentages to set the width of an element, but the browser cannot understand expressions such as 100%-PX. Here we need the idea of element nesting and negative margin.

 
# Header {Background: # d7dabd; Height: 60px;} # container {width: 100%; float: Left; margin-Right:-200px;} # Content {Background: # f1f2ea; margin-Right: 200px ;}# sidebar {Background: # e5e7d3; width: 200px; float: Right ;}# footer {Background: # d7dabd; clear: Both; height: 60px ;}
 

5. Google Reader Adaptive Gradient rounded corner button

Now everyone is pursuing purity. Front-end people are pursuing pure CSS, no images, and self-adaptation. The buttons of Google Reader have the above features and the gradient effect. The left and right border of the inner Div uses the negative margin to simulate the rounded corner of 1 pixel, is the effect magnification:

HTML Structure

 
<Div class = "button-outer-box"> <Div class = "button-inner-box"> <Div class = "button-content"> <span> I am pure CSS Adaptive Gradient rounded corner button </span> </div>
 

CSS

 
. Button-outer-box {border-bottom: 1px solid # AAA; border-top: 1px solid # BBB; display: inline-block; cursor: pointer ;}. button-inner-box {Background: # e3e3e3; border-left: 1px solid # BBB; border-Right: 1px solid # AAA; margin: 0-1px; position: relative ;}. button-top-shadow {Background: # f9f9f9; border-bottom: 0.23em solid # Eee; Height: 0.692em; display: block; position: absolute; top: 0; left: 0; right: 0 ;}. button-content {color: #333; line-Height: 1.4em; padding: 0 0.461em; position: relative; text-align: center ;}
 

6. Three columns and height

In this example, the key is to set a large bottom padding for each box, and then use a negative margin with similar values to eliminate this height. This causes each column to overflow the container element. If the overflow attribute of the outsourcing container is set to Den den, the column is cropped at the highest point.

HTML Structure

 
<Div class = "wrapper"> <Div class = "box">  
 
CSS
 

. Wrapper {overflow: hidden; width: 100%; position: relative ;}. box {width: 250px; margin-left: 20px; float: Left; display: inline; padding: 20px; padding-bottom: 220px; margin-bottom:-200px; Background: #89ac10 URL (img/top.gif) No-repeat left top ;}. bottom {position: absolute; bottom: 0; Height: 20px; width: 290px; Background: #89ac10 URL (img/bottom.gif) No-repeat left bottom; margin-left: -20px ;}
 
 
Click demo
 

 
References
------
1. Ryan brill. Creating liquid layouts with negative margins [Eb/Ol]. http://www.alistapart.com/articles/negativemargins/
2. Andy Budd, Simon collison, Cameron Moll. proficient in CSS: advanced Web standard solution [M]. Beijing: People's post and telecommunications press, 2010.5
3. original post address: http://www.topcss.org /? P = 94