Foros del Web » Creando para Internet » CSS »

Ayuda para posicionar imagen dentro (o sobre) menú

Estas en el tema de Ayuda para posicionar imagen dentro (o sobre) menú en el foro de CSS en Foros del Web. Hola gente. Estoy haciendo una página en la que utilizo un menú con CSS. Es una barra de color en degradé y hay 5 secciones. ...
  #1 (permalink)  
Antiguo 28/10/2009, 15:03
 
Fecha de Ingreso: septiembre-2008
Mensajes: 81
Antigüedad: 9 años, 2 meses
Puntos: 0
Exclamación Ayuda para posicionar imagen dentro (o sobre) menú

Hola gente.

Estoy haciendo una página en la que utilizo un menú con CSS. Es una barra de color en degradé y hay 5 secciones. Cada vez que paso el mouse por arriba, hay una pequeña modificación en el color.

He dejado un espacio al final (digamos que es el lugar de un botón) y lo tengo para pegar dos banderitas chiquitas dentro de la zona del menú. La idea es que las mismas sirvan para pasar de un idioma al otro.

Sin embargo no me sale: cuando pongo la banderita y voy con el mouse, se ve el área activa, como si se tratara de un botón más. Alguien podría ayudarme para evitar esto?

CSS:

Código:
#nav {
    margin:0;
	padding: 0 0 20px 10px;
	background: url(menu_bg.jpg) repeat-x;
	}

html>body #nav {
	padding: 0 0 38px 0px;
	}

#nav li {
	margin: 0; 
	padding: 0;
	display: inline;
	list-style-type: none;
	}
	
#nav a:link, #nav a:visited {
	float: left;
	font-size: 18px;
	line-height: 38px;
	font-weight: bold;
	padding: 0 32px 0px 32px;
	text-decoration: none;
	color: #FFF;
	}

#nav a:link.active, #nav a:visited.active, #nav a:hover {
	color: #FFF;
	background: url(menu_bg-active.jpg) repeat center;
	}


#flag {
    margin-bottom:50px;
	padding: 0 0 20px 10px;
	}
Código HTML:
<ul id="nav">
	<li><a href="index_en.htm">Inicio</a></li>
	<li><a href="services_en.htm">Nuestros servicios</a></li>
	<li><a href="#">Muestras</a></li>
	<li><a href="customers_en.htm">Clientes</a></li>
	<li><a href="contact_en.htm">Contacto</a></li>
	<li><a href="contact_en.htm"><img id="flag" src="en.png"/></a></li>
</ul> 
Se puede acomodar de alguna manera, evitando que el problema de que me muestra zona activa detrás de la bandera?
  #2 (permalink)  
Antiguo 28/10/2009, 15:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda para posicionar imagen dentro (o sobre) menú

Hola Loiserl
Me he permitido hacer algún cambio a tus códigos.
No se si será lo que andas buscando:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. body, html {
  8.     background-color: #fff;
  9.     height: 100%;
  10.     width: 100%;
  11. }
  12. #nav {
  13. /*    margin:0;
  14.     padding: 0 0 20px 10px;*/
  15.     background: #444 url(menu_bg.jpg) repeat-x;
  16.     }
  17.  
  18. html>body #nav {
  19.     /*padding: 0 0 38px 0px;*/
  20.     }
  21.  
  22. #nav li {
  23. /*    margin: 0;
  24.     padding: 0;
  25.     display: inline;*/
  26.     float: left;
  27.     list-style-type: none;
  28.     }
  29.    
  30. #nav a:link, #nav a:visited {
  31. /*    float: left;*/
  32.   display: block;
  33.   background: #444;
  34.     font-size: 18px;
  35.     line-height: 38px;
  36.     font-weight: bold;
  37.     padding: 10px 32px;
  38.     text-decoration: none;
  39.     color: #FFF;
  40.     }
  41.  
  42. #nav a:link.active, #nav a:visited.active, #nav a:hover {
  43.     color: #FFF;
  44.     background: #cdcdcd;
  45.     }
  46. #nav a#flag:link.active, #nav a#flag:visited.active, #nav a#flag:hover {
  47.   background: #444;
  48. }
  49.  
  50. #flag {
  51. /*    margin-bottom:50px;
  52.     padding: 0 0 20px 10px;*/
  53.     }
  54. </head>
  55. <ul id="nav">
  56.     <li><a href="index_en.htm">Inicio</a></li>
  57.     <li><a href="services_en.htm">Nuestros servicios</a></li>
  58.     <li><a href="#">Muestras</a></li>
  59.     <li><a href="customers_en.htm">Clientes</a></li>
  60.     <li><a href="contact_en.htm">Contacto</a></li>
  61.     <li><a id="flag" href="contact_en.htm"><img src="en.png" alt="bandera de idioma"/></a></li>
  62. </ul>
  63. </body>
  64. </html>
Como verás, al hacer hover sobre la imagen, su fondo no se altera. Añadí una definición más al css: #nav a#flag:link.active, #nav a#flag:visited.active, #nav a#flag:hover y el id lo aplico al enlace, no a la imagen.
No he tomado mucho punto en las medidas de cada "a" que se las da el padding. Ajusta a tus necesidades, igual que los fondos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 28/10/2009, 16:00
 
Fecha de Ingreso: septiembre-2008
Mensajes: 81
Antigüedad: 9 años, 2 meses
Puntos: 0
Sonrisa Respuesta: Ayuda para posicionar imagen dentro (o sobre) menú

Muchísimas gracias. Voy a probar a ver qué sucede. Un abrazo.
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 19:39.