Tema: Menú de navegación con listas
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 10/12/2011, 14:06
Avatar de cristian_cena
cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: Menú de navegación con listas
Prueba con esto, el código está comentado.
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" xml:lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         * { padding: 0; margin: 0; } /*margin:0 auto; no es bueno darselo a todos los elementos, ya que por defecto estarías centrando todo*/
  8.         
  9.         #menus {
  10.             position: relative;
  11.             width: 697px;
  12.             top: 180px;
  13.             margin: 0 auto;
  14.         }
  15.         /*overflow:hidden, xq el ul contendrá li flotados*/
  16.         #menus ul {
  17.             height: 198px;
  18.             background-color:#9F1A1A; 
  19.             overflow:hidden;  
  20.         }
  21.         /*flotamos los li, damos ancho fijo, centramos vertical con line-height (nota como line-height es igual a height) y horizontal con text-align*/    
  22.         #menus ul li{
  23.             width:174px;
  24.             float:left;
  25.             font-size: 42px;
  26.             font-family: "MoolBoran";
  27.             text-align:center;
  28.             line-height:198px;
  29.             list-style:none;
  30.         }
  31.         /*convertimos a bloque el enlace para darle alto y ancho*/        
  32.         #menus ul li a{
  33.             display:block;
  34.             width:174px;
  35.             height: 198px;
  36.             color:#fff;
  37.             text-decoration:none;
  38.         }
  39.         #menus ul li a:hover{
  40.             background:#2e2e2e;
  41.         }
  42.     </style>
  43. </head>
  44. <body> 
  45.     <div id="menus">
  46.         <ul>
  47.             <!-- necesitaras <a> (enlaces) para el menú-->
  48.             <li><a href="#">Portada</a></li>
  49.             <li><a href="#">Portafolio</a></li>
  50.             <li><a href="#">Testimonios</a></li>
  51.             <li><a href="#">Contacto</a></li>
  52.         </ul>
  53.     </div>
  54. </body>
  55. </html>