Comunidad de diseño web y desarrollo en internet online

Varias cajas que "flotan a la izquierda" con dif. alturas

Citar            
MensajeEscrito el 16 Sep 2008 06:55 pm
Resulta que tengo varias noticias con float:left y claro, quiero que siempre coja la altura de la que es más alta, porque como una de ellas sea diferente ya se desencaja todo. Me pregunto si hay alguna solución aparte de poner un tamaño fijo... ¿Creo que se entiende no?

Por cierto, llevo como una hora buscando como quitar el borde de las imagenes que tienen enlace y no hay manera. No se quitaba con text-decoration? o poniendole border=0?

Tengo
img a {
text-decoration:none;
border:0;
}

Pense que así funcionaría :( pero ni caso me hace el mozilla.

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

firefox
Citar            
MensajeEscrito el 16 Sep 2008 07:20 pm
Lo primero no entendí.
Lo segundo: intenta esto, en tu code fuente html

Código :

<img src="rutaimagen.jpg" border="0" />

Por BlackMage

37 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Sep 2008 08:11 pm
Si, así me funciona. Lo que pasa es que tengo muchas y algunas vendrán de una base de datos, aver si lo puedo apañar.

Pues imagina que tengo una columna y las noticias las cojo de la base de datos y las voy poniendo con un float:left, en bloques que incluyen el título, una foto y texto. Entonces si alguna noticia se pasa de largo pues se desencaja todo. Quisiera que todas se ajustaran al alto de la más grande. Porque sino hace feo claro.

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

firefox
Citar            
MensajeEscrito el 16 Sep 2008 09:20 pm
Creo entender, puedes subir tu web para poder verla?

Si es como creo, tendrías que decirle a la imagen que se valla a la izquierda, ponerle relleno derecho y abajo, y ya, el texto se alinea al contorno, y no habría problema con el texto.

Por BlackMage

37 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Sep 2008 04:49 pm
Aquí va un ejemplo: http://i27.photobucket.com/albums/c194/CarlosGoce/muestraWeb.jpg

Si quieres te paso el código, que no lo paso porque igual aun te es más lio, no por otra cosa.

Fíjate que las dos noticias del centro una cantidad de texto diferente, pues bien, lo que quiero es que la que tiene menos texto se ajuste al tamaño de la que tiene más, porque sino pasa lo de la imagen. Así si que entiendes mi problema no? Sino subo el código.

Gracias!

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

firefox
Citar            
MensajeEscrito el 17 Sep 2008 04:58 pm

Código HTML :

<style>
.caja{
display: block; /* <- ojo si el elemento no es de bloque esto no funciona*/
height: 100px; /* <- o la altura que se te venga en gana */ 
float: left;
}
.caja img{
 border: none;
}
<style>
<a href='' class='caja'><img src="rutaimagen.jpg" /></a>

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 23 Sep 2008 08:23 am
Pues no consigo que me funcione, es que no quiero que sean todas del mismo tamaño, sino que se ajusten automaticamente a la que tenga más, ya que habrá días que tengan una altura y otros días que tengan otra...

Lo único es que les de un poco más de altura y ponga un máximo de caracteres para que siempre vayan iguales.

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

firefox
Citar            
MensajeEscrito el 23 Sep 2008 02:01 pm
acabas de descartar el float

quizás si en ves de que floten haces que pasen de ser elementos

Código HTML :

 display:block;  
a

Código HTML :

  display:inline; 
asi lo que seria empujado seria el contenedor de las cajas

de todos modos preferiría que las imágenes fuesen de tamaño variado, pero su contenedor de tamaño fijo

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 23 Sep 2008 10:13 pm
Creo entendí, pero mira, que pasaria si el alto siempre anda cambiando?, creo que la lista de la parte de abajo (donde dice "Touriño..."), no se va a autoponer, es decir, ese efecto tipo escalera no creo que vaya a salir, bien, yo probé tu diseño de este modo:

Código :

<style>
#contenedor-noticias {
   width: 328px; /* el ancho de tu imagen*/
   float: left; 
   margin-right: 10px;
}
</style>
------------------------------------------------------
<div id="contenedor-noticias">
<img src="rutaimagen.jpg" width="328" height="174" />
<div id="contenido-noticias">Sed ut perspiciatis unde...</div>

Por BlackMage

37 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Sep 2008 03:03 pm
aca hay muchas galerias de fotos con css (solo css)
http://www.cssplay.co.uk/menu/

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 07 Oct 2008 09:15 pm
Bueno, gracias a todos por la ayuda. Al final cambié un poco el diseño y así va un poco mejor. :)

Por xilitos

53 de clabLevel



Genero:Masculino  

Vigo / Galicia

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.