layout 3 columnas + interior bien soy bastante novato en estos temas.. la cosa es que intento hacer una pagina dividida en 4 un contenedor 2 divs laterales que harian de margen que contienen otro interior de 1px con un degradado .. y despues tengo el div del medio donde meteria la cabecera, menu, contenido y pie..
he intentado mil cosas.. peró siempre tengo problemas.. sobre todo que los laterales no crezcan con el del medio..
esto es lo último que he intentado..
Código:
<html>
<head>
<link rel="stylesheet" href="nuevocss.css" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="lateralizq">
<div style="background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.33) 50%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.33)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* W3C */">
</div>
</div>
<div id="contenido">
Hola<br><br><br><br><br>Hola<br><br><br><br><br>
</div>
<div id="lateralder">
</div>
</div>
</body>
</html>
y el css
Código:
#contenedor { width:100%; height: auto; margin:auto; padding:0; display: table;}
#lateralizq { display:table-cell; width:10%;height:100%;}
#lateralder { display:table-cell; background-color:yellow;width:10%;height:100%; }
#contenido { display:table-cell; width:80%; background-color:red; }
#degraizq { display:table-cell; height:100%;width:10px;float:right; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.33) 50%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.33)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.33) 50%,rgba(0,0,0,0.65) 100%); /* W3C */
}
perdon si hay errores .. són simples pruebas.. alguien me puede decir como cojones se maqueta una página en condiciones? muchas gracias de antemano.. |