Unidad 8. Menús (II)


8.3. Posición de los elementos

Por defecto, los elementos de la lista se muestran uno debajo de otro. Pero por cuestiones de diseño, podemos preferir que se muestren en horizontal, uno al lado del otro. Esto podemos conseguirlo, por ejemplo poniendo los elementos como flotantes.

 #menu li {
     background-color: #AF7051;
     border: #5F4232 3px solid;
     margin: 1px;
     float: left;
     }

También podemos ponerlos en horizontal con la propiedad display: inline;. En este caso, lo mostramos como elementos en línea, por lo que no podremos regular su tamaño.

8.4. Tamaño de los elementos

Por defecto, el ancho (width) de una lista es del 100% del elemento que la contiene. Su alto (height) depende de la cantidad de elementos que contenga. El ancho de los elementos es del 100% de la lista cuando están en vertical, y ajustado al contenido cuando están en horizontal. El alto, se ajusta siempre al contenido.

Por cuestiones estéticas, puede que queramos personalizar estos tamaños. Por ejemplo, para que todos los elementos que están en línea tengan el mismo ancho, basta con definir un ancho con la propiedad width, suficiente para contener al elemento mayor:

 #menu li {
     background-color: #AF7051;
     border: #5F4232 3px solid;
     margin: 1px;
     padding: 2px;
     float: left;
     width: 60px;
     }

Si estamos utilizando los enlaces con display: block, debemos de darle el mismo alto para que lo llene todo. Otra opción sería definir el tamaño sobre los enlaces, ya que los elementos de lista flotantes se ajustarán al tamaño.

Recuerda, que siempre puedes centrar horizontalmente el contenido de un elemento con la propiedad text-align: center;.

Del mismo modo, podemos definir un alto con la propiedad height.

 #menu li {
     background-color: #AF7051;
     border: #5F4232 3px solid;
     margin: 1px;
     width: 150px;
     text-align: center;
     height: 30px;
     }
  

En CSS no existe una propiedad para centrar verticalmente el contenido de un elemento. Pero en casos como éste, en el que sólo tenemos una línea de texto, podemos utilizar un truco. Si al alto de la línea (la propiedad line-height) le damos el mismo tamaño que el alto del elemento (en el ejemplo anterior, habría que añadir line-height: 30px;), el texto se mostrará centrado verticalmente.


Enero-2010
Pág. 8.2

Atrás  Inicio  Adelante




.