Foros del Web » Creando para Internet » CSS »

Duda sobre las imagenes de una lista

Estas en el tema de Duda sobre las imagenes de una lista en el foro de CSS en Foros del Web. Hola No sé mucho de css, suelo programar y ya está, pero ahora me ha tocado hacer algún css sobre una lista, con ul y ...
  #1 (permalink)  
Antiguo 08/05/2010, 08:15
 
Fecha de Ingreso: noviembre-2005
Mensajes: 186
Antigüedad: 12 años, 1 mes
Puntos: 1
Sonrisa Duda sobre las imagenes de una lista

Hola

No sé mucho de css, suelo programar y ya está, pero ahora me ha tocado hacer algún css sobre una lista, con ul y li.

Quiero hacer esto.

El primer padre de cada lista, tiene que tener una imagen como viñeta y un tipo determinado de letra. Pero sólo en el primero, no en los submenús.

luego, el primer submenú, por ejemplo,

-Ciudades
--Málaga
--Sevilla

Si este submenú es el último, ojo si es el último tiene que tener un diseño y si hay otro por detrás, pues otro diseño. El último submenu y siempre que sea submenu y no principal, es decir, si el principal, no tiene submenú no vale. Tiene que tener un diseño.

Por ejemplo
A)
Ciudades

B)
-Ciudades
--Málaga
--Sevilla

C)
-Ciudades
---Malaga
------Marbella
-----Fuengirola
--Sevilla
----Utrera

Ciudades en A, B y C, tiene la misma imagen viñeta y el mismo tipo de texto.

En B Málaga y Sevilla, al ser la última opción , tiene el mismo diseño que las de C Marbella,Fuerngirola y Utrera.

En C, Málaga y Sevilla, tienen un diseño independiente, por ser la segunda opción y no ser la última.

Sólo hay 3 niveles como en el ejemplo.

Espero que lo haya explicado bien, y alguien pueda ayudarme u orientarme, o igual un link con la explicación, busco en google y no encuentro una forma de explicación adecuada.

Saludos
  #2 (permalink)  
Antiguo 09/05/2010, 14:12
Avatar de mortiprogramador
Colaborador
 
Fecha de Ingreso: septiembre-2009
Ubicación: mortuoria
Mensajes: 3.701
Antigüedad: 8 años, 3 meses
Puntos: 195
Respuesta: Duda sobre las imagenes de una lista

Hola
Bueno, si te entendi bien quieres algo como esto

Si es así, entonces este es el código que necesitas

Código HTML:
Ver original
  1. <ul>
  2.   <li id="ciudades1">a)Ciudades
  3.   </li>
  4.   <li id="ciudades1">b)Ciudades
  5.     <li id="ciudades3">Malaga</li>
  6.     <li id="ciudades3">Sevilla</li>
  7.   </li>
  8.   <li id="ciudades1">c)Ciudades
  9.     <li id="ciudades2">Malaga</li>
  10.       <li id="ciudades3">Marbella</li>        
  11.       <li id="ciudades3">Fuengirola</li>
  12.     <li id="ciudades2">Sevilla</li>
  13.       <li id="ciudades3">Utrera</li>
  14.   </li>
  15. </ul>

Código CSS:
Ver original
  1. #ciudades1{
  2.   list-style-image:url(ciudad1.gif);
  3.   font-family:Verdana;
  4.   font-size:16px;
  5.   margin:6px 0px 0px 0px;
  6. }
  7. #ciudades2{
  8.   list-style-type:circle;
  9.   background-position: right;
  10.   font-family:Arial;
  11.   font-size:14px;
  12.   margin:0px 0px 0px 10px;
  13. }
  14. #ciudades3{
  15.   list-style-type:square;
  16.   font-family:Comic-Sans;
  17.   font-size:12px;
  18.   margin:0px 0px 0px 20px;
  19. }

Y en este ejemplo esta hecho manualmente, pero si por ej en tu caso
vas creando los <li> dinámicamente, entonces es solo cuestión
de usar condicionales (if, etc) donde preguntes si el segúndo nivel tiene
hijos, y si es así que le ponga un id y si no que le ponga otro y con eso
bastaría

Espero te sirva
Saludos

Etiquetas: imagenes, lista
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 06:31.