Por que no se alinean

edGarzitho · #1 (**permalink**) 29/12/2009, 16:32

Bueno pido ayuda, a arreglar mi galeria de fotos en .css las fotos estan en listas y se supone que deben ir una delante de otra pero pasa algo q no encuentro que sucede, se saltan 2 esapacion.. aqui dejo una captura. espero ayuda amigos!!

Codigo:

Código HTML:

Ver original<body>
 
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
 
<div id="principal">
    <h3>GALERÍA</h3>
   <ul>
      <li><a href="#"><img src="objetos/1.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="objetos/2.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="objetos/3.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="objetos/4.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="objetos/6.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="objetos/7.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
      <li><a href="#"><img src="objetos/8.jpg" border="0" alt=""/><br /><span>Descripci&oacute;n de la imagen</span></a></li>
       
      
       
 
   </ul>
</div>
</body>

.Css

Código CSS:

Ver originalbody {
background-color:#EBEEF2;
margin:20px;
}
h3 {
color:#838C98;
}
img {
border:1px solid #EEEEEE;
}
a {
text-decoration:none;
}
span {
color:#515151;
font-family:Trebuchet MS;
font-size:9pt;
}
#principal {
margin:0 auto;
position:relative;
}
#principal ul {
}
#principal li {
background-color:#F5F7F9;
border-bottom:1px solid #A5A7AA;
border-right:1px solid #A5A7AA;
display:inline;
float:left;
margin:10px;
padding:5px;
text-align:center;
width:220px; }

emiliodeg · #2 (**permalink**) 29/12/2009, 17:19

pq la caja 1 y 2 son un px mas grandes y traban a la 4ta
solucion cada 3 elementos poner un clear:both; o definirle al li un alto fijo height:150px cuestion q todos tengan el mismo alto y esto no suceda

Copia · #3 (**permalink**) 29/12/2009, 17:51

como te dice emiliodeg hay alguno que son muy grandes, en cuanto al alto, trata de que sean del mismo tamaño todos.

edGarzitho · #4 (**permalink**) 29/12/2009, 21:51

ahaha no entiendo, si todo esta definido en el css y se supone obtiene los mismos valores.!!

uokesita · #5 (**permalink**) 30/12/2009, 01:55

verifica el tamaño de las imágenes la primera se ve mas larga que la segunda por ejemplo.. verifica que tengan el mismo height, debe ser eso

edGarzitho · #6 (**permalink**) 30/12/2009, 02:06

uokesita gracias por reponder amigo! las imagenes tienen el mismo tamaño todas :S.. ya revise eso y aun sigue asi dejando ese espacio

Impostor · #7 (**permalink**) 30/12/2009, 04:16

Cita:

Iniciado por edGarzitho

ahaha no entiendo, si todo esta definido en el css y se supone obtiene los mismos valores.!!

Error, si revisas tu código veras que #principal li no tiene definido ningún alto (height) y eso provoca el descuadre. Añádele un height que te vaya bien y el descuadre será historia.

Saludos¡¡

AhmedRugama · #8 (**permalink**) 30/12/2009, 09:42

ya por ultimo, evitate problemas y usa una tabla

emiliodeg · #9 (**permalink**) 30/12/2009, 13:41

Cita:

Iniciado por AhmedRugama

ya por ultimo, evitate problemas y usa una tabla

en este caso estaria mal utilizar una tabla pq es una lista de personas o un tabulado de datos
es solo teoria eh, en la practica muchos sitios siguen usando las tablas como caballo de torya

AhmedRugama · #10 (**permalink**) 30/12/2009, 14:44

Si claro, por eso fue el ya por ultimo. Pero igual el comportamiento que se busca es el de una tabla, asi que podria considerarse una opcion.

edGarzitho · #11 (**permalink**) 30/12/2009, 23:48

Graciaz! amigos. el problema fue solucionado.
muchas graciaz...

Impostor · #12 (**permalink**) 31/12/2009, 05:02

Cita:

Iniciado por edGarzitho

Graciaz! amigos. el problema fue solucionado.

¿Como lo solucionasteis?

edGarzitho · #13 (**permalink**) 31/12/2009, 14:22

Cita:

Iniciado por Impostor

¿Como lo solucionasteis?

1. las imagenes 1 y 2 estaban mas grandes q las demas.

2. le puse un height a la capa #principal li como me dijeron para que todos tubieran un mismo tamaño