Cita:
Iniciado por Mikmoro 
Hola, pao.
No veo posible que con el código CSS que muestras eso se vea como la imagen que pones. Mira a ver que te faltan algunas clases para poder entenderlo o al menos reproducir el error (mínimo #caja1, #caja2 y #gallery ul li).
Hola Mikel, en el momento de tu respuesta no me había quedado demasiado claro. Ya luego de mucho hurgar en esto, pues tenías toda la razón. (Lástima que vos veas todo tan simple y yo la complique demorando tanto en comprender).
Gracias Triby también por la infinita Paciencia.
Finalmente he podido corregir todos los errores.
Pero fruto de la ignorancia venía haciendo css por cada hoja
(claro que es la primera vez que hago algo más que un home, pero ya lo he entendido).
La idea es trabajarla en todos los sentidos, código, validador, y accesibilidad, así que tendré para rato con esto.
Si alguien le fuera de utilidad y por si quieren echarle una miradita, aquí les adjunto los códigos.
GRACIAS NUEVAMENTE!
Html
Código 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" xml:lang="es" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=ISO-8859-1" />
<meta name="description" content="Dreamlight" />
<meta name="Keywords" content="Lámparas, Vitreaux, Vitró, vitraux, iluminación, vidrios" />
<meta name="Author" content="Paola Andrea Magariños" />
<meta name="Language" content="es" />
<title>© Dreamlight</title>
<!-- acceso a css -->
<link href="dream.css" rel="stylesheet" type="text/css" />
<!--[if IE LT 7]><style>#caja1 {filter: alpha(opacity=30);}</style><![endif]-->
</head>
<body>
<!--contenedor general-->
<div id="contenedor">
<!--imágen del header-->
<div id="cabecera"/>
<h1>Dreamlight</h1>
<h2>Vitrales artesanales</h2>
<div><img src="images/header.jpg" alt="Imagen institucional" /></div>
</div>
<!--menu-->
<div id="menu">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="galeria.html">GALERIA</a></li>
<li><a href="trabajos.html">TRABAJOS</a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>
<!--imagen fin header-->
<div id="fincabecera"/>
<div><img src="images/guarda.jpg" alt="Imagen de adorno" /></div>
<!--cuerpo-->
<div id="cuerpo">
<div id="caja0">
<div id="caja1"></div>
<div id="caja2">
<ul id="gallery">
<li><a href="Ver foto1 "><img class="min" src="images/uno.jpg" alt="Tributo" />
<img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
<li><a href="Ver foto2 "><img class="min" src="images/dos.jpg" alt="Monaco" />
<img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
<li><a href="Ver foto3 "><img class="min" src="images/tres.jpg" alt="Erase" />
<img class="gran" src="images/tresg.jpg" alt="Erase" /></a></li>
<li><a href="Ver foto4 "><img class="min" src="images/cuatro.jpg" alt="Kubica" />
<img class="gran" src="images/cuatrog.jpg" alt="Kubica" /></a></li>
<li><a href="Ver foto5 "><img class="min" src="images/cinco.jpg" alt="Hamilton" />
<img class="gran" src="images/cincog.jpg" alt="Hamilton" /></a></li>
<li><a href="Ver foto6 "><img class="min" src="images/seis.jpg" alt="lamp" />
<img class="gran" src="images/seisg.jpg" alt="lamp" /></a></li>
<li><a href="Ver foto7 "><img class="min" src="images/uno.jpg" alt="Tributo" />
<img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
<li><a href="Ver foto8 "><img class="min" src="images/dos.jpg" alt="Monaco" />
<img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
<li><a href="Ver foto7 "><img class="min" src="images/uno.jpg" alt="Tributo" />
<img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
<li><a href="Ver foto8 "><img class="min" src="images/dos.jpg" alt="Monaco" />
<img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
</ul>
</div></div></div>
<div class="imagen"><img src="images/estacion.jpg" alt="Lámpara tridimensional" /></div>
<div class="gran"></div>
<div class="corte"></div>
<!--pie-->
<div id="pie">
<img src="images/pie.jpg" alt="fondo decorativo" />
</div>
</body>
</html> CSS
Código:
/* alineación general */
* {margin:0; padding: 0;
}
body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color:#35350e;
}
#contenedor {
display:block;
width: 760px;
position:absolute;
top:50%;
left:50%;
margin-top:-212px;
margin-left:-380px;
border: solid 1px #000;
}
/* estilo de la cabecera */
#cabecera {width: 760px;
height: 92px;
background-color: #e9eada;
text-align: center;
}
h1 {font-family: "Century Gothic";
font-size: 48px;
padding-top: 10px;
display:none;
}
h2 {font-family: "Palatino Linotype";
font-size: 25px;
color: #ffffff;
margin-bottom: 4px;
display:none;
}
/* menú */
#menu {background-color: #C2C299;
width: 760px;
height: 26px;
}
#menu ul {
list-style-type:none;
text-align: center;
}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #606966;
line-height: 26px;
font-family: "Times New Roman";
font-weight: bold;
text-decoration: none;
display: block;
width: 99%;
}
#menu a:hover {background-color: #c2c299;
color: #35350e;
border: solid 1px #35350e;
line-height: 22px;
}
#fincabecera {width: 760px;
height: 32px;
}
/* contenido */
.imagen {width: 225px;
float: left;
border-right: solid 1px #c2c299;
}
.imagen img {float: left;
padding: 0px 0px 0px 0px;
}
#caja0 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background: url(images/fondotexto.jpg);
position: relative;
}
#caja1 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background-color: #b2b998;
position: relative;
opacity: 0.1;
}
#caja2 {position: absolute;
left: 30px;
top: 10px;
width: 450px;
}
p {color: #30373a;
font-family: Arial;
font-size: 1em;
font-weight: normal;
text-align:justify;
margin:0.5em;
}
#gallery {
width: 500px;
height: 175px;
list-style-type:none; /*Quitamos viñeta*/
margin:0px; /*Elimina sangría en IE6*/
padding: 0; /*Elimina sangría */
position: relative;
margin-top:15px;
}
#gallery li {
display:block;
width:75px;
height:80px;
margin:0px 10px;
float: left;
}
img.min {width: 60px;
height: 51px;
padding: 0px;
border: solid 1px #666600;
}
img.gran {
display:block;
width: 224px;
height: 176px;
overflow:hidden;
visibility:hidden; /*Ocultamos la foto*/
position:absolute;
float: left; /*Algo mayor que el acho de la foto pequeña*/
border:1px #000 solid;
top:-26px;
left:-257px;
}
a:hover {display:inline;} /* Para IE6 */
a:hover img.gran {visibility:visible; z-index:4;}
.corte {clear: both;}
/* pie */
#pie {width: 760px;
float: left;
}
#pie img {float: left;
padding: 0px 0px 0px 0px;
}
