Foros del Web » Creando para Internet » CSS »

¿Uso exacto de las listas?

Estas en el tema de ¿Uso exacto de las listas? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/03/2011, 19:24
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
¿Uso exacto de las listas?

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!
  #2 (permalink)  
Antiguo 13/03/2011, 19:33
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: ¿Uso exacto de las listas?

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.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 13/03/2011, 19:37
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¿Uso exacto de las listas?

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 :\
  #4 (permalink)  
Antiguo 13/03/2011, 19:41
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: ¿Uso exacto de las listas?

puedes quitar los puntos y poner una imagen de fondo.



Saludos.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 13/03/2011, 19:46
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¿Uso exacto de las listas?

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?
  #6 (permalink)  
Antiguo 13/03/2011, 19:55
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: ¿Uso exacto de las listas?

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.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #7 (permalink)  
Antiguo 13/03/2011, 20:05
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¿Uso exacto de las listas?

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 :\
  #8 (permalink)  
Antiguo 13/03/2011, 20:24
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Uso exacto de las listas?

Cita:
Iniciado por kiM- Ver Mensaje
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 original
  1. ul.menu{list-style:url(imagen.jpg);}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 13/03/2011, 20:26
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¿Uso exacto de las listas?

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
  #10 (permalink)  
Antiguo 13/03/2011, 20:28
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Uso exacto de las listas?

Código CSS:
Ver original
  1. ul.menu{
  2. list-style:url(imagen.jpg);
  3. margin:0;/*quitar los espacios laterales*/
  4. padding:0;/*quitar los espacios laterales*/
  5. text-aling:center;/*centrar los textos*/
  6. }

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #11 (permalink)  
Antiguo 13/03/2011, 20:29
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: ¿Uso exacto de las listas?

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.
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #12 (permalink)  
Antiguo 13/03/2011, 20:42
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¿Uso exacto de las listas?

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

Cita:
<style type="text/css">
#yea {
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*/
}
</style>
</head>

<body>
<div id="yea">
<ul>
<li>yea1</li>
<li>yea2</li>
<li>yea3</li>
</ul></div>
</body>
</html>
  #13 (permalink)  
Antiguo 13/03/2011, 20:46
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Uso exacto de las listas?

debe de ser
Código CSS:
Ver original
  1. #yea ul{
  2. list-style-image: url(icons2/action_forward.gif);
  3. list-style-position: inside;
  4. list-style-type: none;
  5. margin:0;/*quitar los espacios laterales*/
  6. padding:0;/*quitar los espacios laterales*/
  7. text-aling:center;/*centrar los textos*/
  8. }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #14 (permalink)  
Antiguo 13/03/2011, 20:52
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¿Uso exacto de las listas?

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?
  #15 (permalink)  
Antiguo 13/03/2011, 22:46
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Uso exacto de las listas?

un espacio pequeño? podrías mostrar un screenshot para darnos una idea que pueda ser?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #16 (permalink)  
Antiguo 13/03/2011, 23:48
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¿Uso exacto de las listas?

Me refiero a este espacio:


¿Hay alguna forma de suprimirlo?

Saludos y gracias!
  #17 (permalink)  
Antiguo 14/03/2011, 00:29
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Uso exacto de las listas?

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
  1. #yea ul{
  2.     list-style:none;
  3.     margin:0;/*quitar los espacios laterales*/
  4.     padding:0;/*quitar los espacios laterales*/
  5.     text-align:center;/*centrar los textos*/
  6.     }
  7. #yea ul li{
  8.     margin:0;
  9.     padding:0 0 0 10px;/*los 8px representan el ancho de tu imagen*/
  10.     background:url(icons2/action_forward.gif)left center no-repeat;
  11.     }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #18 (permalink)  
Antiguo 14/03/2011, 13:41
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: ¿Uso exacto de las listas?

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 :\
  #19 (permalink)  
Antiguo 14/03/2011, 14:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.825
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: ¿Uso exacto de las listas?

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
  1. #yea ul li{
  2.     margin:0;
  3.     padding:0 0 0 10px!important;/*los 8px representan el ancho de tu imagen*/
  4.     background:url(icons2/action_forward.gif)left center no-repeat;
  5.     }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: exacto, listas
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 20:48.