Principal » blogs » blog do(a) Marcello R Gonçalves

Colunas laterais fixas no CSS Creator

CSS
Enviado por Marcello R Gon... em Qua, 11/01/2006 - 12:23.CSS

Quando geramos um layout com 3 colunas no Css Creator temos um grande problema.
Quando a coluna do meio aumenta muito as laterais não fica na cor que gostariamos que ficasse.

Mas esse tutorial ensina como corrigir isso.

Código CSS gerado pelo CSS Creator
  1. /* generated by csscreator.com */
  2. html, body{
  3.  margin:0;
  4.  padding:0;
  5.  text-align:center;
  6. }
  7.  
  8. #pagewidth{
  9.  width:770px;
  10.  text-align:left; 
  11. margin-left:auto;
  12.  margin-right:auto; 
  13. }
  14.  
  15. #header{
  16.  position:relative;
  17.  height:70px;
  18.   background-color:#7CAC9F;
  19.  width:100%;
  20. }
  21.  
  22. #leftcol{
  23.  width:130px;
  24.  float:left;
  25.  position:relative;
  26.  background-color:#4F7373;
  27.  }
  28.  
  29. #twocols{
  30.  width:640px;
  31.  float:right;
  32.  position:relative;
  33.   }
  34.  
  35. #rightcol{
  36.  width:130px;
  37.  float:right;
  38.  position:relative;
  39.  background-color:#4F7373;
  40.  }
  41.  
  42. #maincol{background-color: #FFFFFF; 
  43.  float: left;
  44.  display:inline;
  45.  position: relative;
  46.  width:510px;
  47.  }
  48.  
  49. #footer{
  50.  height:20px;
  51.   background-color:#7CAC9F;
  52.  clear:both;
  53.  }
  54.  
  55.  
  56.  
  57.  /*Float containers fix:*/
  58.  
  59. .clearfix:after {
  60.  content: ".";
  61.  display: block;
  62. height: 0;
  63.  clear: both;
  64.  visibility: hidden;
  65.  }
  66.  
  67. .clearfix{display: inline-table;}
  68.  
  69. /* Hides from IE-mac \*/
  70. * html .clearfix{height: 1%;}
  71. .clearfix{display: block;}
  72. /* End hide from IE-mac */ 
  73.  
  74.  
  75.  
  76.  /*printer styles*/
  77.  @media print{
  78. /*hide the left column when printing*/
  79. #leftcol{display:none;}
  80.  
  81. /*hide the right column when printing*/
  82. #rightcol{display:none;}
  83. #twocols, #maincol{width:100%; float:none;}
  84. }
  85.  
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
  5. <title>CssCreator-->XHTML 1.0 Strict standard template </title>
  6. <meta http-equiv="Content-Style-Type" content="text/css" />
  7. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  8.  
  9. <meta name="generator" content="www.csscreator.com" />
  10.  
  11. <link rel="stylesheet" href="phpavancado.css" type="text/css" />
  12. </head>
  14. <div id="pagewidth" >
  15.     <div id="header" > Head </div>
  16.             <div id="wrapper" class="clearfix" >
  17.         <div id="twocols" class="clearfix">
  18.             <div id="maincol" >
  19.                 Main Content Column<br>
  20.                 Main Content Column<br>
  21.                 Main Content Column<br>
  22.                 Main Content Column<br>
  23.                 Main Content Column<br>
  24.             </div>
  25.             <div id="rightcol" > right Column </div>
  26.         </div>
  27.             <div id="leftcol" > Left Column </div>
  28. </div>
  29.     <div id="footer" > Footer
  30.     </div>
  31.     </div>
  32. </body>
  33. </html>
  34.  

Veja abaixo como fica as laterais do layout quando a coluna do meio fica maior que as laterais

Vamos a solução:
Cria uma imagem com a mesma largura que você colocou no width #pagewidth do CSS nesse caso usaremos 770px, com 1px de altura, igual a imagem abaixo

Pronto agora vamos mudar o #pagewidth do css, alterar somente isso.

  1. #pagewidth{
  2.     width:770px;
  3.     text-align:left;
  4.     margin-left:auto;
  5.     margin-right:auto;
  6.     background-image: url(fundo.gif);/* caminho da imagem*/
  7.     background-repeat: repeat-y;
  8. }
  9.  

Pronto somente isso, veja como ficou.

blog do(a) Marcello R Gonçalves | adicionar comentário | 3623 visualizações