Foros del Web - a:hover

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - a:hover (http://www.forosdelweb.com/f53/hover-496580/)

marcelomdsc

08/06/2007 18:53

a:hover

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

09/06/2007 00:58

Re: a:hover

trata de probar esto

Código:

a:hover{

  width:100%;

  height:100%;

  background-color:#FFFF00;

}

marcelomdsc

09/06/2007 18:30

Re: a:hover

gracias...pero no funciono.

k4k4	09/06/2007 19:52

Re: a:hover

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

10/06/2007 00:36

Re: a:hover

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	10/06/2007 01:54

Re: a:hover

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

10/06/2007 02:27

Re: a:hover

si eso funciono, gracias.

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

k4k4	10/06/2007 09:54

Re: a:hover

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

10/06/2007 12:15

Re: a:hover

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

marcelomdsc

12/06/2007 11:14

Re: a:hover

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.

La zona horaria es GMT -6. Ahora son las 17:59.