Foros del Web - Ver Mensaje Individual

willyfc · #14 (**permalink**) 08/09/2009, 07:57

A ver este ejemplo, solo revisa la ruta a las imágenes y ajusta las medidas a tu diseño:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body{font-family:Verdana, Arial, Helvetica, sans-serif;}
#menu{
    width:513px;
    height:73px;
    border:1px solid #CCC;
    background:#069;
    margin:0 auto;
}
 
#menu ul{list-style:none; margin:0; padding:0; background:#FFF; width:400px; height:73px; margin:0 0 0 20px}
#menu ul li{float:left}
#menu a{ width:80px; background:url(bola.jpg) center top no-repeat; height:73px; color:#060; text-decoration:none; font-size:0.7em; text-align:center; display:block; margin:8px 0 0 0;}
#menu a span{display:block; padding:44px 0 0 0;}
#menu a:hover{color:#666; text-decoration:none; background:url(bola2.jpg) no-repeat center top;}
#menu a.current{color:#666; text-decoration:none; background:url(bola2.jpg) no-repeat center top;}
</style>
</head>
 
<body>
<div id="menu">
    <ul>
        <li><a href="#"><span>E. de Servicio</span></a></li>
        <li><a href="#"><span>Tienda</span></a></li>
        <li><a href="#"><span>Cafeteria</span></a></li>
        <li><a href="#" class="current"><span>Restaurant</span></a></li>
        <li><a href="#"><span>Hotel</span></a></li>
    </ul>
</div>
</body>
</html>

Valga decir que solo estoy utilizando 2 imágenes, una verde y una gris, lo demás es texto que cambia al pasar el ratón.