Foros del Web » Creando para Internet » CSS »

Problemon espacio en blanco en Div con Imagenes

Estas en el tema de Problemon espacio en blanco en Div con Imagenes en el foro de CSS en Foros del Web. Hola tengo un problemon con eliminar los espacios en blancos dentro de un div con imegenes. el codigo html es: Código PHP:     <div id="navegador">         <img src="skins/ideas/images/ <?  ...
  #1 (permalink)  
Antiguo 30/08/2006, 15:55
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Problemon espacio en blanco en Div con Imagenes

Hola tengo un problemon con eliminar los espacios en blancos dentro de un div con imegenes.

el codigo html es:

Código PHP:
    <div id="navegador">
        <img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c1.jpg" width="53" height="25" border="0" id="content_r2_c1" alt="" >
        <img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c2.jpg" width="110" height="25" border="0" id="content_r2_c2" alt="" />
        <img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c4.jpg" width="126" height="25" border="0" id="content_r2_c4" alt="" />
        <img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c6.jpg" width="73" height="25" border="0" id="content_r2_c6" alt="" />
        <img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c7.jpg" width="75" height="25" border="0" id="content_r2_c7" alt="" />
        <img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c8.jpg" width="70" height="25" border="0" id="content_r2_c8" alt="" />
    </div>
y el CSS:

Código PHP:
#navegador{
float:left;
width:507px;
height25px;
text-align:left
AHORA si lo hago de esta forma funciona bien pero me queda todas las imagenes juntas y desordenado, no es la idea.
Código PHP:
<div id="navegador"><img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c1.jpg" width="53" height="25" border="0" id="content_r2_c1" alt="" ><img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c2.jpg" width="110" height="25" border="0" id="content_r2_c2" alt="" /><img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c4.jpg" width="126" height="25" border="0" id="content_r2_c4" alt="" /><img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c6.jpg" width="73" height="25" border="0" id="content_r2_c6" alt="" /><img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c7.jpg" width="75" height="25" border="0" id="content_r2_c7" alt="" /><img src="skins/ideas/images/<? echo $lenguaje_lng;?>/content_r2_c8.jpg" width="70" height="25" border="0" id="content_r2_c8" alt="" /></div>
existe alguna solucion para evitar los espacios en blanco entre imagenes en un div?
  #2 (permalink)  
Antiguo 30/08/2006, 16:46
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
solo te pasa en iE verdad ???
__________________
Saludos
FT.
www.fernando.com.mx
  #3 (permalink)  
Antiguo 30/08/2006, 19:33
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
en ambos, firefox y ie.

con firefox lo pude arreglar con aunque es medio parche:
Cita:
white-space: nowrap;
  #4 (permalink)  
Antiguo 31/08/2006, 01:34
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Supongo que medio bárbaro pero funciona
#navegador img {margin: -2px;}
  #5 (permalink)  
Antiguo 31/08/2006, 08:56
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
funciona pero en firefox se sobresale hacia la izquierda y hacia arriba

Aqui va la imágen con el problema en el div


Última edición por zsamer; 31/08/2006 a las 09:01
  #6 (permalink)  
Antiguo 31/08/2006, 10:47
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
metelas en listas..
__________________
Saludos
FT.
www.fernando.com.mx
  #7 (permalink)  
Antiguo 31/08/2006, 10:52
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Cita:
Iniciado por fer10 Ver Mensaje
metelas en listas..
soy medio novato en css, a que te refieres a meterlas en listas?

gracias

salu2
  #8 (permalink)  
Antiguo 31/08/2006, 10:58
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
todos los menus de ese tipo los hago con listas. y quedan mucho mejor por que tienes mas control de ellos.

http://www.cristalab.com/tutoriales/...-usando-listas
__________________
Saludos
FT.
www.fernando.com.mx
  #9 (permalink)  
Antiguo 31/08/2006, 17:28
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
haa oka, el tema es que tiene que ser una imagen, no puedes ser lista, además es un menú horizontal, el cual usa imagenes enviadas por los diseñadores, con sus respectivas sombras efectos overmouse etc...
  #10 (permalink)  
Antiguo 31/08/2006, 22:13
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
pues todo eso se lo puedes poner con listas como background en la etqiueta A
y para hacer el roll over usa a:hover y cambia el background
__________________
Saludos
FT.
www.fernando.com.mx
  #11 (permalink)  
Antiguo 01/09/2006, 00:17
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
gracias voy a ver como me resulta.

Tengo otra duda que no he pododo resolver, es sobre alinear texto en forma vertical.
he probado con :

vertical-align:middle;

pero segun investigé solo sirve para cajas de lineas y no de bloques asique si es una sola linea se puede hacer con line-height, pero como son varias lineas no me sirve, despues googlenado me topé con las display:table, pero estas ultimas solo funciona con Mozilla y no con IE, entonces no he podido encontrar una solucion para alinear textos verticalmente y horizontal con CSS que sea compatible con ambos navegadores.

gracias y salu2

zsamer



saludos.

Última edición por zsamer; 01/09/2006 a las 00:23
  #12 (permalink)  
Antiguo 01/09/2006, 12:52
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
yo lo alinio actualmente con

Cita:
padding: top right bottom left
el probelma surge cuanto tu texto es varable..
__________________
Saludos
FT.
www.fernando.com.mx
  #13 (permalink)  
Antiguo 01/09/2006, 14:13
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
me quedó perfecto el menú horizontal con listas e imágenes, muchas gracias fer10

el tema que el texto qu necesito alinear biene de la base de datos y es variable.

salu2
  #14 (permalink)  
Antiguo 15/09/2006, 14:32
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Retomo un poco la otra propuesta de solución

usando el hack de Ie

*html #navegador img {margin: -2px;}
  #15 (permalink)  
Antiguo 15/09/2006, 16:49
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Cita:
Iniciado por Rafael Ver Mensaje
Retomo un poco la otra propuesta de solución

usando el hack de Ie

*html #navegador img {margin: -2px;}

también lo había probado y funciona perfecto.


salu2
  #16 (permalink)  
Antiguo 15/09/2006, 20:36
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
un salto de linea que separa elementos de linea en el html se debe interpretar como un espacio, no hay nada mal ahi, es el comportamiento adecuado.
para poner imagenes una al lado de la otra se deben flotar.
__________________
Internet Explorer SuckS
Download FireFox
  #17 (permalink)  
Antiguo 19/09/2006, 23:49
 
Fecha de Ingreso: noviembre-2003
Mensajes: 798
Antigüedad: 14 años
Puntos: 8
Cita:
Iniciado por SiR.CARAJ0DIDA Ver Mensaje
un salto de linea que separa elementos de linea en el html se debe interpretar como un espacio, no hay nada mal ahi, es el comportamiento adecuado.
para poner imagenes una al lado de la otra se deben flotar.
en realidad no son salto de lineas, son espacion en blanco entre un elemento y el otro, es como si ubiera un &nbsp; o un espacion generado con la telca space del teclado.
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 01:26.