a:hover

[marcelomdsc]

Hola, estoy tratando de crear una barra de navegacion, como la que usa el sitio boagworld.com, pero tengo un problema, quiero que en rollover el contenedor cambie de color, y solo he logrado que lo que cambie de color es el link (a tag) pero no el contenedor (li tag)
este es el link a lo que hice...

marcelomontesdeoca.com/forum/nav.html

La unica forma que se de solucionar esto es si cambio los links a display block level elemente, pero esto no me va a servir en este caso porque yo quiero que los link esten uno al lado del otro (horizontalmente).

Gracias.

[asinox]

trata de probar esto

Código:

a:hover{
  width:100%;
  height:100%;
  background-color:#FFFF00;
}

[marcelomdsc]

gracias...pero no funciono.

[k4k4]

Hola,

una opción podría ser efectivamente cambiar el display a block de los elementos a y al mismo tiempo flotarlos (también habría que flotar los elementos li).

Sin embargo, viendo tu página me da la impresión de que buscas que el menú este centrado. También se puede pero hay otras cosas más que considerar y agregar, básicamente ver ventajas/desventajas.

Saludos.

[marcelomdsc]

si, eso funciona, tambien otra forma de solucionarlo es agregandole padding al a tag, pero si te fijas en el link otra vez, el problema ahora es que hay como un gap, un espacio que queda sin cubrir, a la izquierda de los links, de todos menos el primero.
Y eso si nose como arreglarlo.

alguna sugerencia?

[k4k4]

Hola,

puedes eliminar el espacio entre los elementos li de tal forma que quede algo como esto:

Código PHP:

  <div id="nav"> 
<ul> 
<li class="first"><a href="#">Art &amp; Applied Graphics</a></li><li><a href="#">Internet Access</a></li><li><a href="#">ESL</a></li><li><a href="#">Word Proccessing</a></li><li><a href="#">Music</a></li><li><a href="#">Practice</a></li></ul> 
</div>  
   

Lo único malo que veo con eso, es que no se ve bonito. xD

Saludos.

[marcelomdsc]

si eso funciono, gracias.

Aunque no entiendo porque, ya que eso no tendria que importar o si?

[k4k4]

Lo que sucede es que como declaras a los li tags como elementos "inline" tanto los li como su contenido se consideran como texto y los saltos de línea son transformados a espacios. Ese es el mismo resultado que obtenemos cuando usamos los p tags, por ejemplo:

Código PHP:

  <p> 
Esta 
es 
una 
prueba 
</p>  
   

Como el p tiene display:inline por default, el contenido se muestra como "Esta es una prueba".

Saludos.

[marcelomdsc]

aaaaaaaaaaaaaaaaaaa claro.
Ahora si todo tiene sentido......GRACIAS!

[marcelomdsc]

empesaweb, si precisas mas ayuda podes ir a la pagina que estoy creando en
marcelomontesdeoca.com/mcl y ahi puedes ver im html y css, ya que ahora por fin pude lograr que funcione bien, al menos la navegacion...jaja.