Ver Mensaje Individual
  #3 (permalink)  
Antiguo 29/07/2011, 07:17
mccid
 
Fecha de Ingreso: junio-2011
Mensajes: 8
Antigüedad: 6 años, 11 meses
Puntos: 0
Respuesta: Creando cajas y dandoles estilo

Cita:
Iniciado por andresdzphp Ver Mensaje
Te dejo un ejemplo rápido basado en tu imagen, para que entiendas más o menos como hacerlo.

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ejemplo</title>
  6. <link href="estilos.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <div id="contenedor">
  9. <div id="cabecera">Cabecera</div>    
  10. <div id="slider">Slider</div>  
  11. <div id="sidebar1">Sidebar 1</div>
  12. <div id="contenido">      
  13. <p>Caja 1</p> <p>Caja 2</p> <p>Caja 3</p>    
  14. <p>Caja 4</p> <p>Caja 5</p> <p>Caja 6</p>      
  15. <p>Caja 7</p> <p>Caja 8</p> <p>Caja 9</p>
  16. <p>Caja 10</p> <p>Caja 11</p> <p>Caja 12</p>      
  17. </div>
  18. <div id="sidebar2">SideBar 2</div>
  19. </div>
  20. </body>
  21. </html>

estilos.css

Código CSS:
Ver original
  1. body {
  2.     margin: 0;
  3.     font-family: Tahoma, Geneva, sans-serif;
  4.     background: #FFF;
  5.     color: #000;
  6. }
  7.  
  8. #contenedor {
  9.     width: 960px;
  10.     margin: 0 auto;
  11.     background: #cccc00;
  12.     height: 1000px;
  13. }
  14.  
  15. #cabecera {
  16.     height: 120px;
  17.     background: #99ccff;
  18. }
  19.  
  20. #slider {
  21.     height: 200px;
  22.     background: #ff9900;
  23. }
  24.  
  25. #sidebar1, #sidebar2 {
  26.     float: left;
  27.     height: 680px;
  28.     background: #cccccc;
  29.     width: 200px;
  30. }
  31.  
  32. #contenido {
  33.     width: 560px;
  34.     float: left;
  35. }
  36.  
  37. #contenido p {
  38.     margin: 40px 0 0 50px;
  39.     width: 120px;
  40.     height: 120px;
  41.     float: left;
  42.     background: #fff;
  43.     text-align: center;
  44. }
Exactamente lo que necesitaba, MUCHAS GRACIAS!