|
| Ahora vamos a empezar a añadir código CSS. |
| Primero cambiamos el valor del color del fondo del BODY a Negro, para que se vea bien nuestra caja, que va a ser blanca. |
| También reinicializamos los valores de los márgenes y rellenos a 0, para que estos valores sean iguales para cualquier navegador. |
| Después definimos una caja (DIV) donde incluir nuestro menú y le vamos a dar color blanco. |
| También le hemos especificado el tipo de fuentes, la altura y la anchura. La altura aun es provisional (ahora después haremos el cálculo) y la anchura si que ya debemos tener una idea definitiva del valor que deseamos para ella. |
| He añadido un TOP:10px y LEFT:10px para que se vea bien el DIV, pero luego a la hora de ubicar el menú en nuestra Web, habrá que modificar estos valores, o quitarlos. |
 |
| El EJEMPLO muestra el resultado de nuestros cambios. De momento vemos que los valores de la lista no encajan en el DIV (En IExplorer 6, la caja se expande para englobar al texto. Esto en este caso no es importante). |
| |
| Ahora ya vamos a empezar a modificar nuestra lista. |
| Para ello definimos el menú UL. Le llamamos “menuh” y, al menú en general (ul#menuh) le ponemos los márgenes y rellenos a 0 (soy un poco pesado en esto, pero es mejor asegurarse … ) y le eliminamos las viñetas poniendo el LIST-STYLE a “none” (no las vamos a utilizar). |
| A cada elemento de la lista del menú (ul#menuh li) le damos un margen de 1 píxel, y ATENCIÓN, le ponemos el FLOAT:LEFT. |
 |
| El EJEMPLO muestra el resultado de nuestros cambios. Ahora la lista ya sale dentro del DIV por completo, porque el FLOAT:LEFT ha hecho que cada elemento de la lista flote hacia la izquierda, con lo que va poniendo consecutivamente uno al lado del otro. |
| |
| Vamos ahora a modificar los elementos que serán enlaces dentro de nuestra lista (que son todos). Esto lo hacemos con la etiqueta de CSS (ul#menuh li a). |
| He modificado muchas cosas. De momento, la altura la he establecido en 30px (la caja tiene 32, que son los 30px de los enlaces mas los 2px de los márgenes, uno de arriba y uno de abajo). La anchura la he establecido en 150px. Si sumamos a los 150, los dos pixeles de los dos márgenes laterales de cada elemento, nos da 152px de ancho por elemento. Como son 4, eso da 608px en total para todo el menú. Este valor le cambio en la anchura total del DIV del menú (#cajamenu), para que la caja sea de la altura y de la anchura exacta del menú. |
| Luego, el (display:block;) hace que todo el espacio de cada elemento de la lista sea parte del enlace, el (text-decoration:none;) elimina en subrayado de los enlaces, el (font-variant: small-caps;) hace que todas las letras estén en mayúsculas y las primeras un poco mas grandes, y el resto es muy obvio. Centramos el texto y le damos color blanco, el fondo de color negro, la letra en negrita y el tamaño 11px. |
 |
| El EJEMPLO muestra el resultado de nuestros cambios. Esto ya se va pareciendo a un menú. |
| NOTA: En IExplorer 6, a nuestra caja le faltará un pixel. Le he dado mil vueltas y no he encontrado razón lógica o ilógica para esto, pero la anchura habría que ampliarla a 609px. Por otra extraña razón que tampoco entiendo, si el margin:1px; lo quitamos de (ul#menuh li) y lo ponemos en (ul#menuh li a), entonces si que entra en la medida original, es decir, en 608 pixeles, que es lo correcto. |
| |
| Ahora voy a cambiar solo dos detallitos, que le van a dar un aspecto muy diferente a nuestro menú. |
| Primero voy a escribir el texto de cada elemento de nuestro menú en dos líneas. Para ello tan solo incluiré un < BR > en el lugar donde deseo que se haga el salto de línea, dentro de cada línea HTML del tipo “< LI >< A HREF… “. |
| Luego voy a añadir la imagen siguiente (negro.jpg) como fondo de cada elemento del menú, en el (ul#menuh li a). |
 |
| Aquí vemos el código. Repito que solo he añadido la última línea en el (ul#menuh li a) y añadido los < br > en cada elemento de la lista, dentro del < BODY >. El resto está igual que el código anterior. |
 |
| El EJEMPLO muestra el resultado de nuestros cambios. Ahora ya parece otra cosa. |
| |
| Vamos ahora a colocar nuestro menú en la maqueta que tenemos, en la que ya hemos añadido el menú vertical del tutorial anterior. |
| Para ello copiamos y pegamos el codigo CSS de nuetro menú en el fichero .css de la maqueta, y colocamos el código HTML del menú en su sitio. |
| He eliminado el top:10px; left:10px; en el div “cajamenu” que estaba puesto de forma provisional. Después, como el menú ocupa 608px de ancho y el div que ahora lo contiene (cuerpo) ocupa 620px de ancho, pongo un left: 6px; para centrarlo (620-608=12/2=6px). |
 |
| Este último EJEMPLO muestra el resultado final. El fichero CSS es misestilos7.css (si no se ve bien (pasa cuando lo abrimos desde Internet Explorer), guardadlo en el escritorio y abridlo con Worpad, por ejemplo para que los caracteres de fin de linea y retorno de carro se vean correctamente),y el código HTML podéis obtenerlo vosotros mismos de la ejecución del ejemplo con las opciones del navegador Ver/Código fuente (no lo pongo porque es bastante largo). |
Esto es todo. Si os ha sido útil, apoyadme para que pueda continuar añadiendo tutoriales. Si teneis dudas, exponedlas en el link de debajo.
|
| |
|
Español
English
Página de Portada
