Foros del Web » Creando para Internet » CSS »

Alinear varios <ul> horizontalmente

Estas en el tema de Alinear varios <ul> horizontalmente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/09/2010, 17:35
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 22 años, 5 meses
Puntos: 59
Alinear varios <ul> horizontalmente

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
__________________
Cool Village
@Wakkos
  #2 (permalink)  
Antiguo 22/09/2010, 18:10
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 2 meses
Puntos: 181
Respuesta: Alinear varios <ul> horizontalmente

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.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 22/09/2010, 18:52
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 2 meses
Puntos: 181
Respuesta: Alinear varios <ul> horizontalmente

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
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #4 (permalink)  
Antiguo 22/09/2010, 19:54
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 15 años, 3 meses
Puntos: 6
Respuesta: Alinear varios <ul> horizontalmente

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.
  #5 (permalink)  
Antiguo 23/09/2010, 03:29
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 22 años, 5 meses
Puntos: 59
Respuesta: Alinear varios <ul> horizontalmente

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!
__________________
Cool Village
@Wakkos
  #6 (permalink)  
Antiguo 01/02/2011, 16:03
Avatar de JoseGMariani  
Fecha de Ingreso: diciembre-2008
Ubicación: Edo Lara
Mensajes: 251
Antigüedad: 15 años, 3 meses
Puntos: 8
Respuesta: Alinear varios <ul> horizontalmente

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 !
__________________
"Nunca seas arrogante con los humildes, ni humilde con los arrogantes." Paulo Coelho..
  #7 (permalink)  
Antiguo 01/02/2011, 17:32
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Alinear varios <ul> horizontalmente

Hola:

Cita:
Iniciado por JoseGMariani Ver Mensaje
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.

  #8 (permalink)  
Antiguo 01/02/2011, 21:24
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 13 años, 3 meses
Puntos: 9
Respuesta: Alinear varios <ul> horizontalmente

Cita:
Iniciado por JoseGMariani Ver Mensaje
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
__________________
Diseñador y Desarrollador web :)

Etiquetas: alinear, horizontalmente
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:29.