Comunidad de diseño web y desarrollo en internet online

Problema de alineamiento de imágenes utilizando listas no ordenadas

Citar            
MensajeEscrito el 12 Feb 2013 02:08 pm
Quiero colocar dentro de una div que mide 988px una galería de imágenes utilizando una "lista no ordenada". El problema es que la última imagen de la derecha no queda alineada al borde de ese lado como si tubiese alguna cosa que lo impide y ella pasa para la línea de abajo.

Mi html es este

Código HTML :

<div id="galeria">
  <ul>
    <li class="lateral-esquerda"><a href="instalacoes/01.jpg" title="#"><img src="images/galeria/camisetas-empresas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li><a href="instalacoes/02.jpg" title="#"><img src="images/galeria/regatas-empresas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li><a href="instalacoes/03.jpg" title="#"><img src="images/galeria/abadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li><a href="instalacoes/04.jpg" title="#"><img src="images/galeria/coletes-dupla-face-personalizados.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li><a href="instalacoes/05.jpg" title="#"><img src="images/galeria/bones-promocionais.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li class="lateral-direita"><a href="instalacoes/06.jpg" title="#"><img src="images/galeria/viseiras-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li class="lateral-esquerda"> <a href="instalacoes/08.jpg" title="#"> <img src="images/galeria/bandanas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li> <a href="instalacoes/09.jpg" title="#"> <img src="images/galeria/windbanner.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li> <a href="instalacoes/11.jpg" title="#"> <img src="images/galeria/bandeiras-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li> <a href="instalacoes/12.jpg" title="#"> <img src="images/galeria/bandeiroes.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li> <a href="instalacoes/13.jpg" title="#"> <img src="images/galeria/ecobags-empresas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
      <li class="lateral-direita"> <a href="instalacoes/14.jpg" title="#"> <img src="images/galeria/sacolas-empresas-personalizadas.jpg" alt="grupos" width="150" height="210" border="0" /></a></li>
         </ul>
    <div class="clear"> </div>
</div>


y mi CSS

Código CSS :

#galeria {
    width:988px;
   padding-bottom:15px;
   background-color:#0FF;
   overflow:hidden;
}

#galeria li {
    display:inline;
    width:150px;
    float:left;
   padding-top:20px;
   padding-right:14px;
}

#galeria li.lateral-esquerda {
    display:inline;
    width:150px;
    float:left;
   padding-top:20px;
   padding-right:18px;
}

#galeria li.lateral-direita {
    display:inline;
    width:150px;
    float:left;
   padding-top:20px;
}


Alineamiento correcto
http://l4c.me/fotos/Ishkandar/alineamento-correcto/sizes/o

Situación actual
https://docs.google.com/file/d/0B8Kcz2fc4NboclplUHdaaXlIREU/edit?usp=sharing

Por Ishkandar

Claber

303 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 12 Feb 2013 02:56 pm
Son varias las cosas que deberías cambiar. No he probado el código pero como he hecho esto unas cuantas veces te diré que los estilos para las clases lateral-esquerda y lateral-direita son redundantes porque los elementos a los que les aplicas esos estilos ya son <li> (excepto los paddings laterales).

Por otro lado tienes 12 <li> de 150px cada uno y más el margin que le has puesto excede por mucho los 988px de ancho del contenedor. Y como los <li> tienen display inline lo que ocurrirá es que cuando se complete la primera línea, se creará otra debajo. Debes comprender que cuando un elemento tiene display inline ese elemento se comportará como si fuera una palabra en un párrafo. Como sabrás cuando la cantidad de palabras excede un renglón simplemente se crea otro debajo de éste.

No necesitas flotar los <li> a la izquierda si el tipo de display es inline porque al ser "palabras" ya se alinean a la izquierda, y para que te tome margin en esos elementos debes usar inline-block (las palabras no tienen "margin", solo los párrafos).

Dentro del contenedor #galeria tienes un elemento <ul>, ese elemento debe tener un ancho total a la suma de los anchos de los elementos que contiene y debe tener overflow: visible; para que los elementos contenido siempre tengan espacio a la derecha y así no se cree una nueva línea.

Entonces en mi versión modificada de tu CSS me queda:

Código HTML :

<style type="text/css">
#galeria {
    width:988px;
   padding-bottom:15px;
   background-color:#0FF;
   overflow:hidden;
}
#galeria ul {
   width: 2020px;
   overflow: visible;
}
#galeria li {
    display:inline-block;
    width:150px;
   padding-top:20px;
   padding-right:14px;
}

#galeria li.lateral-esquerda {
   padding-right:18px !important;
}

#galeria li.lateral-direita {
   
}
</style>

Finalmente, y esto suele producir confusión, es que los espacios en blanco (y retorno de carro y tabulaciones, etc...) que aparecen entre los tags <li> ocupan espacio si los elementos <li> son inline o inline-block.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 12 Feb 2013 06:00 pm
DriverOp, antes que nada gracias por la disposición para ayudar.

Coloqué tu código editado y las imágenes quedaron en apenas una columna.

En relación a tu comentário que la suma de los anchos de las imágenes (150 px) excede los 988 px, es porque ellas tienen que distribuirse en dos líneas.

Coloqué aqui mis medidas para que puedas verlas

[img]https://docs.google.com/file/d/0B8Kcz2fc4NboSkVndTVzLWp0RWs/edit?usp=sharing[/img]

pero si no querés abrir es así

150 + 20 + 150 + 17 + 150 + 17 + 150 + 17 + 150 + 17 + 150 = 988 px

Por Ishkandar

Claber

303 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 12 Feb 2013 07:09 pm
Como aportación a tu solución, más no la solución completa, las listas no ordenadas tienen un margin por defecto por el markup que utilizamos. La solución inmediata es:

Código CSS :

ul {
  font-size: 0;
}
li {
  font-size: 12pt; // wtv
}


Saludos.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 12 Feb 2013 09:37 pm
Kinduff, intenté tu solución pero no la pude hacer funcionar, por no tener una base conceptual sólida tube que trabajar a "ensayo y error" tomando como punto de partida um menu horizontal que siempre utilizo en mis páginas. Me quedé con algunas dudas, una de ellas é porque no conseguí dejar el padding bottom como cero, cuando hago eso se pierde el alineamento. También, cuando coloqué un padding-top de 10 px la classe lateral-direita parecía tener un própio de ella y salía del alineamento quedando en el top con 20. En fin, aquí la "solución"

Código CSS :

.galeria ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
}

.galeria ul li{
   position: relative;
   display: inline;
   float: left;
}

.galeria ul li a{
   display: block;
   width: 150px; /*1 - Largura de c/u dos items do menu*/
   padding:0 17px 10px 0;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
   
/* Holly Hack for IE \*/
* html .galeria ul li { float: left; height: 1%; }
* html .galeria ul li a { height: 1%; }
/* End */

li.lateral-esquerda {
   display: block;
   width: 150px; 
   padding:0 20px 10px 0;
}

li.lateral-direita {
   display: block;
   width: 150px; 
   padding: 0 0 10px 0;
}

Por Ishkandar

Claber

303 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.