A ver.... voy a subir el código entero así lo ven tanto el html y el css, y sí es loco pero no veo por donde viene el problema.
Jomaruro, el tema es que hago cosas muy locas, voy probando y probando a ver si logro lo que quiero.
Por si sirve de referencia, he partido del
siguiente código para mi galería.
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>
</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 */
#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: 45px;
top: 10px;
width: 450px;
}
#caja2 ul li {float: left;
width: 25%;
}
#caja2 ul { list-style-type:none; /*Quitamos viñeta*/
margin:0px; /*Elimina sangría en IE6*/
padding:0px; /*Elimina sangría */
}
p {color: #30373a;
font-family: Arial;
font-size: 1em;
font-weight: normal;
text-align:justify;
margin:0.5em;
}
#gallery ul {
width: 500px;
height: 180px;
float: left;
list-style-type:none; /*Quitamos viñeta*/
margin:0px; /*Elimina sangría en IE6*/
padding: 0; /*Elimina sangría */
position: relative;
}
img.gran {
width: 224px;
height: 178px;
visibility:hidden; /*Ocultamos la foto*/
position:absolute;
float: left; /*Algo mayor que el acho de la foto pequeña*/
top:136%;
left:24.3%;
margin-top:-212px;
margin-left:-380px;
border: solid 1px #aaaa81;
}
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;
}
Muchas Gracias
