Foros del Web » Creando para Internet » CSS »

Personalizar 2 listas con CSS

Estas en el tema de Personalizar 2 listas con CSS en el foro de CSS en Foros del Web. Hola a todos. Soy nuevo en el tema del CSS y espero que puedan darme una mano. El tema es este: En una página tengo ...
  #1 (permalink)  
Antiguo 23/02/2009, 00:34
 
Fecha de Ingreso: julio-2008
Ubicación: Córdoba, Argentina
Mensajes: 266
Antigüedad: 15 años, 9 meses
Puntos: 26
Personalizar 2 listas con CSS

Hola a todos.
Soy nuevo en el tema del CSS y espero que puedan darme una mano. El tema es este:
En una página tengo una lista dentro de otra con HTML, para dejarlo claro:
Código:
<ul>
<li>Categoría 1</li>
	<ul>
	<li>Ítem 1 de la cat. 1</li>
	<li>Ítem 2 de la cat. 1</li>
	</ul>
<li>Categoría 2</li>
	<ul>
	<li>Ítem 1 de la cat. 2</li>
	<li>Ítem 2 de la cat. 2</li>
	</ul>
</ul>
Lo que quiero hacer es que la lista principal de categorías tenga una imagen como ítem y que las sub-listas (las que dicen ítem 1 y 2) tengan una imagen diferente. Para esto pensé hacer esto:
HTML
Código:
<ul class="1">
<li>Categoría 1</li>
	<ul class="2">
	<li>Ítem 1 de la cat. 1</li>
	<li>Ítem 2 de la cat. 1</li>
	</ul>
<li>Categoría 2</li>
	<ul class="2">
	<li>Ítem 1 de la cat. 2</li>
	<li>Ítem 2 de la cat. 2</li>
	</ul>
</ul>
CSS
Código:
ul.1 {
	list-style-image: url(imagenes/item_1.gif);
}
ul.2 {
	list-style-image: url(imagenes/item_2.gif);
}
Es decir que llamé a cada lista con un número distinto (1 y 2) y en el estilo.css especifiqué la imagen que debería llevar cada lista en sus ítems. El problema es que las imágenes no aparecen en lugar de los ítems, pero sí lo hacen si quito el class="1" y class="2" y el .1 y .2 del CSS. Estoy bastante seguro de que estoy nombrando mal a las listas en el CSS pero no sé cómo se debe hacer, espero sus respuestas.
Saludos.

Última edición por RabidFish; 23/02/2009 a las 00:44
  #2 (permalink)  
Antiguo 23/02/2009, 01:06
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: Personalizar 2 listas con CSS

Los nombres de id's y clases en css deben comenzar con una letra y es preferible que no sea solo una letra, no te compliques tanto y ponles lista1 y lista2.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 23/02/2009, 01:12
 
Fecha de Ingreso: julio-2008
Ubicación: Córdoba, Argentina
Mensajes: 266
Antigüedad: 15 años, 9 meses
Puntos: 26
Respuesta: Personalizar 2 listas con CSS

Muchas gracias, Triby. No sabía que no debían comenzar con números, ahora aprendí algo nuevo gracias a ti.
Ahora pregunto: Si yo quiero que la lista principal de categorías esté en negrita, ¿puedo hacerlo con CSS? Porque si hago esto:
Código:
ul.lista1 {
	font-weight: bold;
	list-style-image: url(imagenes/item_1.gif);
}
ul.lista2 {
	list-style-image: url(imagenes/item_2.gif);
}
La negrita se aplica a todo lo que está dentro de la lista principal, incluyendo las sub-listas.
Saludos.

EDIT: Otra duda que me surgió es si existe una forma de que en una tabla de 2 columnas la primera tenga alineación horizontal izquierda y la segunda centrada, todo eso usando CSS ya que en HTML habría que ponerle a cada celda de la segunda columna la alineación centrada usando div o td align.

Última edición por RabidFish; 23/02/2009 a las 16:27
  #4 (permalink)  
Antiguo 23/02/2009, 13:03
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: Personalizar 2 listas con CSS

Si, porque esas propiedades son heredadas, solo aplica font-weight:normal; a lista2.
__________________
- León, Guanajuato
- GV-Foto
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 16:54.