Se me juntan los Div :(

[pasada.net]

Buenas .. tengo un problema ... hago unos Divs con 1 lista de 4 elementos en cada uno pero ... para mi desgracia se me juntan .. quiero que me queden como en www.pasada.net pero me quedan asi http://www.pasada.net/index1.html

alguien me ayudaria a maquetarlo bien ? Gracias

[fer10]

yo le asignaria un heigth deterninado a la LI calculado maso menos que se pase poquito para cuando alla mas texto..

pero aun asi como puedo ver en una parte usas listas y luego tablas =s

asi ...

<li><a href="http://www.pasada.net/elijah-wood/"><img border="0" src="elijah-wood/p/4p.jpg" width="80" height="63"></a>

<span>Elijah Wood</span></li>
<li><a href="http://www.pasada.net/david-bisbal/"><img src="david-bisbal/p/5p.jpg" alt="David Bisbal" width="80" height="80" border="0" /></a>
<span>David Bisbal</span></li>
<li><a href="http://www.pasada.net/rafa-nadal/"><img src="rafa-nadal/p/10p.jpg" width="80" height="89" alt="Rafael Nadal" border="0"></a>
<span>Rafa Nadal</span></li>
<li><a href="http://www.pasada.net/marisa-miller/"><img border="0" src="marisa-miller/p/10p.jpg" width="80" height="123" alt="Marisa Miller"></a>
<span>Marisa Miller</span></a></li>

</ul>

y liuego asi.. =O

<table width="736" height="507" border="0" bordercolor="#000000" cellspacing="0" cellpadding="0">
<tr>
<td width="25%" align="center"><a href="http://www.pasada.net/david-beckham/"><img border="0" src="david-beckham/p/8p.jpg" width="80" height="105" alt="David Beckham"></a>
<p>David Beckham</td>

o marquetas o no con tablas, si no no se puede..

por cierto..
creo que esto debe ir asi..

a href="http://www.pasada.net/david-bisbal/"><img src="david-bisbal/p/5p.jpg" alt="David Bisbal" width="80" height="80" border="0" />
<span>David Bisbal</span></a>

ya que el texto es parte de la imagen..

y que paso con esta parte ?

<a href="http://www.pasada.net/marisa-miller/"><img border="0" src="marisa-miller/p/10p.jpg" width="80" height="123" alt="Marisa Miller"></a>
<span>Marisa Miller</span></a>

cierras 2 veces la etqieuta img..

[pasada.net]

maqueto con divs .. quiero quitar las tablas y poner los div pero como no logro cuadrar la mquetacion ..sta jodido

[fer10]

pero entonces que hacen esas tabls ahy ? ahy estas marquetando con divs y tablas

[pasada.net]

mira http://www.pasada.net/index1.html sin tablas y sigue igual de jodido el diseño

[pasada.net]

Quiero que se me queden los elementos de las listas [ 4 Elementos tiene cada lista ] centrados igual que esta el texto [ Disfruta de todas nuestras secciones o entra a ver alguno de estos artistas pulsando sobre su imagen ]

y debajo la siguiente lista y asi sucesivamente

[fer10]

Disfruta de todas nuestras secciones o entra a ver alguno de estos artistas pulsando sobre su imagen

que pierdes con ponersela al texto tambien, muchos usarios ni leen las instruciones debes hacer el diseño lo mas intuitivo posible. ( es una opinion no vamos a pelarnos por eso jejej)


bueno al probelma tienes primero que limpear los floatantes.

href="http://www.pasada.net/marisa-miller/"><img src="marisa-miller/p/10p.jpg" alt="Marisa Miller" border="0" height="123" width="80"></a>
<span>Marisa Miller</span></li>
</ul>
<div style="clear:both;"></div>
</div>
</div>

se ponen a bajo de los flotantes. en este caso las listas.

depues en el css le asignas a la lista un width

ul {list-style:none;
margin:0;
padding:0;
width:780px;
}

y a los items de la lista le asginas un alto para todas (eso impide que se te encimen una abajo de otra y dejando espacios en blanco..

li {float:left; margin:5px; padding:0;hegiht:160px;}

los valores son ejemplos calculandole al tanteo..

[pasada.net]

Lo de <div style="clear:both;"></div> eso no lo entendi .. otra cosa los valores de width y height no se le puede dar en porcentajes? asi se veria igual siendo la resolucion que sea de pantalla.. no?

[fer10]

<div style="clear:both;"></div>

rayos no se como explicarte los flotates pero lo intentare..

cada vez que usas flotantes (float:left, right) se colocan los elementos "avientan" a los lados, pero si haces esto con las listas el texto quedara pegado a las listas ya que estan floatando todas.. puedes hacer la prubea..

entocnes con clear: limpias los flotantes pra que empize abajo de los floatantes.
por ahy encontre un manualisto que decia algo como de recuerda limpiar los floatentes simpre o algo asi, pero francamente nunca lo guarde en los favoritos pero muy seguramente encuentras informacion mas compelta por ahy en la red.

los valores de width y height no se le puede dar en porcentajes?

claro que si, pero no se que broncas te daria yo casi no trabajo con ellos.
pero el width, lo puedes definir como un bloque y ya tiene todo el width del contendor.. y sobre el heigth, para que quieres ponerle porcentaje ese solo se define para los elementos..

[pasada.net]

Umm mira que mal queda todo :( http://www.pasada.net/index1.html

[fer10]

jeje tube que salir.. y me desconecte..
ya lo veo bien no ???

solo quitale el width a la imagen

li img {display:block; float:left; width:150px;}

prueba con esto....

li {float:left; margin:5px; padding:0;}
li a img {border:none; }
li img {display:block;margin:auto;}

use margin auto para centrar las imagnes y se vean como acomodadas conforme al texto