23/01/2010, 15:48
|
 | | | Fecha de Ingreso: enero-2010
Mensajes: 45
Antigüedad: 14 años, 3 meses Puntos: 0 | |
| Respuesta: Ayuda necesito insertar dos etiquetas div en este diseño
...bueo el codigo es:
Código:
<body class="thrColLiqHdr">
<div id="container">
<div id="header">
<h1>Encabezado</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 </h3>
<p> </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Sidebar2 </h3>
<p> </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Contenido principal </h1>
<p> </p>
<!-- end #mainContent --></div>
<!-- Este elemento de eliminación siempre debe ir inmediatamente después del div #mainContent para forzar al div #container a que contenga todos los elementos flotantes hijos --><br class="clearfloat" />
<div id="footer">
<p>FOOTER</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Y aqui el estilo CSS:
Código:
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.thrColLiqHdr #container {
width: 80%;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.thrColLiqHdr #header {
background: #DDDDDD;
padding: 0 10px;
}
.thrColLiqHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.thrColLiqHdr #sidebar1 {
float: left;
width: 22%;
background: #EBEBEB;
padding: 15px 0;
}
.thrColLiqHdr #sidebar2 {
float: right;
width: 23%;
background: #EBEBEB;
padding: 15px 0;
}
.thrColLiqHdr #sidebar1 p, .thrColLiqHdr #sidebar1 h3, .thrColLiqHdr #sidebar2 p, .thrColLiqHdr #sidebar2 h3 {
margin-left: 10px;
margin-right: 10px;
}
.thrColLiqHdr #mainContent {
margin: 0 24% 0 23.5%;
}
.thrColLiqHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.thrColLiqHdr #footer p {
margin: 0;
}
/* Varias clases diversas para su reutilización */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
Espero me puedan ayudar esto me esta volviendo loko |