Menú principal

Tema 1

Listas

Distintos métodos para maquetar una lista.

Método A: Salto de línea con <br />

Manzanas<br />
Leche<br />
Patatas<br />
Chocolate<br />

Manzanas
Leche
Patatas
Chocolate

Durante años hemos podido ver este código en millones de páginas web.

Método B: Etiqueta <li>

<li>Manzanas<br />
<li>Leche<br />
<li>Patatas<br />
<li>Chocolate<br />

Método C: Cerrando etiquetas.

<li>Manzanas</li>
<li>Leche</li>
<li>Patatas</li>
<li>Chocolate</li>

Método D: Código válido.

<ul>
   <li>Manzanas</li>
   <li>Leche</li>
   <li>Patatas</li>
   <li>Chocolate</li>
</ul>

Marcado con CSS

Método simple. Algunos navegadores no renderizan bien el código.

ul {
       list-style: none;
       padding-left: 0;
       list-style-image: url(icono.gif);
    }

Método alternativo

ul {
       list-style: none;
    }

li {
       background: url (icono.gif) no-repeat 0 50%;
       padding-left: 17px;
    }

Vista en navegador

Menú de navegación con listas

<ul id="menu" >
   <li><a href="manzanas.htm">Manzanas</a></li>
   <li><a href="leche.htm">Leche</a></li>
   <li><a href="patatas.htm">Patatas</a></li>
   <li><a href="chocolate.htm">Chocolate</a></li>
</ul>

Código CSS

#menu {
                  margin: 0;
                  padding: 0 0 20px 10px;
                  border-bottom: 1px solid #696;
               }

#menu li {
                  margin: 0;
                  padding: 0;
                  display: inline ;           
                  list-style-type: none;
               }

#menu a {
                  float: left ;
                  line-height: 14px;
                  font-weight: bold;           
                  margin: 0 10px 4px 10px ;
                  text-decoration: none ;
                  color: #9c9 ;
               }

#menu a.active, #menu a:hover{
                                                            border-bottom: 4px solid #696 ;
                                                            padding-bottom: 2px ;
                                                            color: #363 ;
                                                        }

#menu a:hover{
                            color: #363 ;
                            }

Vista en navegador

 

Código CSS (sombras)

#menu {
                  margin: 0;
                  padding: 0 0 20px 10px;
                  border-bottom: 1px solid #9FB1BC;
               }

#menu li {
                  margin: 0;
                  padding: 0;
                  display: inline ;           
                  list-style-type: none;
               }

#menu a {
                  float: left ;
                  line-height: 14px;
                  font-weight: bold;           
                  margin: 0 10px 4px 10px ;
                  text-decoration: none ;
                  color: #708491;
               }

#menu a.active, #menu a:hover{
                                                            color: #000;
                                                            background: url(fondo.gif) no-repeat bottom center;
                                                        }