Ayuda para posicionar imagen dentro (o sobre) menú

Loiserl · #1 (**permalink**) 28/10/2009, 14:03

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?

kseso? · #2 (**permalink**) 28/10/2009, 14:51

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body, html {
    background-color: #fff;
    height: 100%;
    width: 100%;
}
#nav {
/*    margin:0;
    padding: 0 0 20px 10px;*/
    background: #444 url(menu_bg.jpg) repeat-x;
    }
 
html>body #nav {
    /*padding: 0 0 38px 0px;*/
    }
 
#nav li {
/*    margin: 0; 
    padding: 0;
    display: inline;*/
    float: left;
    list-style-type: none;
    }
    
#nav a:link, #nav a:visited {
/*    float: left;*/
  display: block;
  background: #444;
    font-size: 18px;
    line-height: 38px;
    font-weight: bold;
    padding: 10px 32px;
    text-decoration: none;
    color: #FFF;
    }
 
#nav a:link.active, #nav a:visited.active, #nav a:hover {
    color: #FFF;
    background: #cdcdcd;
    }
#nav a#flag:link.active, #nav a#flag:visited.active, #nav a#flag:hover {
  background: #444;
}
 
#flag {
/*    margin-bottom:50px;
    padding: 0 0 20px 10px;*/
    }
</style>
</head>
<body>
<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 id="flag" href="contact_en.htm"><img src="en.png" alt="bandera de idioma"/></a></li>
</ul>
</body>
</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

Loiserl · #3 (**permalink**) 28/10/2009, 15:00

Muchísimas gracias. Voy a probar a ver qué sucede. Un abrazo.