Foros del Web - Ver Mensaje Individual

C2am · #4 (**permalink**) 25/01/2012, 09:27

A ver que te parece esta versión:

Código CSS:

Ver originalbody {
    margin: 0px;
    padding: 0px;
}
#superior {
    width:95%; /* menor a 100% para que no aparezca el scroll por el borde de 4px */
    height:50px;
    position:relative;
    margin: 25px auto 0px; /*margen top para bajarlo un poco, auto para centrarlo */
    padding: 0px;
    border:4px solid #000;
    text-align:center;
    background-color:#CCC;
    z-index:50; /* tiene que ser más grande que el del cuerpo*/
}
#cuerpo {
    position:relative; 
    margin: -80px auto 0px; /*top -80 para subirlo , auto para centrar*/
    padding: 80px 0px 0px; /*top para que el contenido no quede oculto por #superior */
    width:75%; 
    border:4px solid #000;
    height:400px;
    background-color:#F60;
    text-align:center;
    
}
#inferior {
    width:95%; /* menor a 100% para que no aparezca el scroll por el borde de 4px */
    height:150px;
    margin: 0 auto;
    padding: 0px;
    background-color:#CCC;
    border:4px solid #000;
    text-align:center;
}

Código HTML:

Ver original<body>
 
<div id="superior">
    <header>
    
        AQUI IRÍA EL MENU SUPERIOR
            
    </header>   
</div>
 
 
<div id="cuerpo">
   
        AQUI IRÍA LA PARTE PRINCIPAL       
 
</div>
 
       
<div id="inferior">
    <footer>
 
        AQUI IRÍA EL MENU INFERIOR
 
    </footer>
</div>
 
  
    
</body>

El html un poco más ordenado: Superior - Cuerpo - Inferior , para mejor comprensión del código.

Aquí el Ejemplo en vivo y casi directo

Saludos