Tema: Colocar banners laterales
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 14/11/2012, 14:16
pollin14
 
Fecha de Ingreso: marzo-2010
Ubicación: df
Mensajes: 58
Antigüedad: 14 años, 8 meses
Puntos: 5
Respuesta: Colocar banners laterales
Analisis:

La columna principal (donde se muestra el contenido) tiene dos columnas: una a la izquierda (las noticias) y otra a la derecha (el baner). Esta columna tiene un ancho fijo y esta centrada.

La columna de la izquierda (noticias) tiene dos columnas.

El codigo:

Espero que este codigo te sirva para empesar a entender como funciona html junto con css.

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title></title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <style>
  7.             body{
  8.                 background-color:#DADADA;
  9.             }
  10.             
  11.             .center{
  12.                 margin-right:auto;
  13.                 margin-left:auto;
  14.             }
  15.             #izquierda,#derecha{
  16.                 float:left;
  17.             }
  18.             
  19.             #principal{
  20.                 width:530px;
  21.                 min-height:600px;
  22.                 padding:5px;
  23.                 background-color: yellow;
  24.             }
  25.             
  26.             #izquierda{
  27.                 width:400px;
  28.             }
  29.             
  30.             #derecha{
  31.                 width:120px;
  32.                 height:240px;
  33.                 background-image: url('http://sfx-images.mozilla.org/affiliates/Buttons/firefox2/firefox-spread-btn-4.png') ;
  34.                 background-repeat: no-repeat;
  35.             }
  36.             
  37.             #uno{
  38.                 height:200px;
  39.                 background-color: purple;
  40.             }
  41.             
  42.             #dos{
  43.                 height:300px;
  44.                 background-color: brown;
  45.             }
  46.             
  47.             #uno,#dos{
  48.                 width:200px;
  49.                 float:left;
  50.             }
  51.         </style>
  52.     </head>
  53.     <body>
  54.         <div id="principal" class="center">
  55.             <div id="izquierda">
  56.                 <div id="uno"></div>
  57.                 <div id="dos"></div>
  58.                 <div style="clear:both"></div>
  59.             </div>
  60.             <div id="derecha"></div>
  61.         </div>
  62.     </body>
  63. </html>
__________________
Dead Nation