Este layout CSS te permite crear tu propia página con divs y CSS íntegramente. El código es perfectamente compatible con IE y con Firefox. Posee los hacks correspondientes para que todo se vea bien.
De esta forma vas a tener; cabecera, pié de página, contenido a la derecha y menú izquierdo, como el formato de las webs tradicionales
Aclaro que el código es de ancho fijo a 760px, si quieres que sea ajustable a la ventana del navegador debes fijar el ancho del contenedor principal a 100%.
Si quires ver como queda la maquetación de esta página, click aquí.
Ahora el código CSS y el HTML que contiene las DIVS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" /> <style type="text/css">
#container {
width: 760px;
\\width: 780px;
w\\idth: 760px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#banner {
padding: 5px;
margin-bottom: ;
background-color: #FFCC99;
}
#content {
padding: 5px;
margin-left: ;
background-color: #CCCC99;
}
#sidebar-a {
float: left;
width: ;
margin: 0;
margin-right: ;
padding: 5px;
background-color: rgb(235, 235, 235);
}
#footer {
clear: both;
padding: 5px;
margin-top: ;
background-color: #FFCC99;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"> Aquí podría ir la Cabecera de Tu sitio </div>
<div id="sidebar-a">
<p>Aquí puedes poner un menú</p>
<p>con ancho ajustable </p>
</div>
<div id="content"> Esto es el cuerpo de la web, el alto de esta div es elástico en su altura</div>
<div id="footer"> Este es pié de página </div>
</div>
</body>
</html>
Redactor:
Leonardo A. Correa
Sitio Web:
Recursos Webmaster
Versión Imprimible: Ver/Imprimir
Comentarios: Hay
0 opiniones
