Saludos
El motivo por el cual escribo se debe a una inquietud que me surgió al
intentar implantar una especie de galería (solo por motivos de
práctica, evitando así un domingo ocioso). Bueno, el hecho es que se
presenta una lista desordenada de imágenes, cada item de dicha lista
presenta consigo una imagen....
XHTML
<div id="wrapper">
....
<div id="thumbs">
<h2>Imagenes de Muestra</h2>
<ul>
<li><a href="#"><img src="75x75.gif" alt="" /></a></li>
.....
</ul>
</div>
</div>
CSS
#thumbs li{
list-style: none;
display: inline;
margin: 10px 0 0 8px;
padding: 0;
}
Deseaba presentar dicha lista de imágenes de manera horizontal, evite
el uso de la propiedad 'float', asi que simplemente hice que los items
se visualizarán como elementos en línea. La caja principal ('wrapper')
tiene una anchura de 603px, si presento 7 imágenes de 75px,
adicionalmente cada imagen presenta un borde de 1px, esto haría de la
imagen en conjunto con su borde 77px, en total estaría ocupando 539px
hasta ahora. Si a cada imagen le asigno un margen izquierdo de 8px,
estaría ocupando 595px de los 603px de la caja contenedora, ahora
bien, los 8px restantes se le "asignarían" al margen derecho de la
última imagen. Pero resulta que lo que yo pensaba que era lógico no
resulto así. Tanto Firefox, Opera e IE me mostraban dicha lista más
grandes de lo que yo pensaba. Lo que note al principio es que los
navegadores si me respetaban el margen izquierdo de la primera imagen,
pero en las imágenes interiores se notaba más anchura de la
especificada, lo cual me llevo a pensar que algo pasaba con el margen
derecho (pero este estaba especificado en 0). La solución que le
encontre a este problema fue la siguiente.
CSS
#thumbs li{
list-style: none;
display: inline;
margin: 10px -4px 0 8px;
padding: 0;
}
Ahora bien, el problema según las muestras de los 3 navegadores
mencionados previamente quedo resuelto. Pero quede con la inquietud,
¿por qué sucede esto?, ¿por que había más margen en las imágenes
interiores?.
Pueden encontrar la muestra del problema resuelto en:
http://sistemas.ing.ula.ve/~milton/practicas/gallery.html
Un saludo
--
# Milton Mazzarri
# Usuario de GNU/Linux: #369158
# Ubuntu Linux
# Weblog: http://milmazz.blogspot.com
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
