[SOLUCIONADO] Alinear lista

[leoass]

hola, hoy tengo otro "desafio". Necesito alinear una lista que hice con estilos, y no se por que cuando le doy los valores, solo se corre pero siempre centrada.


(la lista seria los dos elementos con el icono de carpeta)

aca les apunto el css:

Código:

ul.sidenav {
  /* el rectángulo contenedor */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  /* propiedades optativas */
  background-color: #CD853F;
  border: 1px solid #300;
  outline: 1px solid #FFF;
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  /* propiedades optativas */
  background: transparent url(carpeta2.png) no-repeat 5px 7px;
  border-bottom: 1px solid #AD651F;
  border-top: 1px solid #300;
  color: #FFF;
  font-size: 18px;
  padding: 15px 10px 10px 45px;
  width: 195px;
}
ul.sidenav li a:hover {
  /* propiedades optativas */
  background: #CD853F url(libro.png) no-repeat 5px 7px;
  border-top:1px solid #300;
}
ul.sidenav li span {
  /* el contenido permanece oculto por defecto */
  display:  none;
}
ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */
  font-size: 12px;
  padding: 10px 0;
  margin: 0 0 0 -30px;
}

Ahora escucho propuestas. ;) Muchas gracias anticipadas

[pzin]

Según la imagen que pones, yo lo veo alineado al centro. ¿Cómo quieres alinearlas?

[leoass]

Ah... ahora que miro bien, me olvide de poner lo mas importante! Quiero alinearlo a la izquierda... je

[pzin]

Los elementos de la lista, están a la izquierda, pero su contenedor está centrado respecto al elemento que lo contiene.
Entonces tienes que cambiar tu ul.sidenav ya que este está centrado con márgenes laterales automáticos. O quitas ese margen automático, o quitas el ancho para que ocupe de forma automática el 100%.

[leoass]

Iniciado por Bonez

Los elementos de la lista, están a la izquierda, pero su contenedor está centrado respecto al elemento que lo contiene.
Entonces tienes que cambiar tu ul.sidenav ya que este está centrado con márgenes laterales automáticos. O quitas ese margen automático, o quitas el ancho para que ocupe de forma automática el 100%.

ya quite el ancho y quedo alineado a la izquierda. Pero me sigue ocupando el espacio horizontalmente. Intente con "position: relative" pero no funciono

[leoass]

ya lo solucione. con "position:absolute". muchas gracias

[pzin]

Iniciado por leoass

ya lo solucione. con "position:absolute". muchas gracias

Más que solución es una chapuza. Mejor hazlo flotando los elementos con float.

[leoass]

Iniciado por Bonez

Más que solución es una chapuza. Mejor hazlo flotando los elementos con float.

asi queda con position: absolute




Y asi queda con Float



Me gusta mas el resultado con position. Igual muchas gracias

[pzin]

[QUOTE=leoass;4369475Me gusta mas el resultado con position.[/QUOTE]

Más que el resultado yo diría que es la comodidad de hacerlo así lo que te gusta. Pero supongo que cuando te veas los problemas que eso causa volverás por aquí.