Common examples of CSS layout

Posted by john
2/13/2007
Related Tags:
css manuals  div css layout  css templates  div layout  css layout  layout examples  css Margin  css Padding  css fonts  css hack  css layout Record website  css clear  css spaced  css padding  css middling  css overflow  css tab  css margindiv  css bold  css zen garden  css authoritative guides  css 

  A single one 

  body (margin: 0px; padding: 0px; text-align: center;) 
  # Content (margin-left: auto; margin-right: auto; width: 400px; width: 370px;) 

  Two lines of a 

  Body (margin: 0px; padding: 0px; text-align: center;) 
  # Content-top (margin-left: auto; margin-right: auto; width: 400px; width: 370px;) 
  # Content-end (margin-left: auto; margin-right: auto; width: 400px; width: 370px;) 

  Three lines of a 

  Body (margin: 0px; padding: 0px; text-align: center;) 
  # Content-top (margin-left: auto; margin-right: auto; width: 400px; width: 370px;) 
  # Content-mid (margin-left: auto; margin-right: auto; width: 400px; width: 370px;) 
  # Content-end (margin-left: auto; margin-right: auto; width: 400px; width: 370px;) 

  Two separate two 

  # Bodycenter (width: 700px; margin-right: auto; margin-left: auto; overflow: auto;) 
  # # Dv1 bodycenter (float: left; width: 280px;) 
  # # Dv2 bodycenter (float: right; width: 410px;) 

  Two lines two 

  (# Header width: 700px; margin-right: auto; margin-left: auto; overflow: auto;) 
  # Bodycenter (width: 700px; margin-right: auto; margin-left: auto; overflow: auto;) 
  # # Dv1 bodycenter (float: left; width: 280px;) 
  # # Dv2 bodycenter (float: right; width: 410px;) 

  Three lines 2 

  (# Header width: 700px; margin-right: auto; margin-left: auto;) 
  # Bodycenter (width: 700px; margin-right: auto; margin-left: auto;) 
  # # Dv1 bodycenter (float: left; width: 280px;) 
  # # Dv2 bodycenter (float: right; width: 410px;) 
  # Footer (width: 700px; margin-right: auto; margin-left: auto; overflow: auto;) 

  Three separate 3 absolute positioning 

  # (Left position: absolute; top: 0px; left: 0px; width: 120px;) 
  # Middle (margin: 20px 190px 20px 190px;) 
  # (Right position: absolute; top: 0px; right: 0px; width: 120px;) 

  Float positioning 

  Xhtml: 

  <div Id="warp"> 
  <div Id="column"> 
  <div Id="column1"> here is the first out </ div> 
  <div Id="column2"> here is the second list </ div> 
  <div Class="clear"> </ div> 
  </ Div> 
  <div Id="column3"> here is the third out </ div> 
  <div Class="clear"> </ div> 
  </ Div> 

CSS:

  # Wrap (width: 100%; height: auto;) 
  # Column (float: left; width: 60%;) 
  # Column1 (float: left; width: 30%;) 
  # Column2 (float: right; width: 30%;) 
  # Column3 (float: right; width: 40%;) 
  . Clear (clear: both;) 

  The float position 

  Xhtml: 

  <div Id="center" class="column"> 
  <h1> This is the main content. </ H1> 
  </ Div> 
  <div Id="left" class="column"> 
  <h2> This is the left sidebar. </ H2> 
  </ Div> 
  <div Id="right" class="column"> 
  <h2> This is the right sidebar. </ H2> 
  </ Div> 

CSS:

  Body (margin: 0; padding-left: 200px; padding-right: 190px; min-width: 240px;) 
  . Column (position: relative; float: left;) 
  # (Center width: 100%;) 
  # (Left width: 180px; right: 240px; margin-left: 100%;) 
  # (Right width: 130px; margin-right: 100%;) 

  Two rows of three 

  Xhtml: 

  <div Id="header"> here is the top line </ div> 
  <div Id="warp"> 
  <div Id="column"> 
  <div Id="column1"> here is the first out </ div> 
  <div Id="column2"> here is the second list </ div> 
  <div Class="clear"> </ div> 
  </ Div> 
  <div Id="column3"> here is the third out </ div> 
  <div Class="clear"> </ div> 
  </ Div> 

CSS:

  (# Header width: 100%; height: auto;) 
  # Wrap (width: 100%; height: auto;) 
  # Column (float: left; width: 60%;) 
  # Column1 (float: left; width: 30%;) 
  # Column2 (float: right; width: 30%;) 
  # Column3 (float: right; width: 40%;) 
  . Clear (clear: both;) 

  Three lines 3 

  Xhtml: 

  <div Id="header"> here is the top line </ div> 
  <div Id="warp"> 
  <div Id="column"> 
  <div Id="column1"> here is the first out </ div> 
  <div Id="column2"> here is the second list </ div> 
  <div Class="clear"> </ div> 
  </ Div> 
  <div Id="column3"> here is the third out </ div> 
  <div Class="clear"> </ div> 
  </ Div> 
  <div Id="footer"> here is the Bottom line </ div> 

CSS:

  (# Header width: 100%; height: auto;) 
  # Wrap (width: 100%; height: auto;) 
  # Column (float: left; width: 60%;) 
  # Column1 (float: left; width: 30%;) 
  # Column2 (float: right; width: 30%;) 
  # Column3 (float: right; width: 40%;) 
  . Clear (clear: both;) 
  # Footer (width: 100%; height: auto;) 

  PS: Here is the list of common examples, rather than research purposes, each on a box, I have not set margin, padding, boeder and other attributes, because I personally think that contain Width positioning when using the best bad to them, unless a necessity, because if this is not the case, resolve the browser compatibility problems will let you headaches, but also created a series of css code, I think that the efficiency and effectiveness are not good! 

  High 3.CSS layout skills 

  Margin and Padding always be possible to use, and how to solve the problems?    As explained containers browser width of the different methods: 

  IE 6.0, such as Firefox Opera is true width = width + padding + + margin border 
IE5.X
  True width = width-padding-border-margin 

  Obviously, the first one under the layout is perfect in the second case is very sad consequences! 

  The solution is hack 


  Div.content ( 
  Width: 400px; / / This is the wrong width, all browsers read 
  Voice-family: "\") \ ""; / / IE5.X/win overlooked the "\") \ "" After the contents of 
  Voice-family: inherit; 
  Width: 300px; / / IE6/win, including part of the browser to read this, the new numerical (300 px) cover off the old 
  ) 
  Html> body. Content (/ / html> body is the wording CSS2 
  Width: 300px; / / support CSS2 the wording of the browser (IE5) fortunate enough to read this one 
  ) 

  Div.content ( 
  Width: 300px! Important; / / This is the right width, the majority support! Important marker browser use Numerical here 
  Width (box )/**/: 400 px; / / IE6/win this is not analytical, IE6/win remain of the view that the value of width is 300 px; IE5.X/win read this, the new numerical (400 px ) coverage swap of the old, because! important marker of their non-functional 
  ) 
  Html> body. Content (/ / html> body is the wording CSS2 
  Width: 300px; / / support CSS2 the wording of the browser fortunate enough to read this one 
  ) 

  Click on the link below specific explanation Show 

  Www.blueidea.com/tech/site/2006/3170.asp 
  Www.jluvip.com/blog/article.asp?id=114 

  Out contour skills 

  N n line layout in each column Height (in advance and can not determine which are the height of) the same, each designer is the pursuit of the objective of practice: Background filling, and the methods and JS script overflow containers out of hiding and negative at the end of the Border and padding is the method of combining. 

  Filling of background: 

  Xhtml: 

  <div Id="wrap"> 
  <div Id="column1"> This is the first out </ div> 
  <div Id="column1"> This is the second out </ div> 
  <div Class="clear"> </ div> 
  </ Div> 

  Css: 

  # Wrap (width: 776px; background: url (bg.gif) repeat-y 300px;) 
  # Column1 (float: left; width: 300px;) 
  # Column2 (float: right; width: 476px;) 
  . Clear (clear: both;) 

  Npx that will be a wide one picture in the external vertical containers repeat, positioning two staggered to the location of vertical repeat, in the visual had two on the same high degree of illusion 

  JS script law: 

  Www.blueidea.com/bbs/NewsDetail.asp?id=2453983 
  The Basic principle of the code is the case, read height, a high degree of judgement, a high degree of the same. 

  Overflow containers out of hiding and the negative at the end of the border and padding is a combination of 

  The article states that the very detailed: 

  Www.blueidea.com/tech/web/2006/3210.asp 

  Also: 

  Www.jluvip.com/blog/article.asp?id=151 

  Manping high degree of layout (770 px narrowest width of the 1024 classic layout px) 

  Www.blueidea.com/tech/web/2005/3124.asp 

  Today, two and a Netizen, he said: to a foreign company to do site for 1.800 x600 Manping.    2.1024x767 Manping.    3.1280 under center.    4. Not allowed to use JS. 
  I suddenly thought of this article, You!    It felt incredible things resolved!    But like a problem for IE5 ah! 
  References: http://bbs.blueidea.com/viewthread.php?tid=2506047 


Related articles:

Dongwanglundan CSS style Xiangjie
  " '" For the latter part of the Notes    / * Default style * /    A (text-decoration: none; color: # 000000;)    'Forum text link colors    A: hover (text-decoration: underline; color: # 4455aa;)    'Hover your mous...
Learn more about Anchor marker
  Hyperlink <a> representative of a link labeled, in English anchor (Anchor) initials.    Its role is the current location of the text or picture connected to other pages, such as text or image, which is well known, but on its grammatical structure may be a bit unknown, and its ...
DIV contents of the vertical center
  Vertical center seems to have always been perplexed by the large number of designers Reconstruction, which is CSSPlay site presented a programme.    ====================== CSS =======================    . Holder (    Width: 740px;    Height: 300px;...
Opened phishing crime veil phishing eight steps
  Phishing is able to succeed is by setting a good process, a step-by-step trick audience fooled.    Criminal suspects fraudulent use of the authority of the official website to lure the audience, which is the real deception.    Phishing perpetrators usually have the follow...
Web2.0 two brothers: net extraction and analysis of the mutually beneficial blog
  Blog to a certain extent can pick the network to promote the use of removable and network will also allow more media blog, the media highlight its nature, is the network pick Network Newspaper Editors blog!    Network launched the website to pick many such products, but found that...