Listas<ul>..Cómo eliminar la sangría?

thisisalexis · #1 (**permalink**) 04/04/2006, 14:52

Qué tal.

Tengo un problema, escencialmente con el Internet Explorer.

Estoy haciendo una lista no ordenada con la siguiente estructura

<ul>

<li> Uno </li>
<li> Dos </li>
<li> Tres </li>
<li> Cuatro </li>

<ul>

El problema es que tanto a la etiqueta <li> como a la <ul>, desde la hoja de estlos, les coloqué margin =0px, padding=0px y aún así, EN EL INTERNET EXPLORER me daje una sangría de aproximadamente 20px (En mozilla si se alinea a la izquierda de la página por completo).

Tengo entenddo que la etiqueta <LI> trae esa sangría por defecto; si alguien sabe cómo eliminarla le agradecería su ayuda.

Agradezco sus comentarios.

#2 (**permalink**) 04/04/2006, 17:47

probaste con márgenes negativos? digo, en mozilla y Opera probablemente te las tire demasiado a la izquierda, pero en IE quizás funcione....

Saludos.

thisisalexis · #3 (**permalink**) 04/04/2006, 19:36

Sip, ya lo intenté; el problema es ese precisamente, en Firefox se va demasiado hacia la izquierda si coloco valores negativos

causita · #4 (**permalink**) 04/04/2006, 19:41

pregunto, no se podrá un tipo de IF de tal manera q se ejecute un código X según el navegador?

"...si el navegador=IE => ejecuta código X..."
"...si el navegador=firefox => ejecuta código Y..."
"...si el navegador=opera => ejecuta código Z..."

digo, se me ocurre eso...

#5 (**permalink**) 05/04/2006, 18:44

para hacer esto podés elegir la hoja de estilos con javascript, o si no usar unos códigos condicionales para las hojas de estilos que solamente acepta IE, yo solamente los he visto muy por encima....

Saludos.

JavierB · #6 (**permalink**) 06/04/2006, 00:59

Hola thisisalexis

He probado con esto y ha quedado bien en IE y Firefox:

ul {margin:0; padding:0}

Saludos,

tunait · #7 (**permalink**) 06/04/2006, 01:56

Tema trasladado desde (x)html

SiR.CARAJ0DIDA · #8 (**permalink**) 06/04/2006, 11:38

El estupido del IE pone los items de la lista afuera del UL/OL con margin-left en vez de adentro con padding-left como se debe.

furoya · #9 (**permalink**) 08/04/2006, 10:05

Hola todos :

Hace un tiempo estuve buscando eso de las maneras de mostrar viñetas en listas y cuál es la propuesta de "como se debe"; pero no lo encontré.

Me pasas la dirección de dónde está, SiR.CARAJ0DIDA ?

Gracias

yoguuu · #10 (**permalink**) 08/04/2006, 21:12

thisisalexis, puedes hacerlo perfectamente solo con css. No te hacen falta ni javascripts como dicen por ahi ni nada...

Margin 0 y padding 0 en el body debe constar que se lo he puesto por que algunos navegadores de las malas artes oscuras ponen margenes al elemento body por defecto. Ademas, por que es el elemento que uso como contenedor.

Código HTML:

<style>
body {
     margin: 0px;
     padding: 0px;
}
ul {
     margin: 0px;
     padding: 0px;
}
li {
     margin: 0px;
     padding: 0px;
}
</style>
<ul>
	<li>sssssssssss</li>
	<li>sssssssssss</li>
	<li>sssssssssss</li>
	<li>sssssssssss</li>
	<li>sssssssssss</li>
</ul>

u_goldman · #11 (**permalink**) 08/04/2006, 21:51

Lo más sencillo es crear tu propio estilo con imágenes de background que sirvan para los bullets, así tu puedes ajustar el padding a tu antojo.

Saludos

furoya · #12 (**permalink**) 15/04/2006, 14:45

Se me dio por hacer pruebas, y JavierB y yoguuu tienen razón; no encuentro el problema

Código:

<style>
body { margin: 15px 10px;}
ul { margin: 5px; padding: 10px;}
</style>

<ul>
<li>qwertyuiop<br>qwertyuiop</li>
<li>qwertyuiop<br>qwertyuiop</li>
<li>qwertyuiop<br>qwertyuiop</li>
</ul>

De última se puede meter todo en un div con posición relativa y a éste desplazarlo hacia la izquierda.
A menos que estés tratando de acercar las viñetas al texto, que sería otra cosa

vainformatica · #13 (**permalink**) 04/03/2009, 14:56

En la hoja de estilos CSS "list-style: outside;" con ello sacas las viñetas fuera del margen de sangrado tal como hace por defecto firefox.

Saludos.

furoya · #14 (**permalink**) 31/03/2009, 08:41

A mí no me anda. Lo único que consigo con

Código:

list-style-position: outside; /*inside*/

es que la viñeta me aparezca fuera o dentro del bloque de lista, lo que sólo sirve para incluirla (o no) en el color de fondo, ya que se ve en la "columna" izquierda, o como "primer caracter" del contenido del ítem.

Pero el mensaje me sirvió (¡después de casi 3 años!) para entender cuál era la diferencia. Aquella vez lo miré seguramente con IE5.x / 6, hoy lo hago con la versión 7; y les dejo un código con algunas pruebas.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
body { color:white; background-color: black; }
ul { margin-left: 10px; padding-left: 100px; background-color: blue; }
li { margin-left:45px; background-color: maroon; }

.sinOutsideP { padding-left:55px; background-color: olive; }
.conOutsideP { padding-left:55px; background-color: purple; list-style-position: outside; }

.sinOutsideM { margin-left:55px; background-color: olive; }
.conOutsideM { margin-left:55px; background-color: purple; list-style-position: outside; }

.enBloqueN { margin-left:45px; background-color: gray; }
.enBloqueR { margin-left:45px; background-color: gray; position: relative; left: -10px; }

</style>
</head>
<body>
<h2>Prueba de listas.</h2>

<ul>
<li>qwertyuiop<br>qwertyuiop 1</li>
<li>qwertyuiop<br>qwertyuiop 2</li>
<li class="sinOutsideP">qwertyuiop<br>qwertyuiop 3p</li>
<li class="conOutsideP">qwertyuiop<br>qwertyuiop 4p</li>
<li class="sinOutsideM">qwertyuiop<br>qwertyuiop 3m</li>
<li class="conOutsideM">qwertyuiop<br>qwertyuiop 4m</li>
<li><div class="enBloqueN">qwertyuiop<br>qwertyuiop 5n</div></li>
<li><div class="enBloqueR">qwertyuiop<br>qwertyuiop 5r</div></li>
</ul> 
</body>
</html>

Lo del div anda, pero con posición relativa, lo que trula a Opera; se puede arreglar metiendo un display: list-item, pero se trula Firefox (IExplorer se da cuenta de la redundancia y lo ignora).

De cualquier forma, el asunto ahora se arregla con padding; menos lo de acercar el bullet, como mencioné más arriba. Si alguien lo quiere revisar, no sé si éste será el mejor tema, porque todavía no estoy seguro de que thisisalexis haya querido juntarlos.

Marcadores del liasta fuera de lugar

usando css y viñetas