Foros del web, para los que viven de bits

marcelomdsc · 08-jun-2007, 18:53

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-jun-2007, 00:58

trata de probar esto

Código:

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

marcelomdsc · 09-jun-2007, 18:30

gracias...pero no funciono.

k4k4 · 09-jun-2007, 19:52

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-jun-2007, 00:36

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-jun-2007, 01:54

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-jun-2007, 02:27

si eso funciono, gracias.

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

k4k4 · 10-jun-2007, 09:54

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-jun-2007, 12:15

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

marcelomdsc · 12-jun-2007, 11:14

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.

08-jun-2007, 18:53	#1 (permalink)
marcelomdsc Fecha de Ingreso: junio-2007 Ubicación: Windsor, California. Mensajes: 656	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.

09-jun-2007, 00:58	#2 (permalink)
asinox Fecha de Ingreso: noviembre-2002 Ubicación: httpdocs Mensajes: 2.562	Re: a:hover trata de probar esto Código: a:hover{ width:100%; height:100%; background-color:#FFFF00; } __________________ www.noxmediastudio.com asinox.wordpress.com

09-jun-2007, 18:30	#3 (permalink)
marcelomdsc Fecha de Ingreso: junio-2007 Ubicación: Windsor, California. Mensajes: 656	Re: a:hover gracias...pero no funciono.

09-jun-2007, 19:52	#4 (permalink)
k4k4 Fecha de Ingreso: junio-2007 Ubicación: Baja California, México Mensajes: 120	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.

10-jun-2007, 00:36	#5 (permalink)
marcelomdsc Fecha de Ingreso: junio-2007 Ubicación: Windsor, California. Mensajes: 656	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?

10-jun-2007, 01:54	#6 (permalink)
k4k4 Fecha de Ingreso: junio-2007 Ubicación: Baja California, México Mensajes: 120	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 & 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.

10-jun-2007, 02:27	#7 (permalink)
marcelomdsc Fecha de Ingreso: junio-2007 Ubicación: Windsor, California. Mensajes: 656	Re: a:hover si eso funciono, gracias. Aunque no entiendo porque, ya que eso no tendria que importar o si?

10-jun-2007, 09:54	#8 (permalink)
k4k4 Fecha de Ingreso: junio-2007 Ubicación: Baja California, México Mensajes: 120	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.

10-jun-2007, 12:15	#9 (permalink)
marcelomdsc Fecha de Ingreso: junio-2007 Ubicación: Windsor, California. Mensajes: 656	Re: a:hover aaaaaaaaaaaaaaaaaaa claro. Ahora si todo tiene sentido......GRACIAS!

12-jun-2007, 11:14	#10 (permalink)
marcelomdsc Fecha de Ingreso: junio-2007 Ubicación: Windsor, California. Mensajes: 656	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.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado