Listas HTML

[MiguelFT]

Hola!

Las listas no me quedan cuadradas, es decir, no me quedan como las demas ya que, a mas texto que ponga, se desplaza y queda descuadrado: Aquí la imagen explicativa



Alguien sabe algún recurso para que me quede como los de Uno Dos Tres sin que tenga en cuenta el texto que tenga puesto?

GRACIAS!

[jomaruro]

Hola:

En algún sitio tienes un text-align: center que heredan las listas, si te fijas en la opción Tres está un poquito más a la izquierda que Uno o Dos. Así que a las listas tendrás que ponerles text-align: left

Saludos.

[MiguelFT]

Hola!!

Tengo

Código:

* {margin:0;padding:0;}
html, body {height: 100%;}
#contenedor {width: 100%;height: 100%;margin:0;}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 200px;;}
#col_izq {float: left; width: 200px;}
#col_cen {}

Yo quiero qu eme quede como los de la derecha:

Uno
Dos
Tres

[MiguelFT]

Si pongo por ejemplo

Código:

#col_izq {float: left; width: 200px;text-align: left}

me queda:

[alexk]

entonces lo solucionaste?

ahhh tu quieres que el "titulo" este centrado pero las listas no?..
entonces pon mas HTML y CSS que estes usando

[MiguelFT]

Sí, yo quiero que quede como el texto de Uno Dos Tres de "la derecha".

El problem que ocurre ahora es que los "puntos" quedan descentrados según sea la palabra de larga.

Código:

<style type="text/css">

* {margin:0;padding:0;

}
html, body {height: 100%;}
#contenedor {width: 100%;height: 100%;margin:0;}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 200px;;}
#col_izq {float: left; width: 200px;}
#col_cen {}




</style>
<div id="contenedor">
<div id="col_der">
Una lista sin ordenar
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>

<br/>
Una lista sin ordenar
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<div id="col_izq">
<b><font size="2">Navegadores</font></b>
<li>Temporales</li>
<li>Descargar</li>
<li>Atajos de Teclado </li>
<br/>
Una lista sin ordenar
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<br/>
Una lista sin ordenar
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<br/>
Una lista sin ordenar
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<br/>
Una lista sin ordenar
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>

No hay mas.

[MiguelFT]

Alguien podría echarme una manita?

Muchas gracias ;)

[jomaruro]

Hola:

La verdad, es que todavía no tengo claro que es lo que necesitas.

Saludos.

[Carlangueitor]

Yo tampoco entiendo que es lo que quieres, ¿quieres que los items de la lista queden alineados, no importando su tamaño? pues la solución que te dieron antes lo hace, no?? mejor explica un poco mas.

Saludos

[seoista]

Iniciado por MiguelFT

Si pongo por ejemplo

Código:

#col_izq {float: left; width: 200px;text-align: left}

me queda:

Disculpar si me entrometo, pero entiendo que lo que quiere es que tambien le salga el punto (·) delante de:
- Temporales
- Descargar
- Atajos de teclado
como en Uno, Dos, Tres de la segunda y tercera lista.

¿Me equivoco?

Yo no te lo puedo solucionar porque no lo se. Lo siento MiguelFT.

Saludos.

[MiguelFT]

Hola!! Os explico un poco mejor lo que pretendo hacer.

Como podeis obervar, en la columna de la derecha y el centro, sale ordenado, es decir, los tres puntos estan alineados, los puntos corresponden uno debajo del otro y estan "centrados" respeto a la palabra "Una lista sin ordenar". Esto es debido a que la palabra "Uno" "Dos" tienen la misma longitud .

El problema viene por tanto cuando inserto palabras como "Temporales" "Descargar" "Atajos de teclado" ya que no son del mismo tamaño y por tanto, los puntos no quedan cuadrados, no quedan alineados y no quedan en el centro respeto a la palabra "Navegadores" tal y como se puede observar en la siguiente imagen:



Por tanto, lo que deseo es que, quede alineado en el centro respecto a la palabra "Navegadores" y que los puntos cuadren uno debajo del otro, tal y como queda con las palabras "uno" "dos" pero que el tamaño de la palabra no tenga nada que ver.

¿ha quedado mas claro?

Saludos!!!!

[MiguelFT]

Y Añado:

#col_izq {float: left; width: 200px;text-align: left}

me queda tal que así:



Es decir, la palabra "Navegadores" no me queda como la de "Una lista sin ordenar", es decir, no me queda en el centro como las otras, se alinea a la derecha (como es logico) y las palabras "temporales", etc. no quedan en el centro de "Navegadores" y además, no tienen punto.

[Willy_N]

Es lógico, lo provocas tu mismo con

Código CSS:

text-align: left;
 

Prueba con

Código CSS:

text-align: center;
 

[Carlangueitor]

Ya entendí (creo ), pero la forma en que se centra es dependiendo de lo largo de la palabra, lo que puedes hacer es agregar un poco de margin a la lista y alinear a la izquierda, así parecerá que esta "centrada" como quieres.

También tienes un error en tu código, no estas poniendo el inicio de la lista (<ul>), solo estas poniendo los items (<li>).

Saludos

[MiguelFT]

Iniciado por Carlangueitor

Ya entendí (creo ), pero la forma en que se centra es dependiendo de lo largo de la palabra, lo que puedes hacer es agregar un poco de margin a la lista y alinear a la izquierda, así parecerá que esta "centrada" como quieres.

También tienes un error en tu código, no estas poniendo el inicio de la lista (<ul>), solo estas poniendo los items (<li>).

Saludos

Eso es!! Eso es lo que quiero hacer. y efectivamente, se descentra dependiendo de lo largo que sea la palabra. Voy a probar lo que comentas del margen y os cuento!!!

He quitado el <ul> porque sino, no me salia el punto jajaja

[MiguelFT]

Lo subo por si alguien sabe

[Carlangueitor]

Si no te sirve lo que te dije, no hay otra forma.

Saludos

[MiguelFT]

Hola!!

Que sería, poner algo como...?¿?:

Código:

#contenedor {width: 100%;height: 100%;margin:3;}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 200px;;}
#col_izq {float: left; width: 200px; text-align: left;}
#col_cen {}