Esta es mi primera participación y quiero saludaros a todos y daros las gracias por el trabajo que realizáis.
Tengo un lío con unos divs que no me hacen mucho caso. La idea es disponer de 8 divs que contengan un enlace que ocupe todo el div, colocando dentro tanto textos como imagenes y que al pulsar sobre cualquier parte del div se active el enlace, cambiando el fondo al pasar por encima, etc.
El código de los divs es el siguiente:
Código:
Y este es el CSS<div id="contenedor">
<div id="izquierda">
<a class="nulo" href="#" title="Todo sobre las Pirámides">
<img src="piramides.jpg" width="100" height="64" border="0" />
<span class="activo">Todo sobre las Pirámides</span><br />
Todas las pirámides egipcias conocidas y pirámides subsidiarias, datos sobre su construcción, dimensiones, ángulos, fechas, cámaras, ilustraciones y mucho más...
</a>
</div>
<div id="derecha">
<a class="nulo" href="#" title="Todo sobre Tutankamon">
<img src="tutankamon.jpg" width="100" height="64" border="0" />
<span class="activo">Todo sobre Tutankamon</span><br />
Destacaremos aquellos datos más relevantes de la vida del joven rey, y aclararemos los aspectos mas importantes que a nivel político marcaron su corto reinado.
</a>
</div>
</div>
<div id="contenedor">
<div id="izquierda">
<a class="nulo" href="#" title="Información sobre Museos">
<img src="museos.jpg" width="100" height="64" border="0" />
<span class="activo">Información sobre Museos</span><br />
Localiza el museo tanto geográficamente como una vez en su interior, encontrando las salas con piezas egipcias de manera fácil, a través de mapas de situación geográfica y planos de las salas.
</a>
</div>
<div id="derecha">
<a class="nulo" href="#" title="Entrevistas a Egiptólogos">
<img src="entrevistas.jpg" width="100" height="64" border="0" />
<span class="activo">Entrevistas a Egiptólogos</span><br />
Introduciendo distintas entrevistas que harán que conozcamos un poco más a las personas que trabajan incansablemente para hacer que la egiptología avance y se enriquezca con sus valiosos aportes.
</a>
</div>
</div>
<div id="contenedor">
<div id="izquierda">
<a class="nulo" href="#" title="Egipto en imágenes">
<img src="imagenes.jpg" width="100" height="64" border="0" />
<span class="activo">Egipto en imágenes</span><br />
Podras disfrutar de las maravillas que nos ofrece Egipto a través de estupendas imágenes con una muy buena calidad, distribuidas por diferentes categorías y compañadas de textos explicativos.
</a>
</div>
<div id="derecha">
<a class="nulo" href="#" title="Todo para viajar a Egipto">
<img src="viajar.gif" width="100" height="64" border="0" />
<span class="activo">Todo para viajar a Egipto</span><br />
Pequeña ayuda a modo de guía para quienes hayan decidido visitar Egipto y estén de alguna manera más interesados en la historia y el arte de este país de lo que suelen estarlo los turistas habituales.
</a>
</div>
</div>
<div id="contenedor">
<div id="izquierda">
<a class="nulo" href="#" title="Abidos Templo de Sethy I. por Elisa Castel Ronda">
<img src="abidos.jpg" width="70" height="100" border="0" />
<span class="activo">Abidos Templo de Sethy I. por Elisa Castel Ronda</span><br />
Este trabajo es cortesía de la Editorial Turismapa y de su Autora Elisa Castel. Ambos han tenido la amabilidad de concedernos permiso expreso para reproducir gratuitamente en nuestras páginas el índice y parte de la mencionada obra. Aquellos interesados en disponer del ejemplar íntegro, pueden dirigirse a Elisa Castel.
</a>
</div>
<div id="derecha">
<a class="nulo" href="#" title="Mil Millas Nilo Arriba. Traducido por Rosa Pujol">
<img src="milmillas.jpg" width="70" height="100" border="0" />
<span class="activo">Mil Millas Nilo Arriba. Traducido por Rosa Pujol</span><br />
Este trabajo es cortesía de la Editorial Turismapa y de su Traductora Rosa Pujol. Ambos han tenido la amabilidad de concedernos permiso expreso para reproducir gratuitamente en nuestras páginas el prólogo y el capítulo I de la mencionada obra. Aquellos interesados en disponer del ejemplar íntegro, pueden dirigirse a Rosa Pujol.
</a>
</div>
</div>
Código:
El problema se produce porque los divs se amoldan al tamaño del texto y cuando se da el caso de que un div de la izquierda (por ejemplo) tiene más texto que el de la derecha se quedan descuadrados. Lo que busco es que estos divs tengan el contenido que tengan siempre queden a la misma altura, aunque ello suponga que la parte baja del div no tenga contenido.html, body {
height: 100%;
}
div {
height: 100%;
}
#contenedor {
clear: both;
height: 100%;
}
#izquierda, #derecha {
float: left;
width: 49%;
height: 100%;
}
#izquierda a, #derecha a {
height: 100%;
display: block;
background-color: #FDE6B5;
margin-bottom: 17px;
margin-right: 5px;
margin-left: 5px;
padding: 5px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #FCD68F;
border-bottom-color: #FCD68F;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #FDDEA6;
border-left-color: #FDDEA6;
}
#izquierda a:hover, #derecha a:hover {
background-color: #FCDEA0;
}
#izquierda img, #derecha img {
float: left;
margin-top: 3px;
margin-right: 4px;
margin-bottom: 0;
margin-left: 3px;
}
a.nulo:link, a.nulo:visited, a.nulo:hover {
color: #000000;
text-decoration: none;
}
.activo {
color: #1F17AE;
text-decoration: none;
font-weight: bold;
}
Cabe destacar que la web ofrece la posibilidad de aumentar y disminuir el texto y cambiar el ancho de la pagina, por tanto es muy habitual que los divs se descuadren porque su contenido ha variado de tamaño y además, por este mismo motivo no puedo indicar a los divs que tengan una altura en pixeles fija.
La verdad es que se me acaban las ideas y no se que más utilizar, a lo mejor el enfoque no es correcto y existe la manera de conseguir los mismo pero más fácilmente, aunque no se como, por eso me gustaria saber si a algún compañero se le ocurre alguna solución.
Gracias por vuestra ayuda
, dentro de todas las alternativas planteadas tal vez te sirva colocarle:
