Alinear varios <ul> horizontalmente

[Wakkos]

Hola!

Definitivamente el CSS no es para mi.

Tengo unas imágenes mostradas con <UL> dentro de un loop de Wordpress:

Código PHP:

         <ul class="publicaciones"> 
        <li><em>Revista:<br /><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></em>
                <img src="<?php echo catch_that_image() ?>"/>
                </li>
 
    
 
        <br style="clear: both" />
        </ul>  

No logro hacer que me salgan uno al lado del otro. Y cuando lo logro gracias a un
width:33%;
float:left;
Se me salen por debajo del DIV que los contiene (ver http://ugartecomunicacion.es/?cat=4)
el estilo del <ul> es

Código HTML:

.publicaciones {
	border:dotted;
	list-style: none;
	margin: 0;
	padding: 0;
	width:33%;
	float:left;

Cómo puedo hacer para alinearlas una al lado de otra? deben salir 3 por fila (ya haré el "salto de carro" con un contador de PHP, o se puede hacer en CSS?)


Os dejo link al .css http://ugartecomunicacion.es/codigo....arte/style.css
Y al archivo en sí:
http://ugartecomunicacion.es/codigo....e/category.php (la parte del error es cuando el primer condicional se cumple, osea, el código que coloqué al principio del post)

Espero que sea suficiente información para que me ayudéis!

De nuevo, gracias de antemano

[pitufoweb]

y si solo cambias los LI a elementos en linea?


Algo asi:


.publicaciones li {
display: inline;
}



P.D. El <br style="clear: both" /> no es permitido dentro del UL.




Saludos.

[pitufoweb]

Otra ves yo :p


No había visto la web donde tienes el ejemplo.


Creo que tienes mal estructurado el HTML; Solo necesitas un UL y cada publicación la pones dentro de un LI.




Saludos

[rb3m]

Sí, bueno, si le estás poniendo un clear: both, obviamente nunca se van a poner lado a lado.

Yo lo haría a que quede algo más o menos así (obviamente dentro de un loop de Wordpress, pero que el resultado final sea así):

<ul class="publicaciones">
<li>Revista:<br />
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<img src="<?php echo catch_that_image() ?>"/>
</li>
<li>Revista:<br />
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<img src="<?php echo catch_that_image() ?>"/>
</li>
<li>Revista:<br />
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<img src="<?php echo catch_that_image() ?>"/>
</li>
</ul>

Si todo funcionara como es debido bastaría con que pusieras ul.publicaciones { display: table; } ul.publicaciones li { display: table-cell; width: 33%; } pero como IE no los interpreta bien lo más probable es que tengas que hacer esto:

ul.publicaciones { display: block; float: left; width: 33%; }

y como los elementos flotados no contribuyen a la altura del elemento padre hay que agregar:

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

después del </ul>

Eso extenderá el div dentro del cual está metida la lista.

[Wakkos]

Genios! meter todo dentro de un UL ayudó, pero el super toque definitivo lo dio el { display: block; float: left; width: 33%; }

!!!

Mil gracias Señores!

[JoseGMariani]

Buenas e buscado , peor no encuentro dar con mi problema, es que yo en mi monitor veo la pagina bien y cuando la veo en otro monitor.. osea otra resolucion, los Div SE VAN DE LADOO!! y no quedan posisionados en el lugarl.. porfavor me podrian ayudar,,. cual e sla diferencia.. osea yo lso tengo todos con

position adsoluta y en px.

pero ya e visto paginas que usan las mismas terminologias, y las veo correctamente en la portatil y en la otra maquina.. :S me pueden ayudar porfavcor.. me voya echar un tiroo.. despues de darme cuenta que todos los div se ivan de lado.. u.u !

[jomaruro]

Hola:

Iniciado por JoseGMariani

position adsoluta y en px.

Si los divs están definidos con posición absoluta se colocarán siempre en la posición que le indiques con respecto a su contenedor con posición relativa o en su defecto con respecto a la coordenada 0,0 del navegador (esquina superior izquierda).

Saludos.

[Kurozaki]

Iniciado por JoseGMariani

Buenas e buscado , peor no encuentro dar con mi problema, es que yo en mi monitor veo la pagina bien y cuando la veo en otro monitor.. osea otra resolucion, los Div SE VAN DE LADOO!! y no quedan posisionados en el lugarl.. porfavor me podrian ayudar,,. cual e sla diferencia.. osea yo lso tengo todos con

position adsoluta y en px.

pero ya e visto paginas que usan las mismas terminologias, y las veo correctamente en la portatil y en la otra maquina.. :S me pueden ayudar porfavcor.. me voya echar un tiroo.. despues de darme cuenta que todos los div se ivan de lado.. u.u !

preferiblemente, no uses posiciones...
Yo preferiblemente, suelo usar:
-div contenedores.
-distancias entre uno y otro objetos (margin y padding)
-flotar objetos (float:left o float:right)

y las dimensiones con px (width y height)

Saludos