Foros del Web » Creando para Internet » CSS »

Se me juntan los Div :(

Estas en el tema de Se me juntan los Div :( en el foro de CSS en Foros del Web. Buenas .. tengo un problema ... hago unos Divs con 1 lista de 4 elementos en cada uno pero ... para mi desgracia se me ...
  #1 (permalink)  
Antiguo 12/11/2006, 10:35
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
Se me juntan los Div :(

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
  #2 (permalink)  
Antiguo 12/11/2006, 10:46
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
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 ...
Cita:
<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
Cita:
<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..
Cita:
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 ?

Cita:
<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..
__________________
Saludos
FT.
www.fernando.com.mx

Última edición por fer10; 12/11/2006 a las 10:55
  #3 (permalink)  
Antiguo 12/11/2006, 11:19
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
maqueto con divs .. quiero quitar las tablas y poner los div pero como no logro cuadrar la mquetacion ..sta jodido
  #4 (permalink)  
Antiguo 12/11/2006, 11:20
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
pero entonces que hacen esas tabls ahy ? ahy estas marquetando con divs y tablas
__________________
Saludos
FT.
www.fernando.com.mx
  #5 (permalink)  
Antiguo 12/11/2006, 11:22
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
mira http://www.pasada.net/index1.html sin tablas y sigue igual de jodido el diseño
  #6 (permalink)  
Antiguo 12/11/2006, 11:25
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
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
  #7 (permalink)  
Antiguo 12/11/2006, 11:39
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
Cita:
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.
Cita:
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
Cita:
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..

Cita:
li {float:left; margin:5px; padding:0;hegiht:160px;}
los valores son ejemplos calculandole al tanteo..
__________________
Saludos
FT.
www.fernando.com.mx
  #8 (permalink)  
Antiguo 12/11/2006, 11:45
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
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?
  #9 (permalink)  
Antiguo 12/11/2006, 11:56
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
Cita:
<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.

Cita:
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..
__________________
Saludos
FT.
www.fernando.com.mx
  #10 (permalink)  
Antiguo 12/11/2006, 12:01
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
Umm mira que mal queda todo :( http://www.pasada.net/index1.html
  #11 (permalink)  
Antiguo 12/11/2006, 20:11
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
jeje tube que salir.. y me desconecte..
ya lo veo bien no ???

solo quitale el width a la imagen
Cita:
li img {display:block; float:left; width:150px;}
prueba con esto....
Cita:
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
__________________
Saludos
FT.
www.fernando.com.mx

Última edición por fer10; 12/11/2006 a las 20:19
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 08:30.