Foros del Web » Creando para Internet » CSS »

Divs que se descontrolan

Estas en el tema de Divs que se descontrolan en el foro de CSS en Foros del Web. Hola a todos: 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 ...
  #1 (permalink)  
Antiguo 23/09/2006, 19:41
Avatar de Setepenre  
Fecha de Ingreso: septiembre-2006
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 11 años, 2 meses
Puntos: 0
Divs que se descontrolan

Hola a todos:

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:
<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>
Y este es el CSS

Código:
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;
}
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.

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
  #2 (permalink)  
Antiguo 24/09/2006, 02:59
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Bienvenido al foro, el tema de las alturas es algo complicado puesto que no esta bien implementado en css, yo aun sufro con ellas , dentro de todas las alternativas planteadas tal vez te sirva colocarle:

html body{height:100%}
*html #nombrediv{height:100%}

o bien te pueda servir faux columns

  #3 (permalink)  
Antiguo 24/09/2006, 10:27
Avatar de Setepenre  
Fecha de Ingreso: septiembre-2006
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 11 años, 2 meses
Puntos: 0
Hola MaXaC:

Muchas gracias por tu bienvenida y por tu ayuda. Es un consuelo saber que no soy el único que "sufre en silencio" las maldades del height :)

Me temo que el problema persiste, por un lado ya he utilizado el selector html, body: {height:100%} en mi código y por otro, la utilización del Star HTML Hack (el asterisco) no es compatible con todos los navegadores. Digamos que el selector universal (*) por delante del selector html sólo funciona para navegadores IE, con lo que el problema sigue.

También conocía el enlace de A List Apart y aunque trata problema similares su solución no vale para este caso.

En cualquier caso agradezco mucho tu ayuda e interés.

Un saludo
  #4 (permalink)  
Antiguo 24/09/2006, 11:01
 
Fecha de Ingreso: marzo-2006
Mensajes: 27
Antigüedad: 11 años, 9 meses
Puntos: 0
Prueba esto es el uso de la propiedad min-higth: y una daptacion para qu funcione en iexplorer

#contenedor {
clear: both;
}
#izquierda, #derecha {
float: left;
width: 48%;
min-height:200px;
heigth:auto !important;
height:200px;
}
#izquierda a, #derecha a {
height: 100%;
display: block;
background: #FDE6B5;
margin: 0px 5px 17px 5px;
padding: 5px;
border: 1px solid #FCD68F;
}
#izquierda a:hover, #derecha a:hover {
background-color: #FCDEA0;
}
#izquierda img, #derecha img {
float: left;
margin: 3px 4px 0px 3px;
}
a.nulo:link, a.nulo:visited, a.nulo:hover {
color: #000000;
text-decoration: none;
}
.activo {
color: #1F17AE;
text-decoration: none;
font-weight: bold;
}


Ademas dependiendo de la resolucion se te pueden descuadrar por el modelo de cajas diferente entre firefox e ixplorer por ello le baje un poco el width.

Te sugiero que si vas a usarlo asi, emples clases en lugar de ID's, debido a que solo se npuede poner in id por pagina en el estandar xhtml, asi que cambialos a clases... espero te sirva
  #5 (permalink)  
Antiguo 24/09/2006, 12:32
Avatar de Setepenre  
Fecha de Ingreso: septiembre-2006
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 11 años, 2 meses
Puntos: 0
Hola dario-g:

Muchas gracias por todo, ciertamente tienes mucha razón en las indicaciones que me das, y una vez lo tenga todo bien cuadrado procederé a la optimización del código, ahora estoy en fase de pruebas y el problema que nos ocupa me ha llevado a realizar algunas incorrecciones con el fin de delimitar el problema.

Con respecto al tu sugerencia del min-height es algo que también había utilizado pero que no daba los resultados esperados, pues si bien ahora mismo es un problema que el texto decida la altura del div, con el min-height el problema es precisamente que el texto no se acomoda al div, puesto que cuando algún usuario selecciona una resolución superior a 1024 y un texto con cuerpo pequeño, en el div queda una gran vacío en la parte inferior, algo que ya me indicabas que podía pasar, y la verdad es que el efecto es muy antiestético. He provado a reducir el height hasta el límite, pero entonces se produce el problema inicial de que los divs se descuadran, es por este motivo que buscaba alguna solución a modo de porcentaje o bien, encontrar la forma de que si un div es más corto en altura que el div contiguo, este se estire hasta ocupar el espacio del anterior. Es por este motivo que puse un contenedor para retener a dos divs por línea, para que si uno era más alto que el otro, este otro se acoplara en altura al anterior utilizando como altura máxima la del contenedor.

Bueno, vaya rollo que he soltado, si no me explico lo intento de otra manera.

De todas maneras agradezco mucho tu ayuda, es un placer poder contar con todos vosotros.

Un saludo
  #6 (permalink)  
Antiguo 25/09/2006, 01:17
 
Fecha de Ingreso: marzo-2006
Mensajes: 27
Antigüedad: 11 años, 9 meses
Puntos: 0
Oye se me ocurre un cambio, dos enlaces <a> por contenedor, sin divs derecha e izquierda



#contenedor {
clear: both;

min-height:200px;
heigth:auto !important;
height:200px;
}

#izquierda a, #derecha a {
float: left;
width: 48%;
height: 100%;
display: block;
background: #FDE6B5;
margin: 0px 5px 17px 5px;
padding: 5px;
border: 1px solid #FCD68F;
}
#izquierda a:hover, #derecha a:hover {
background-color: #FCDEA0;
}
#izquierda img, #derecha img {
float: left;
margin: 3px 4px 0px 3px;
}
a.nulo:link, a.nulo:visited, a.nulo:hover {
color: #000000;
text-decoration: none;
}
.activo {
color: #1F17AE;
text-decoration: none;
font-weight: bold;
}

Aqui el min heihgt, esta por "renglon" donde cada renglo va a contener dos enlaces <a> flotados con determinadas caracteristicas (float, width). y el min-hegth estara en el contenedor, por lo que si en un "renglon" un cuaddro es grande el de al llado tendra la misma altura, y eliminas la necesida de divs izquierda y derecha, y de hecho puedes hacer una unica clase para los enlaces
  #7 (permalink)  
Antiguo 25/09/2006, 14:12
Avatar de Setepenre  
Fecha de Ingreso: septiembre-2006
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 11 años, 2 meses
Puntos: 0
Hola de nuevo dario-g:

Muchas gracias por el interés que te has tomado con esto, es de agradecer.

El problema que he observado es que <a> al ser un elemento de línea no acepta selectores de bloque, por lo que se hace imposible controlar su posición y estilo, por lo menos hasta donde yo se.

No obstante utilizando tu idea he intentado lo mismo pero con <p> y <span> que al ser un elementos de bloque admiten las propiedas que necesitamos, pero el resultado es el mismo que con <div>.

En fin, creo que se nos terminan las ideas, más que nada por estos errores de implementación que tenemos que sufrir constantemente y que nos obligan a imaginar en lugar de a producir, aunque por otro lado nunca está de más aceptar retos como estos que nos ayudan a aprender cada día un poco más

Gracias de nuevo por todo.
  #8 (permalink)  
Antiguo 25/09/2006, 15:45
 
Fecha de Ingreso: abril-2005
Ubicación: Lima-Peru
Mensajes: 313
Antigüedad: 12 años, 7 meses
Puntos: 1
Esta interesante el post, hasta donde yo se, el min-height no esta o se implementa mal en IE, en todo caso, debe haber alguien que pueda dar con la solucion, como ultima alternativa talvez tendrias que pensar en tablas para esa seccion...... yo digo..
  #9 (permalink)  
Antiguo 25/09/2006, 19:55
Avatar de Setepenre  
Fecha de Ingreso: septiembre-2006
Ubicación: Barcelona
Mensajes: 5
Antigüedad: 11 años, 2 meses
Puntos: 0
Hola MaXaC:

No te creas que más de una vez he estado tentado de recurir a las fiables tablas, pero ya creo que por salvar la honra estoy dale que te pego con el tema, estas son las cosas que a veces me hacen dudar sobre si merece la pena perder nuestro precioso tiempo intentando cumplir con el standard, sobretodo cuando el cliente paga y exige resultados. En fin.

Si no ha cambiado nada hasta la fecha el min-height no funciona en IE pero en teoria el height en IE debería estirarse hasta el límite de su contenedor, aunque como hemos podido ver no es así, y nosotros leyendo libros y más manuales que sólo sirven para comprobar que la teoria sigue siendo teoria.

Dentro de mis intentos por hacer que esto funcione de alguna manera, he utilizado una interesante posiblidad que por desgracia solo funciona en Firefox y navegadores que cumplen el standard, se trata de los pseudo-elementos before y after, muy útiles para este y otro tipo de situaciones.

En el caso que nos ocupa, jugando con los porcentajes de altura, los márgenes y el relleno se puede llegar a conseguir corregir el problema, pero una vez más IE invalida cualquier posibilidad de solucionar estos inconvenientes.

Pues nada, espero que a alguien se le encienda la bombilla.

Un saludo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:25.