¿Uso exacto de las listas?

kiM- · #1 (**permalink**) 13/03/2011, 18:24

Buenas, pués abro este tema para saber cuçal es el uso exacto de las listas, he leido sobre ellas pero bueno, los usos básicos que he visto son a modo de listas (xDD) y para los menús.. Si yo las usara para los menús que ganaría exactamente?

Recalcar también que a mi no me deja poner imágenes en la parte izquierda de las listas, no encuentro la forma :\

Saludos y gracias!

pitufoweb · #2 (**permalink**) 13/03/2011, 18:33

Aquí encontraras mas información sobre las listas:
http://www.librosweb.es/xhtml/capitulo5.html

un menú?? pues un menú es una lista de enlaces no?

Saludos.

kiM- · #3 (**permalink**) 13/03/2011, 18:37

Exactamente, yo por ejemplo quiero poner a prueba las listas usándolas en un menú pero fallo al poner las imágenes para sustituir los puntos o para que aparezcan en <li>, no aparecen :\

pitufoweb · #4 (**permalink**) 13/03/2011, 18:41

puedes quitar los puntos y poner una imagen de fondo.

Saludos.

kiM- · #5 (**permalink**) 13/03/2011, 18:46

Eso es precisamente lo que hago, o en este caso, lo que intento, se quitan los puntos pero el fondo no aparece. ¿Alguna solución?

Otra cosa, es posible mover el fondo Y,X de las listas?

pitufoweb · #6 (**permalink**) 13/03/2011, 18:55

Si el fondo no aparece es por que seguramente la ruta hacia la imagen de fondo no es la correcta.

Si...El fondo se puede mover en Y,X en cualquier elemento.

Saludos.

kiM- · #7 (**permalink**) 13/03/2011, 19:05

Cierto, la ruta estaba mal, ahora lo que no consigo lograr es quitar el espacio del lado izquierdo de las listas y centrar los textos "acordes a las imágenes de fondo", es decir, centrar cada texto de <li> a cada imagen de fondo :\

ArturoGallegos · #8 (**permalink**) 13/03/2011, 19:24

Cita:

Iniciado por kiM-

Exactamente, yo por ejemplo quiero poner a prueba las listas usándolas en un menú pero fallo al poner las imágenes para sustituir los puntos o para que aparezcan en <li>, no aparecen :\

si nos indicaras el código en cuestión seguramente te podríamos asesorar mas e indicar donde esta el fallo

por lo general para ese punto deberías colocar en tu css

Código CSS:

Ver originalul.menu{list-style:url(imagen.jpg);}

kiM- · #9 (**permalink**) 13/03/2011, 19:26

No es un código en sí sino más bien estoy probando, lo de la imagen ya la he conseguido. Lo que no consigo es quitar el espacio izquierdo que te dejan las listas, como si hicieras un salto de texto. Ni tampoco centrar el texto con su correspondiente imagen de fondo

ArturoGallegos · #10 (**permalink**) 13/03/2011, 19:28

Código CSS:

Ver originalul.menu{
list-style:url(imagen.jpg);
margin:0;/*quitar los espacios laterales*/
padding:0;/*quitar los espacios laterales*/
text-aling:center;/*centrar los textos*/
}

la idea de poner margin y padding en ceros es porque en algunos navegadores es un padding y en otros es un margin lo que genera la sangria izquierda

pitufoweb · #11 (**permalink**) 13/03/2011, 19:29

El espacio seguramente es un margin o padding.

No trates de centrar los textos acordes a las imágenes...Trata de centrar las imágenes acorde al texto.

Tus preguntas son muy básicas...Sinceramente te recomiendo que te tomes una tarde para leer un manual de CSS. Así te evitaras muchos problemas en el futuro.

Saludos.

kiM- · #12 (**permalink**) 13/03/2011, 19:42

Nada, que no funciona, la sangría sigue ahí, no se quita.. Os deo el código:

Cita:

ArturoGallegos · #13 (**permalink**) 13/03/2011, 19:46

debe de ser

Código CSS:

Ver original#yea ul{
list-style-image: url(icons2/action_forward.gif);
list-style-position: inside;
list-style-type: none;
margin:0;/*quitar los espacios laterales*/
padding:0;/*quitar los espacios laterales*/
text-aling:center;/*centrar los textos*/
}

kiM- · #14 (**permalink**) 13/03/2011, 19:52

Uhmmm, que error más tonto, muchas gracias =D! pero ahora me asalta otra duda, de la imagen de fondo al texto hay un espacio pequeño, ¿alguna forma de quitarlo?

ArturoGallegos · #15 (**permalink**) 13/03/2011, 21:46

un espacio pequeño? podrías mostrar un screenshot para darnos una idea que pueda ser?

kiM- · #16 (**permalink**) 13/03/2011, 22:48

Me refiero a este espacio:

¿Hay alguna forma de suprimirlo?

Saludos y gracias!

ArturoGallegos · #17 (**permalink**) 13/03/2011, 23:29

hasta donde se ese espacio entre la viñeta y el texto no se puede quitar, para hacerlo yo lo aria insertando la viñeta como fondo del <li>

algo como

Código CSS:

Ver original#yea ul{
    list-style:none;
    margin:0;/*quitar los espacios laterales*/
    padding:0;/*quitar los espacios laterales*/
    text-align:center;/*centrar los textos*/
    }
#yea ul li{
    margin:0;
    padding:0 0 0 10px;/*los 8px representan el ancho de tu imagen*/
    background:url(icons2/action_forward.gif)left center no-repeat;
    }

kiM- · #18 (**permalink**) 14/03/2011, 12:41

Nada, he probado de mil maneras y el texto se me coloca encima del fondo, y no hay forma de moverlo a la derecha ni con margin ni con padding :\

ArturoGallegos · #19 (**permalink**) 14/03/2011, 13:12

mmmm seguramente tendrás algún otro estilo que se este empalmando si nos muestras tu sitio o código completo podríamos revisar que falla

por lo mientras prueba agregar !important al padding para ver si se mueve debe quedar

Código CSS:

Ver original#yea ul li{
    margin:0;
    padding:0 0 0 10px!important;/*los 8px representan el ancho de tu imagen*/
    background:url(icons2/action_forward.gif)left center no-repeat;
    }