Foros del Web » Creando para Internet » CSS »

porque me pone todas las imagenes en linea

Estas en el tema de porque me pone todas las imagenes en linea en el foro de CSS en Foros del Web. Buenas quice dos filas de imagenes digamos que como una piramide pero de solo dos filas de esta manera @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original ...
  #1 (permalink)  
Antiguo 18/01/2011, 19:49
Avatar de carlos_belisario
Colaborador
 
Fecha de Ingreso: abril-2010
Ubicación: Venezuela Maracay Aragua
Mensajes: 3.156
Antigüedad: 7 años, 8 meses
Puntos: 460
porque me pone todas las imagenes en linea

Buenas quice dos filas de imagenes digamos que como una piramide pero de solo dos filas de esta manera
Código HTML:
Ver original
  1. <div id="superior">
  2.         <img src="imagenes/conjunto.jpg"/> 
  3.         <img src="imagenes/vestido.jpg"/>      
  4. </div>
  5. <div id="inferior">
  6.         <img src="imagenes/img3.jpg"/> 
  7.         <img src="imagenes/img2.jpg"/>     
  8.         <img src="imagenes/img5.jpg"/>
  9.         <img src="imagenes/img17.jpg"/>
  10. </div>
de manera que me quedaran dos fotos arriba y cuatro abajo, para quise hacerlo de esta manera
Código CSS:
Ver original
  1. #superior img{ 
  2.     float:left;
  3. }
  4. #inferior img{ 
  5.     float:left;
  6. }
  7. #inferior{
  8.     text-align:center;
  9.     display:block;
  10. }
  11. #superior{
  12.     text-align:center;
  13.     display:block;
  14. }

segun yo que se que estoy equivocado porque no me da el resultado que deseo queria que cada una de las imagenes me quedaran al lado, pero la superior arriba y la inferior abajo no se si me explique bien cual fue mi error??
gracias de antemano y disculpen la molestia
__________________
aprende d tus errores e incrementa tu conocimientos
it's not a bug, it's an undocumented feature By @David
php the right way
  #2 (permalink)  
Antiguo 19/01/2011, 09:31
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: porque me pone todas las imagenes en linea

No parece haber ningún error en tu CSS pero hay cosas innecesarias. No necesitas la propiedad float:left para las imágenes. Yo eliminaría esas dos definiciones. Si en el HTML las etiquetas están seguidas aparecerán unidas las imágenes. Si insertas un salto de línea como en tu código aparecerá un pequeño espacio separador.
Las imágenes son por defecto elementos en línea, se consideran igual que el texto y se distribuyen como éste.
Los <div> son por defecto elementos de bloque, por lo que tampoco es necesario utilizar la propiedad display:block.
El único problema que se podría presentar es que tus div superior e inferior no tengan ancho sufiente para mostrar tus imágenes en la misma línea. En ese caso las imágenes saltarían a la línea siguiente, como lo hace el texto cuando no entra en una sóla línea.
La manera de evitar esto es darle un ancho predeterminado a tus div con la propiedad width asegurandose uno de esta manera que las imágenes se muestren siempre una al lado de la otra. Si las imágenes no entran en la ventana del navegador aparecerá la barra de desplazamiento en lugar de descuadrar tu diseño.
  #3 (permalink)  
Antiguo 19/01/2011, 16:59
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: porque me pone todas las imagenes en linea

Dale un width determinado y overflow: auto
  #4 (permalink)  
Antiguo 19/01/2011, 20:06
Avatar de carlos_belisario
Colaborador
 
Fecha de Ingreso: abril-2010
Ubicación: Venezuela Maracay Aragua
Mensajes: 3.156
Antigüedad: 7 años, 8 meses
Puntos: 460
Respuesta: porque me pone todas las imagenes en linea

Cita:
Iniciado por sanxuan Ver Mensaje
No parece haber ningún error en tu CSS pero hay cosas innecesarias. No necesitas la propiedad float:left para las imágenes. Yo eliminaría esas dos definiciones. Si en el HTML las etiquetas están seguidas aparecerán unidas las imágenes. Si insertas un salto de línea como en tu código aparecerá un pequeño espacio separador.
Las imágenes son por defecto elementos en línea, se consideran igual que el texto y se distribuyen como éste.
Los <div> son por defecto elementos de bloque, por lo que tampoco es necesario utilizar la propiedad display:block.
El único problema que se podría presentar es que tus div superior e inferior no tengan ancho sufiente para mostrar tus imágenes en la misma línea. En ese caso las imágenes saltarían a la línea siguiente, como lo hace el texto cuando no entra en una sóla línea.
La manera de evitar esto es darle un ancho predeterminado a tus div con la propiedad width asegurandose uno de esta manera que las imágenes se muestren siempre una al lado de la otra. Si las imágenes no entran en la ventana del navegador aparecerá la barra de desplazamiento en lugar de descuadrar tu diseño.

coloque en bloque y el float xq cuando coloque las imagenes cuando las carge me las ponia una bajo la otra por eso le di el float, pero cuando le coloque esta propiedad automaticamente me las coloco una al lado de la otra, incluso las inferiores por eso le di el display al div ya que no se porque me las unio, gracias por la ayuda

Cita:
Iniciado por mariomon17 Ver Mensaje
Dale un width determinado y overflow: auto
Lo voy a provar y te comento saludos y gracias a ambos
__________________
aprende d tus errores e incrementa tu conocimientos
it's not a bug, it's an undocumented feature By @David
php the right way
  #5 (permalink)  
Antiguo 27/01/2011, 11:06
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: porque me pone todas las imagenes en linea

Carlos, sólo elimina el float:left en las imágenes, ya que no es necesario si las muestras inline. Eso solucionará el problema. Desde luego sería bueno que controlaras la anchura de las imágenes para que todo se muestre de forma correcta.

Cita:
Iniciado por mariomon17 Ver Mensaje
Dale un width determinado y overflow: auto
Te apoyo en lo del width pero no en lo otro, ya que además de mostrar esa horrible barra de desplazamiento, representa cierta molestia para el usuario, quien se ve en la obligación de usar el ratón sólo para ver la mitad de la última imagen. Mejor trabajar en los anchos de éstas.

Cita:
Iniciado por sanxuan Ver Mensaje
Los <div> son por defecto elementos de bloque, por lo que tampoco es necesario utilizar la propiedad display:block.
Eso es correcto.
  #6 (permalink)  
Antiguo 27/01/2011, 14:54
Avatar de carlos_belisario
Colaborador
 
Fecha de Ingreso: abril-2010
Ubicación: Venezuela Maracay Aragua
Mensajes: 3.156
Antigüedad: 7 años, 8 meses
Puntos: 460
Respuesta: porque me pone todas las imagenes en linea

perfecto me sirvio tu explicación perfectamente solo tenia que colocar las imagenes inline y me funciono, el overflow no lo utilice en este caso ya que no fue necesario, este lo uso mas que todo en div que seran cuerpos y cosas asi, gracias por su ayuda
__________________
aprende d tus errores e incrementa tu conocimientos
it's not a bug, it's an undocumented feature By @David
php the right way

Etiquetas: imagenes, linea, todas
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 13:08.