Foros del Web » Creando para Internet » CSS »

problema con lista y div

Estas en el tema de problema con lista y div en el foro de CSS en Foros del Web. Quiero tener un div con una lista dentro y para ello tengo el siguiente código: <style type="text/css" media="screen"> #uno { margin:0;padding:0;background-color:#99CC99;border:0; } #uno ul { ...
  #1 (permalink)  
Antiguo 05/06/2008, 02:20
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
problema con lista y div

Quiero tener un div con una lista dentro y para ello tengo el siguiente código:

<style type="text/css" media="screen">
#uno { margin:0;padding:0;background-color:#99CC99;border:0; }
#uno ul {
margin: 0;
padding: 0;
}
#uno li {
display: inline;
padding: 0 20px 0 0;
margin: 0;
margin-right:1em;
background-color:#0033CC;
}
</style>
</head>
<body>
<div id="uno"><ul><li>hjhj</li><li>yuyuiu</li></ul></div>

El problema es que en Firefox, pero no en IE, me deja una pequeña separación superior e inferior entre la lista y el borde del div (como un padding). He puesto, como se puede ver, los márgenes y padding a cero de todos los elementos pero aún así no consigo quitar esa pequeña separación. ¿Alguna idea?
  #2 (permalink)  
Antiguo 05/06/2008, 03:45
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: problema con lista y div

margin y padding no van con px???, ahi veo q tenes un padding de 20px??....

Última edición por opzina; 05/06/2008 a las 03:51
  #3 (permalink)  
Antiguo 05/06/2008, 04:41
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: problema con lista y div

Cita:
Iniciado por opzina Ver Mensaje
margin y padding no van con px???, ahi veo q tenes un padding de 20px??....
No entiendo lo que me quieres decir, pero el 20px se refiere al margen derecho entre los li con lo que ese no es el problema. Si te refieres a que los ceros no llevan px, cuando son cero no hace falta poner ninguna medida (px, em, pt,...)
  #4 (permalink)  
Antiguo 05/06/2008, 05:11
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: problema con lista y div

Pongo una imagen para que se vea mejor el problema:


El color más verde inferior no es parte de la página
  #5 (permalink)  
Antiguo 05/06/2008, 08:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema con lista y div

Quizá se trate del doctype que usas. Este código no deja ningún margen en FF:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>asmodeo</title>
<style type="text/css" media="screen">
#uno { margin:0;padding:0;background-color:#99CC99;border:0; }
#uno ul {
margin: 0;
padding: 0;
}
#uno li {
display: inline;
padding: 0 20px 0 0;
margin: 0;
margin-right:1em;
background-color:#0033CC;
}
</style>
</head>
<body>
<div id="uno"><ul><li>hjhj</li><li>yuyuiu</li></ul></div>
</body>
</html>
Mikel.
  #6 (permalink)  
Antiguo 05/06/2008, 08:54
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: problema con lista y div

Cita:
Iniciado por Mikmoro Ver Mensaje
Quizá se trate del doctype que usas. Este código no deja ningún margen en FF:



Mikel.
Gracias pero ¿seguro que no te lo deja? No se ve mucho pero si haces unos cuantos zooms se ve. Lo digo por que el DOCTYPE es el mismo (incluso he copiado todo lo que has puesto tal cual y sigue ese borde). También me pasa con Safari
  #7 (permalink)  
Antiguo 05/06/2008, 09:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema con lista y div

Cierto, tienes razón. Era tan pequeño que no lo veía. Haciendo zoom x 40 lo he visto. Se debe tratar de algún error que no conocía con el display inline, porque curiosamente si te fijas, cuando vas haciendo el zoom, el margen va cambiando alternativamente de arriba a abajo.

Muy extraño, y merecerá que investigue a ver qué encuentro. Si localizo algo te lo digo.

No obstante, creo que nunca me he encontrado este problema porque nunca he hecho una lista de esta manera, es decir, o coloreo el ul o lo que haya dentro de los li (que suelen ser enlaces), pero nunca de esta manera. Si necesitas hacerlo exactamente así a la fuerza dilo, porque soluciones hay.

Mikel.

Última edición por Mikmoro; 05/06/2008 a las 16:24
  #8 (permalink)  
Antiguo 05/06/2008, 10:43
Avatar de josdelaranda  
Fecha de Ingreso: abril-2007
Ubicación: Vivo en Lima - Perú
Mensajes: 61
Antigüedad: 10 años, 7 meses
Puntos: 0
Respuesta: problema con lista y div

Hola,

Me parece que el problema es por el display inline, mejor prueba dándole float: left a los li que quieres que se desplieguen en linea y al div contenedor aplicale un clearfix para que no se pierda el background.

Saludos
  #9 (permalink)  
Antiguo 05/06/2008, 17:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema con lista y div

Acabo de averiguar por qué no lo había visto antes: no ocurre con todos los tipo de letra. Por ejemplo, si pones:

font-family: Verdana;

verás que el espacio desaparece. Por ejemplo he visto que ocurre con la arial, pero no con la courier, y así unas cuantas más.

Mikel.
  #10 (permalink)  
Antiguo 06/06/2008, 06:33
 
Fecha de Ingreso: junio-2008
Mensajes: 7
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: problema con lista y div

Gracias a ambos. Con lo del float:left ya está y curioso lo que pasa según el tipo de letra
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 15:52.