Ver Mensaje Individual
  #2 (permalink)  
Antiguo 04/08/2011, 02:04
Avatar de andresdzphp
andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 12 años, 9 meses
Puntos: 793
Respuesta: como maquetar sin morir en el intento?

Es mejor que manejes el orden de tu código y separes html de CSS. Te dejo el código para que te des una idea.

Código CSS:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Ejemplo</title>
  6.  
  7.         <style type="text/css">
  8.            
  9.             body {
  10.                 text-align: center;
  11.                 margin: 0;
  12.                 background: #000066;
  13.             }
  14.            
  15.             #contenedor {
  16.                 width: 960px;
  17.                 height: 640px;
  18.                 text-align: left;
  19.                 margin: 0 auto;
  20.                 background: #99ccff;
  21.             }
  22.            
  23.             #cabecera {
  24.                 height: 120px;
  25.                 background: #0099ff;
  26.             }
  27.            
  28.             #menu1, #menu2 {
  29.                 width: 160px;
  30.                 height: 400px;
  31.                 background: #ff9900;
  32.                 float: left;
  33.                 margin-top: 10px;
  34.             }
  35.            
  36.             #contenido {
  37.                 width: 620px; /*640px*/
  38.                 height: 400px;
  39.                 float: left;
  40.                 background: #cccc00;
  41.                 margin: 10px;
  42.             }
  43.            
  44.             #pie {
  45.                 clear: left;
  46.                 height: 100px;
  47.                 background: #66ffff;
  48.             }
  49.            
  50.            
  51.            
  52.         </style>
  53.        
  54.     </head>
  55.     <body>
  56.         <div id="contenedor">
  57.             <div id="cabecera">La tia lola</div>
  58.             <div id="menu1">Menu 1</div>
  59.             <div id="contenido">Bienvenidos este es el contenido</div>
  60.             <div id="menu2">Menu 2</div>
  61.             <div id="pie">Todos los derechos reservados</div>
  62.         </div>
  63.     </body>
  64. </html>