Foros del Web - Ver Mensaje Individual - Ayuda para posicionar imagen dentro (o sobre) menú

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