Menú con CSS

Hola de nuevo:
necesito saber como funcionan los links de css en dos casos en concreto. Tengo un div (es un elemento de un menu lateral en mi caso) y dentro tiene dos span asi: div.miDiv span.miSpan1, div.miDiv span.miSpan2.
miSpan1 contiene texto y miSpan2 contiene solo una imagen pequeña:
- Como se hace el css para el link solo con el texto? (no tiene que subrayarse ni nada)
- Como se hace el css para que todo el div (la barra entera) sea clicable?

Err.. ok ok

Paso a paso, primero expresate mejor, si puedes usa imagenes, porque a mi me parece un tanto complicado el entenderte. Y creo que estas usando etiquetas de sobra.

Un favor, expresate mejor, tranquilo, paso a paso, y lo mas entendible posible. Y si es posible usa imagenes.

Vale, aqui esta la imagen:

Ah vaya, pues está fácil, aunque se puede ir poniendo dificil de acuerdo cuantas cosas les vayas poniendo. Te mostraré una base sencilla.


XHTML
Primero tienes que crear el XHTML, principalmente listas y enlaces encerrados por un div.

Código :

<div>
<ul>
   <li><a href="#">Noticias</a></li>
   <li><a href="#">Abstracts</a></li>
   <li><a href="#">Eventos</a></li>
</ul>
</div>

Sencillo, no? Bien, ahora pongamosle ese sub menú.

Código :

<div>
<ul>
   <li><a href="#">Noticias</a>
      <ul>
         <li><a href="#">Editorial</a></li>
         <li><a href="#">Articulo Comentado</a></li>
         <li><a href="#">Otras Noticias</a></li>
      </ul>
   <li><a href="#">Abstracts</a></li>
   <li><a href="#">Eventos</a></li>
</ul>
</div>

Agreguemosle unas clases e identificadores y tendremos nuestro código XHTML.

Código :

<div id="menu">
<ul>
   <li class="rojo"><a href="#">Noticias</a>
      <ul>
         <li><a href="#">Editorial</a></li>
         <li><a href="#">Articulo Comentado</a></li>
         <li><a href="#">Otras Noticias</a></li>
      </ul>
   </li>
   <li class="gris"><a href="#">Abstracts</a></li>
   <li class="azul"><a href="#">Eventos</a></li>
</ul>
</div>

CSS
Ahora pongamosle los estilos para que empiece a tomar forma, primero ajustemos la altura del menú y el submenú.

Código :

#menu ul { list-style:none; margin:0; padding:0; }
#menu ul li { line-height:25px; }
#menu ul li ul li { line-height:20px; }

Demosle color tanto a las listas como a los enlaces, y un tamaño fijo al div.

Código :

#menu { width:180px; }
#menu a { text-decoration:none; padding-left:11px; display:block; height:100%; }
   
li.rojo { background:#EDBDC8; color:#C4294B; }
li.rojo a { color:#C4294B; }

li.gris { background:#D3D3D3; color:#333333; }
li.gris a { color:#333333; }

li.azul { background:#BCBCD1; color:#191B5F; }
li.azul a { color:#191B5F; }

Agreguemos el color al submenú, y el evento :hover similar al evento onRollOver de Flash.

Código :

li.rojo ul li { background:#FAEAED; color:#DC7F93; }
li.rojo ul li a { color:#DC7F93; }
li.rojo ul li a:hover { color:#C4294B; }

Y esa es una forma muy sencilla de cómo crear un menú con XHTML y CSS.
Aquí el ejemplo en vivo.

Obviamente, luego puedes hacerle más modificaciones, agregarle una imagen de fondo para que coincida con tu imagen.

Si quieres lograr ese efecto de que la flecha como que se ilumine, debes usar 2 imagenes, poner la imagen sin efecto como fondo de la etiqueta <a> y luego con el evento :hover le cambias la imagen de fondo por la otra.

Recuerda que también puedes cambiar todo el color de fondo en éste evento. Y aparte del evento :hover hay :visited y :active .

Un saludo y suerte!



PD: Cualquier pregunta, no dudes en postearla.

Estoy impresionado D. Yo lei bastante sobre divs, y la mayoria utilizaban varios divs, unos dentro de otros y con span para las clases. De esta forma siempre tienes que poner una class para el div y un id para el texto (supongo que ahi falla porque nos enlaces no cogian bien el css ) debido a que no puedo poner dos class en un div . Si ponia un class en el div y otro en el span que estaba dentro de ese div (para el texto) tpc me iba bien. Vamos que tnego un lio impresionante.

Me preguntaba si con tu ejemplo, gneial por cierto , con la propiedad line-height se pueden hacer los huecos en blanco entre los elementos o por el contrario he de hacer uso de margin-bottom.

Y una ultima cosa. He abierto un post anterior porque no conseguia centrar un texto dentro de un div. Me han dado la solucion ( no recuerdo si fuiste tu) pero como el menu esta float:left y luego el contenido esta a su lado, pues tb tiene float: left y entonces parece ser que no puedo centrar el texto del contneido y alinearlo a la derecha...

Bueno se que es mucho texto solo espero que entiendas la mayoria Muchiisimas gracias

Para los espacios entre los items del menu, le pones a todos los li un margin-bottom, del tamaño que quieras.

En cuanto a lo otro, no entendi muy bien, pero si es lo que creo, con solo ponerle text-align:center a los li del menu, se centran todos los textos del menu.

Bueno, utilizare la tecnica de la imagen otra vez :

http://img420.imageshack.us/my.php?image=divs3yj.gif

Lo que quiero es conseguir que el texto del contenedor quede asi. Porque ahora esta hecho con padding y no es nada correcto aunque se vea bien, ademas, el div contenedor debe tener text-align: left por defecto porque lo uso en diferentes paginas por igual.

Gracias

Nada ya está resuelto, me faltaba darle width a los divs porque si no alcanzan el 100%.

Muchas gracias

the_NEO_JP :O
buena explicación