Menú horizontal
Para conseguir en CSS un menú como el siguiente
opcion 1
opcion 2
opcion 3
Se escribe algo así
<div style="text-align:center;float:left;width:32%;border-style:solid;border-width:1px;border-color:red;">opcion 1</div> <div style="text-align:center;float:left;width:32%;border-style:solid;border-width:1px;border-color:red;">opcion 2</div> <div style="text-align:center;float:left;width:32%;border-style:solid;border-width:1px;border-color:red;">opcion 3</div>
- text-align:center; para que el texto quede centrado dentro de la caja
- float:left; para que la caja se pegue al lado izquierdo, si queda libre. La primera ira al lado izquierdo, la segunda se pegará a la primera y la tercera a la segunda
- width:32%; para que cada caja ocupe aproximadamente la tercera parte del espacio disponible, quedando el menú horizontal ocupando casi todo el ancho de la página.
- border-style:solid; para que las cajas queden rodeadas de una línea
- border-width:1px; para que la línea que rodea las cajas sea de 1 pixel de ancho
- border-color:red; La línea de color rojo.
Por supuesto, donde va el texto "opcion x" se puede poner un link para dar sentido al menú. También sería bueno no repetir tantas veces lo mismo, poniendo en una hoja de estilo separada algo como esto
/* fichero estilo.css */ div.opcionmenu { text-align: center; border: 1px solid red; width: 32%; float:left; }
y luego en la página
<html> <head> <link rel="stylesheet" type="text/css" href="estilo.css"/> </head> <body> <div class="opcionmenu">opcion 1</div> <div class="opcionmenu">opcion 2</div> <div class="opcionmenu">opcion 3</div> </body> </html>
Puede conseguirse el mismo efecto, con CSS3, utilizando flexbox