Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Listas<ul>..Cómo eliminar la sangría? en el foro de CSS en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 04/04/2006, 15:52
 
Fecha de Ingreso: enero-2006
Ubicación: Maracay, Edo. Aragua
Mensajes: 206
Antigüedad: 11 años, 10 meses
Puntos: 0
Listas<ul>..Cómo eliminar la sangría?

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)  
Antiguo 04/04/2006, 18:47
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #3 (permalink)  
Antiguo 04/04/2006, 20:36
 
Fecha de Ingreso: enero-2006
Ubicación: Maracay, Edo. Aragua
Mensajes: 206
Antigüedad: 11 años, 10 meses
Puntos: 0
Sip, ya lo intenté; el problema es ese precisamente, en Firefox se va demasiado hacia la izquierda si coloco valores negativos
  #4 (permalink)  
Antiguo 04/04/2006, 20:41
Avatar de causita  
Fecha de Ingreso: mayo-2002
Ubicación: Lima-Perú
Mensajes: 2.025
Antigüedad: 15 años, 7 meses
Puntos: 8
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...
__________________
|| no hay pregunta tonta....lo q hay son tontos q no preguntan || d-.-b

El Causita
  #5 (permalink)  
Antiguo 05/04/2006, 19:44
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #6 (permalink)  
Antiguo 06/04/2006, 01:59
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola thisisalexis

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

ul {margin:0; padding:0}

Saludos,
  #7 (permalink)  
Antiguo 06/04/2006, 02:56
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Tema trasladado desde (x)html
  #8 (permalink)  
Antiguo 06/04/2006, 12:38
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
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.
__________________
Internet Explorer SuckS
Download FireFox
  #9 (permalink)  
Antiguo 08/04/2006, 11:05
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #10 (permalink)  
Antiguo 08/04/2006, 22:12
 
Fecha de Ingreso: enero-2005
Mensajes: 149
Antigüedad: 12 años, 11 meses
Puntos: 2
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> 
  #11 (permalink)  
Antiguo 08/04/2006, 22:51
Avatar de u_goldman
Moderador
 
Fecha de Ingreso: enero-2002
Mensajes: 8.031
Antigüedad: 15 años, 11 meses
Puntos: 98
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
__________________
"El hombre que ha empezado a vivir seriamente por dentro, empieza a vivir más sencillamente por fuera."
-- Ernest Hemingway
  #12 (permalink)  
Antiguo 15/04/2006, 15:45
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #13 (permalink)  
Antiguo 04/03/2009, 14:56
 
Fecha de Ingreso: marzo-2009
Mensajes: 1
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: Listas<ul>..Cómo eliminar la sangría?

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.
  #14 (permalink)  
Antiguo 31/03/2009, 09:41
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Listas<ul>..Cómo eliminar la sangría?

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
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:50.