Buenas a toda la gente del foro, mis dudas son seguramente más que sencillas, y mucho más para todos ustedes. Me gustaría que me dejaran un link de algun tutorial que sea... super paso a paso (hiper detallista o como quieran llamarlo) de cómo hacer un menú simple... o el más simple simple del mundo con listas. A ver si me puedo explicar mejor, como saber... sé como se hace, pero a lo que apunto es a otra cosa, sería el por qué de cada cosa, osea..... quiero entenderlo todo, eso es lo más importante no?. A continuación voy a poner dos ejemplos como para que me entiendan mejor, pero como dije antes..... solamente se trata de armar un menú simple, que no tenga nada del otro mundo, que sea simple en todo sentido.
Ejemplo n° 1
En este primer ejemplo el Menú se ve perfectamente de forma horizontal
Ejemplo n° 2
Ejemplo n° 1
<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>#menu {
margin: 0;
padding: 0 0 20px 10px; background-color: #00FF66;
}
#menu li {margin: 0;
padding: 0;
list-style-type: none;
float: left ;} (por qué ponen la propiedad "float" en la capa #menu li?)
#menu a {line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px ;
text-decoration: none ;
color: #0000FF;}
#menu a.active, #menu a:hover{border-bottom: 4px solid #696 ;
padding-bottom: 2px ;
color: #000033;}
#menu a:hover{color: #363 ;}
En este primer ejemplo el Menú se ve perfectamente de forma horizontal
Ejemplo n° 2
En este segundo ejemplo, también el Menú se ve perfectamente de forma horizontal. ¿Entonces cuál es la diferencia de poner la propiedad float en la parte de #menu a ó #menu li?, me explico lo que quiero saber?, así como hice esta pregunta, podría hacer mucho más.<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>#menu {
margin: 0;
padding: 0 0 20px 10px; background-color: #00FF66;
}
#menu li {margin: 0;
padding: 0;
list-style-type: none;}
#menu a {float: left ;} (por qué ponen la propiedad "float" en la capa #menu a?)
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px ;
text-decoration: none ;
color: #0000FF;}
#menu a.active, #menu a:hover{border-bottom: 4px solid #696 ;
padding-bottom: 2px ;
color: #000033;}
#menu a:hover{color: #363 ;}