porqué. porqué y porquéééé

paolamurias · #1 (**permalink**) 19/12/2006, 13:48

miren aquí es la pagina de prueba de mi primer pagina,un portfolio de un orfebre, hasta ahora venia bien (fijense en anillos, dijes y pendientes), peroooo :
tengo un div que se llama galería donde están adentro otros divcitos: fotosjoyas y fotosjoyasder, en las otras páginas funciono bien, pero en esta la segunda fila de fotos se ve mal, una sola y en el centro.
¿alguien podría aclararme porqué?????
el codigo de galería y fotosjoyas es este:

Cita:

#galeria{
margin-top:20px;
margin-left:10px;
width:520px;
float:left;
}
.fotosjoyas{
margin-top:20px;
width:247px;
text-align:center;
float:left;
}
.fotosjoyasder{
margin-top:20px;
width:247px;
margin-left:10px;
text-align:center;
float:right;
}

AlZuwaga · #2 (**permalink**) 19/12/2006, 15:00

Hola Paola, en realidad no sé por qué no funciona como esperás, pero me entretuve un ratito "reformulando" tu galería.

Te dejo un ejemplo:

Código:

#galeria ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#galeria img {
	display: block;
}

/*
#galeria span {
	width: 245px;

}
*/

#galeria li {
	width: 245px;
	float: left;
	margin-left: 10px;
}



<div id="galeria">
<ul>
<li><img src="pulsera-duo.jpg" alt="Serie Ondas. Pulsera dual en plata y cobre" width="245" height="245" /> Serie Ondas. Pulsera dual en plata y cobre</li>
<li><img src="pulsera-duo.jpg" alt="Serie Ondas. Pulsera dual en plata y cobre" width="245" height="245" /> Serie Ondas. Pulsera dual en plata y cobre</li>
<li><img src="pulsera-duo.jpg" alt="Serie Ondas. Pulsera dual en plata y cobre" width="245" height="245" /> Serie Ondas. Pulsera dual en plata y cobre</li>
<li><img src="pulsera-duo.jpg" alt="Serie Ondas. Pulsera dual en plata y cobre" width="245" height="245" /> Serie Ondas. Pulsera dual en plata y cobre</li>
<li><img src="pulsera-duo.jpg" alt="Serie Ondas. Pulsera dual en plata y cobre" width="245" height="245" /> Serie Ondas. Pulsera dual en plata y cobre</li>
<li><img src="pulsera-duo.jpg" alt="Serie Ondas. Pulsera dual en plata y cobre" width="245" height="245" /> Serie Ondas. Pulsera dual en plata y cobre</li>
<li><img src="pulsera-duo.jpg" alt="Serie Ondas. Pulsera dual en plata y cobre" width="245" height="245" /> Serie Ondas. Pulsera dual en plata y cobre</li>
</ul>
</div>

Creo que hay cosas que están de más como el "#galeria span", pero bueno.. es la idea :)

Saludos

EDIT: Si, definitivamente está de más porque al final eliminé el <span>... la onda que había probado al principio era:

Código:

<li><img src="pulsera-duo.jpg" alt="Serie Ondas. Pulsera dual en plata y cobre" width="245" height="245" /> <span>Serie Ondas. Pulsera dual en plata y cobre</spn></li>

paolamurias · #3 (**permalink**) 19/12/2006, 16:09

Fridureiks · #4 (**permalink**) 19/12/2006, 16:38

Gracias Al Zuwaga, aunque no era mi problema, yo tambien aprendi de tu respuesta

Saludos.

AlZuwaga · #5 (**permalink**) 19/12/2006, 17:22

Ajajajja, me gustó esa caricatura!
De nada a ambos.

Ahora, Paola, enseñame a dibujar!!!

PD: Me parece (no lo recuerdo

) pero creo que no lo probé en IE... pero nada del otro mundo... unos ajustecillos por aquí y otros por allí en caso de no funcionar correctamente ;)

Fridureiks · #6 (**permalink**) 19/12/2006, 19:58

Ahora, me surgio una duda jeje, disculpen, soy nuevo en esto de maquetar sin tablas :(

En este caso tenemos que cada "item" es una imagen y su descripcion, nada mas. Si yo tuviera una imagen, con una descripcion, pero siendo la descripcion formada por digamos... "titulo", "descripcion", " fecha", "etc", como haria para presentar todos esos datos de forma ordenada? Metiendo un div dentro de cada "<li>"? :S

Seria algo mas o menos asi:

Con tablas, lo hubiera hecho metiendo una tabla con forma 2x4 debajo de la celtada que llevaria la imagen y listo, pero sin usar tablas no se como hacerlo.

Gracias de antemano :)

AlZuwaga · #7 (**permalink**) 20/12/2006, 10:32

puesss.. la tablita muestra datos tabulares ¿no?
entonces yo lo haría con una tabla :)

paolamurias · #8 (**permalink**) 21/12/2006, 05:20

De nuevo porqueeeeee.
Miren aca
Juro que ayer funcionaba bien, una foto al lado de otra ( o sea dos por fila)
y hoy no. se ve una debajo de otra. y no hay forma. trate con clear, agrandando la caja de #galeria, pero nada.
Funciona si a las fotos que quiero que floten a la derecha les pongo el float:right ; en cada linea, pero seguro que en la hoja de estilos es donde se cocina esto.
Alguna sugerencia?
aca va el codigo

Cita:

#galeria{
margin-top:20px;
margin-left:10px;
width:520px;
float:left;
}
#galeria ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#galeria img {
display: block;
padding-bottom:5px;
}

#galeria li {
list-style:none;
width: 245px;
text-align:center;
padding-bottom:15px;
border-bottom-style:none;
}

Mikmoro · #9 (**permalink**) 21/12/2006, 13:16

Creo que el que le pongas a la galería float left, no te va a afectar a los elementos <li>. Ponle ese float left a la clase de los <li> y creo que funcionará.

Mikel.

AlZuwaga · #10 (**permalink**) 21/12/2006, 15:41

Paola, te olvidaste de colocarle float:left; en #galeria li

paolamurias · #11 (**permalink**) 22/12/2006, 18:09

Gracias! Al peor cazador también se le escapa la liebre.

Fridureiks · #12 (**permalink**) 22/12/2006, 23:13

Cita:

Iniciado por Al Zuwaga

puesss.. la tablita muestra datos tabulares ¿no?
entonces yo lo haría con una tabla :)

amsss ¡gracias!, me meti tanto en la cabeza eso de aprender a maquetar sin tablas que... ya ves los lios que me hago por cosas simples xD

Saludos.