Problemon espacio en blanco en Div con Imagenes

zsamer · #1 (**permalink**) 30/08/2006, 14:55

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; 
height: 25px; 
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?

fer10 · #2 (**permalink**) 30/08/2006, 15:46

solo te pasa en iE verdad ???

zsamer · #3 (**permalink**) 30/08/2006, 18:33

en ambos, firefox y ie.

con firefox lo pude arreglar con aunque es medio parche:

Cita:

white-space: nowrap;

Rafael · #4 (**permalink**) 31/08/2006, 00:34

Supongo que medio bárbaro pero funciona
#navegador img {margin: -2px;}

zsamer · #5 (**permalink**) 31/08/2006, 07:56

funciona pero en firefox se sobresale hacia la izquierda y hacia arriba

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

fer10 · #6 (**permalink**) 31/08/2006, 09:47

metelas en listas..

zsamer · #7 (**permalink**) 31/08/2006, 09:52

Cita:

Iniciado por fer10

metelas en listas..

soy medio novato en css, a que te refieres a meterlas en listas?

gracias

salu2

fer10 · #8 (**permalink**) 31/08/2006, 09:58

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

zsamer · #9 (**permalink**) 31/08/2006, 16:28

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...

fer10 · #10 (**permalink**) 31/08/2006, 21:13

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

zsamer · #11 (**permalink**) 31/08/2006, 23:17

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.

fer10 · #12 (**permalink**) 01/09/2006, 11:52

yo lo alinio actualmente con

Cita:

padding: top right bottom left

el probelma surge cuanto tu texto es varable..

zsamer · #13 (**permalink**) 01/09/2006, 13:13

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

Rafael · #14 (**permalink**) 15/09/2006, 13:32

Retomo un poco la otra propuesta de solución

usando el hack de Ie

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

zsamer · #15 (**permalink**) 15/09/2006, 15:49

Cita:

Iniciado por Rafael

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

SiR.CARAJ0DIDA · #16 (**permalink**) 15/09/2006, 19:36

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.

zsamer · #17 (**permalink**) 19/09/2006, 22:49

Cita:

Iniciado por SiR.CARAJ0DIDA

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   o un espacion generado con la telca space del teclado.