Hace unos días encontré este manual:
http://www.cristalab.com/tutoriales/131/componer-un-diseno-de-3-columnas-en-xhtml-y-css.html
Y luego encontré otro también de esta página llamado algo así como: "crear body con sombra estilo cristalab" del cual no encuentro la dirección ahora pero tengo todos los archivos e imágenes en mi pc.
Lo que quiero realizar es una combinación de las dos plantillas, es decir, agregar tres columnas a la segunda plantilla que incluye la sombra y el header y footer redondeados.
No se cual es mi error en el código pero el div derecho e izquierdo no se ven, a continuación os pongo lo que tengo:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="myCSS.css" media="screen" />
</head>
<body>
<div id="encabezado"></div>
<div id="cuerpo">
<div id="izquierda>
</div>
<div id="derecha"></div>
<div id="principal"></div>
</div>
<div id="pie"></div>
</body>
</html>
myCSS.css
/* CSS Document */
*
{
margin: 0;
padding: 0;/* para Firefox */
}
body
{
text-align: center; /* Utilizamos el truco de centrado de DIV's*/
}
div#encabezado
{
margin: 0 auto 0 auto; /* centrar en DIV */
width: 790px; /* ancho del DIV */
height: 142px;/* Especificamos el alto resultante después de haber cortado la imagen (header.png)*/
background-image: url("header.png");
background-repeat: no-repeat; /* Evitamos que se repita la visualización de la imagen*/
}
div#cuerpo
{
margin: 0 auto 0 auto;
width: 790px;
background-image: url("body.png");
background-repeat: repeat-y; /* Especificamos que se repita de forma vertical */
}
#izquierda {
width:100px;
height:auto;
background-color:#EFEFEF;
border-style:solid;
border-width:1px;
border-color:#000000;
margin:0 5px 0 5px;
float:left;
padding:2px;
}
#derecha {
width:100px;
height:auto;
background-color:#FFFFDD;
border-style:solid;
border-width:1px;
border-color:#FF0000;
margin:0 5px 0 5px;
float:right;
padding:2px;
}
#principal {
width:500px;
height:auto;
background-color:#FFF;
border-style:solid;
border-width:1px;
border-color:#000000;
margin:0 auto;
padding:10px;
}
div#pie
{
margin: 0 auto 0 auto;
width: 790px;
height: 54px; /* alto de la imagen (foot.png) después de haberla cortado */
background-image: url("foot.png");
background-repeat: no-repeat;
}
Fin códigos
Eso es todo lo que tengo.
Llevo bastante tiempo usando las tablas pero ahora quiero pasarme a los divs, alguien me puede ayudar??
Un saludo, gracias
