Foros del Web » Creando para Internet » HTML »

margen invisible??

Estas en el tema de margen invisible?? en el foro de HTML en Foros del Web. Hola ForosDelWeb!! soy nuevo en esto y tengo una dudilla que no sé resolver, seguramente es una tontería pero, no sé por que coj**** no ...
  #1 (permalink)  
Antiguo 30/07/2011, 10:14
 
Fecha de Ingreso: julio-2011
Mensajes: 7
Antigüedad: 6 años, 2 meses
Puntos: 0
margen invisible??

Hola ForosDelWeb!! soy nuevo en esto y tengo una dudilla que no sé resolver, seguramente es una tontería pero, no sé por que coj**** no me sale... :P

Tengo este codigo, por ejemplo:

Código HTML:
<ul>
  <li><a><img></a></li>
  <li><a><img></a></li>
</ul> 
quiero que los elementos <li> se muestren en un sola linea (display:inline) pero el resultado no es exactamente lo que yo espero, ya que entre elementos de la lista, aún mostrándolos en linea, me deja un par de píxeles de margen entre elementos que me gustaría que no dejara.. Lo analizo con FireBug y veo que el elemento <li> es ese par de píxeles más grande que la imagen (aunque a la imagen le he asignado el width y el height por css y le he puesto margin:0) no entiendo por que me deja más espacio del que le pido (que es 0). Alguien puede ayudarme?? muchas gracias!!!
  #2 (permalink)  
Antiguo 30/07/2011, 12:09
 
Fecha de Ingreso: julio-2008
Ubicación: Barcelona
Mensajes: 2.095
Antigüedad: 9 años, 2 meses
Puntos: 164
Respuesta: margen invisible??

float: left?? margin 0 y padding 0??

Un saludo!
  #3 (permalink)  
Antiguo 30/07/2011, 12:58
 
Fecha de Ingreso: julio-2011
Mensajes: 7
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: margen invisible??

margin y padding sí, pero... float:left??? para que si ya he puesto un inline??
  #4 (permalink)  
Antiguo 30/07/2011, 12:59
 
Fecha de Ingreso: julio-2011
Mensajes: 7
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: margen invisible??

joder... le acabo de poner el float:left y perfecto!!! pero, por que???
  #5 (permalink)  
Antiguo 30/07/2011, 13:30
 
Fecha de Ingreso: julio-2011
Mensajes: 7
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: margen invisible??

que cachondo es CSS ahora que se coloca bien el margen raro ese me sale otra cosa... acabo antes si os pongo el HTML y a ver si alguien me sabe decir que estoy haciendo mal...

Código HTML:
<div class="image-gallery">
<ul>
	<li>
		<ul class="row first">
			<li class="caption first">
				<a title="Caption 1-1" href="#">
				<img class="gallery" alt="Caption 1-1" src="elements/images/lastprints/lastprint_1-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 1-2" href="#">
				<img class="gallery" alt="Caption 1-2" src="elements/images/lastprints/lastprint_1-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 1-3" href="#">
				<img class="gallery" alt="Caption 1-3" src="elements/images/lastprints/lastprint_1-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 2-1" href="#">
				<img class="gallery" alt="Caption 2-1" src="elements/images/lastprints/lastprint_2-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 2-2" href="#">
				<img class="gallery" alt="Caption 2-2" src="elements/images/lastprints/lastprint_2-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 2-3" href="#">
				<img class="gallery" alt="Caption 2-3" src="elements/images/lastprints/lastprint_2-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 3-1" href="#">
				<img class="gallery" alt="Caption 3-1" src="elements/images/lastprints/lastprint_3-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 3-2" href="#">
				<img class="gallery" alt="Caption 3-2" src="elements/images/lastprints/lastprint_3-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 3-3" href="#">
				<img class="gallery" alt="Caption 3-3" src="elements/images/lastprints/lastprint_3-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 4-1" href="#">
				<img class="gallery" alt="Caption 4-1" src="elements/images/lastprints/lastprint_3-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 4-2" href="#">
				<img class="gallery" alt="Caption 4-2" src="elements/images/lastprints/lastprint_3-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 4-3" href="#">
				<img class="gallery" alt="Caption 4-3" src="elements/images/lastprints/lastprint_3-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 5-1" href="#">
				<img class="gallery" alt="Caption 5-1" src="elements/images/lastprints/lastprint_4-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 5-2" href="#">
				<img class="gallery" alt="Caption 5-2" src="elements/images/lastprints/lastprint_4-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 5-3" href="#">
				<img class="gallery" alt="Caption 5-3" src="elements/images/lastprints/lastprint_4-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row last">
			<li class="caption first">
				<a title="Caption 6-1" href="#">
				<img class="gallery" alt="Caption 6-1" src="elements/images/lastprints/lastprint_4-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 6-2" href="#">
				<img class="gallery" alt="Caption 6-2" src="elements/images/lastprints/lastprint_4-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 6-3" href="#">
				<img class="gallery" alt="Caption 6-3" src="elements/images/lastprints/lastprint_4-3.png">
				</a>
			</li>
		</ul>
	</li>
</ul>
</div> 
El efecto deseado es el de una matriz de imagenes 3x6 con 10px de separacion entre imagen y 10px de margen entre filas...

Gracias!!

Este es todo el css que tiene asociado cada clase/id

Código:
div#second div.image-gallery {
	margin-bottom: 30px;
}

div#second img.gallery {
	border-top: 1px solid #d8d8d8;
	width: 67px;
	height: 41px;
}

div#second ul.row li.caption,
div#links ul.links li {
	display: inline;
	float: left;
}

div#second ul.row {
	margin: 5px 0;
}

div#second ul.row li {
	margin: 0 6px;
}

div#second ul.row li.first {
	margin: 0 6px 0 0;
}

div#second ul.row li.last {
	margin: 0 0 0 6px;
}

div#second ul.first {
	margin: 0 0 5px 0;
}

div#second ul.last {
	margin: 5px 0 0 0;
}
o si alguien me aconseja una manera mejor de conseguir una matriz de imagenes.. como os dije soy novatillo... :P

Última edición por oniakai; 30/07/2011 a las 15:02
  #6 (permalink)  
Antiguo 30/07/2011, 15:53
 
Fecha de Ingreso: julio-2011
Mensajes: 7
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: margen invisible??

Ya sé que nadie me está haciendo demasiado caso, pero yo a lo mio...

Al final he hecho 3divs (columnas) y una <ul> dentro de cada div con seis <li> dentro. float left a la primera y a la del centro, y float right a la de la derecha. Y margenes entre columnas funcionando bien, el problema lo tengo ahora con los margenes superior e inferior entre cada li, ¡me los superpone! si le doy margin:5px 0; a cada <li> para que me haga 10px de separacion entre elementos solo me deja 5px y no sé por que, alguna idea??

PD no se si tiene algo que ver pero dentro de cada <li> hay una <a> y dentro una <img> con su width y height especificados...

GRACIAS comunidad!!!

Etiquetas: margen
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 13:28.