Margen automático <li>

sergi_multimedia · #1 (**permalink**) 15/09/2012, 18:33

Hola amig@s, tengo un problema cada vez que hago una lista.

Cada vez que hago una <ul> y a dentro le meto <li>, el li automáticamente se me va a la derecha.

Cuando trabajo con pixeles no hay problemas, simplemente hago un margin: -x px; y solucionado.

Pero ahora me he puesto a practicar con el responsive web design, y claro, aquí este truco no lo puedo hacer, ya que siempre los pixeles van a variar dependiendo del ancho del navegador.

Sé que podría hacer un margin: -x%; pero, me parece un método bastante cutre.

Hay algún método más correcto para solucionar esto?

Os dejo el enlace de la prueba que estoy haciendo.

Saludos y gracias de antemano!

http://www.sergibeltran.com/Jim/index.html

Código HTML:

Ver original<body>
 <div id="container">
  <section id="nav-left">
   <nav>
    <ul>
     <li><a href="#">HOME</a></li>
     <li><a href="#">PRODUCTS</a></li>
     <li><a href="#">SERVICES</a></li>
     <li><a href="#">CONTACT</a></li>
     <li><a href="#">HELP</a></li>
     <li><a href="#">MAP</a></li>
    </ul>
   </nav>              
  </section>
  <section id="content"></section>
  <aside id="right"></aside>            
 </div>
</body>
</html>

Código CSS:

Ver originalnav ul {
    width: 100%;
    list-style-type: none;
    background-color: yellow;
    margin: 0;
}
 
nav ul li {
    width: 100%;
    text-align: center;
    background-color: red;
    margin: 0;
}

C2am · #2 (**permalink**) 15/09/2012, 18:35

Un poco de material de lectura:
http://www.librosweb.es/css/capitulo9.html

En cuanto a tu problema es que seguramente no usas un "reset css".
Veo que aplicar margin:0, pero te olvidas del padding.

Lo mejor siempre es poner al inicio de la hoja de estilos un reset para que luego puedas definir los valores de las propiedades a tu conveniencia.
Por ejemplo, uno muy básico:

Código CSS:

Ver original/* reseteo de estilos por defecto*/
* {margin:0; padding:0;  outline: 0;}
a {outline:none; text-decoration:none;}
 
a img{border:0;}
ul {list-style:none}

pzin · #3 (**permalink**) 15/09/2012, 18:43

Para completar la recomendación de C2am, también observar que es bueno el reset ya que los valores por defecto de algunos navegadores no son iguales, y con esa medida, se igualan.

sergi_multimedia · #4 (**permalink**) 15/09/2012, 18:47

Hola a todos, gracias por comentar, ya he solucionado el problema. He añadido en <ul> padding: 0;

Me ha ido bien para resfrescar algunas cosas en CSS, creo que leeré un poco más.

Lo que comentais de los resets, generalmente uso resets, el Meyer, pero como estoy haciendo simplemente pruebas pues se me olvidó de añadirlo.

Muchas gracias ;)