Foros del Web » Creando para Internet » CSS »

Columnas con UL y LI

Estas en el tema de Columnas con UL y LI en el foro de CSS en Foros del Web. Me pueden ayudar con esto, no es la primera vez que me pasa, pero nunca encuentro cual es el "truquito" que me permite arreglar este ...
  #1 (permalink)  
Antiguo 28/11/2009, 17:35
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 20 años, 11 meses
Puntos: 34
Columnas con UL y LI

Me pueden ayudar con esto, no es la primera vez que me pasa, pero nunca encuentro cual es el "truquito" que me permite arreglar este error...

Quiero pasar de esto:


A 3 columnas, pero me pasa esto...


El CSS de esa parte es:

Código HTML:
/* Post */
#post {
	width:500px;
	margin:0 auto;
	padding:5px 0;
}

#post ul {
	padding: 0px; margin: 0px; width: 486px; border: 1px coral dashed;
}
#post li {
	background: url(images/dot.gif) no-repeat left top;
	background-repeat: no-repeat;
	background-position: 0 .65em;
	padding: 1px 0px 1px 12px;
	list-style-type: none;
	border: 1px black dashed;
	width: 162px;
}
.postcontent {
   padding:5px;
   border: 1px solid #a0abb4;
   margin-bottom:10px;
}
Código de la página es:

Código HTML:
<div id="post">

<div class="title"><a href="europe/" rel="bookmark" title="Link to Europe">Europe (55)</a>
</div>

<div class="postcontent">
<div id="divListado">
<ul class="col">
<li><a href="europe/austria/">Austria</a> (12)</li>
<li><a href="europe/estonia/">Estonia</a> (2)</li>
<li><a href="europe/finland/">Finland</a> (3)</li>

<li><a href="europe/france/">France</a> (8)</li>
<li><a href="europe/germany/">Germany</a> (2)</li>
<li><a href="europe/hungary/">Hungary</a> (6)</li>
<li><a href="europe/italy/">Italy</a> (5)</li>
<li><a href="europe/liechtenstein/">Liechtenstein</a> (1)</li>

<li><a href="europe/netherlands/">Netherlands</a> (3)</li>
<li><a href="europe/norway/">Norway</a> (2)</li>
<li><a href="europe/poland/">Poland</a> (2)</li>
<li><a href="europe/spain/">Spain</a> (2)</li>
<li><a href="europe/united-kingdom/">United Kingdom</a> (7)</li>

</ul>
</div> <!-- Cierro divListado -->
</div> <!-- Cierro post-content -->
</div> <!-- Cierro post -->
<div id="post">
<div class="title"><a href="oceania/" rel="bookmark" title="Link to Oceania">Oceania (13)</a>
</div>

<div class="postcontent">
<div id="divListado">
<ul class="col">
<li><a href="oceania/australia/">Australia</a> (10)</li>

<li><a href="oceania/new-zealand/">New Zealand</a> (3)</li>
</ul>
</div> <!-- Cierro divListado -->
</div> <!-- Cierro post-content -->
</div> <!-- Cierro post -->
<div class="clear"></div> 
Si necesitan algun dato más me avisan, yo voy a seguir haciendo pruebas a ver si logro algo
__________________
elGastronomo
  #2 (permalink)  
Antiguo 28/11/2009, 18:37
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 20 años, 11 meses
Puntos: 34
Respuesta: Columnas con UL y LI

Hice estos cambios...

Código HTML:
#post ul {
	padding: 0px;
	margin: 0px;
	width: 486px;
	display: block;
	float: left;
}

#post li {
	background: url(images/dot.gif) no-repeat left top;
	background-repeat: no-repeat;
	background-position: 0 .65em;
	padding: 1px 0px 1px 10px;
	list-style-type: none;
	width: 150px;
	float: left;
}
.title {
    background: #e4e5d4 url(images/postbg.gif);
	padding:3px;
	padding-left:10px;
	font-size: 14px;
	text-transform:uppercase;
    font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;	
	float: left;
	width:487px;
}
.postcontent {
   padding:5px;
   border: 1px solid #a0abb4;
   margin-bottom:10px;
   float: left;
}
Con eso se ve bien, quizás no sea la forma correcta y no lo probé en otros navegadores...
__________________
elGastronomo
  #3 (permalink)  
Antiguo 28/11/2009, 19:07
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 14 años, 4 meses
Puntos: 17
Respuesta: Columnas con UL y LI

Tienes 13 Bloques.

Coloca cada bloque de 5..

Cita:
#post ul {
padding: 0px;
margin: 0px;
width: 486px;
display: block;
float: left;
height:100px;
}
modifica el parametro

Cita:
height:100px;
por los pixeles deseados de altura.

Saludos ;)
  #4 (permalink)  
Antiguo 29/11/2009, 00:22
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 19 años, 9 meses
Puntos: 53
Respuesta: Columnas con UL y LI

eso pasa porque los elementos de la lista los estas poniendo flotantes, al hacer eso se separan del flujo natural de html (estático) y por lo tanto los elmentos que estan por debajo de la lista continuan con el flujo normal haciendo que la lista flote como bien lo has esppecificado en el CSS.

La solución mas elegante es usar un "clearfix" en la el contenedor de la lista:

Código:
<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->
de esta manera el contenedor de la lista se ajustará al tamaño de la lista flotante.

saludos
  #5 (permalink)  
Antiguo 30/11/2009, 13:44
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 20 años, 11 meses
Puntos: 34
Respuesta: Columnas con UL y LI

Gracias... Lo voy a tener en cuenta para estos casos, ya que muchas veces me lío...

PD: ¿Es este caso uno de los típicos en dónde si sería correcto seguir usando tablas?

Yo creo que no, pero no estoy seguro, sólo se que usar tablas me complicaría un poco más el código php :P
__________________
elGastronomo
  #6 (permalink)  
Antiguo 30/11/2009, 13:45
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 20 años, 11 meses
Puntos: 34
Respuesta: Columnas con UL y LI

Cita:
Iniciado por PrendekZ Ver Mensaje
Tienes 13 Bloques.

Coloca cada bloque de 5..



modifica el parametro



por los pixeles deseados de altura.

Saludos ;)
El problema es que la altura es variable, por eso no me servía esta solución...
__________________
elGastronomo
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 11:19.