Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
En este ejemplo vamos a ver como hacer una especie de barra de botones con CSS.
Los textos de los botones serán una lista normal, con <ul> y <li>, a la que daremos cierto estilo CSS para que quede como una barra de botones horizontal.
Para realizar la barra de botones debemos ir haciendo varias cosas
La primera es construir nuestra lista de botones con los tag <ul> y <li> normalitos.
<ul>
<li><a href="algun_sitio_1">opcion1</a></li>
<li><a href="algun_sitio_2">opcion2</a></li>
<li><a href="algun_sitio_3">opcion3</a></li>
</ul>
y nos queda esto
Ahora quitamos el puntito de delante, poniéndole al <ul> es estilo list-style-type:none. También hacemos que se coloquen en horizontal, haciendo que cada <li> tenga un float:left. Más o menos esto
<ul style="list-style-type:none;">
<li style="float:left;"><a href="algun_sitio_1">opcion1</a></li>
<li style="float:left;"><a href="algun_sitio_2">opcion2</a></li>
<li style="float:left;"><a href="algun_sitio_3">opcion3</a></li>
</ul>
y queda esto otro
Ya está conseguido lo dificil. Ahora es cuestión de jugar con las distintas bordes, márgenes y coloridos para conseguir el efecto que deseemos.
¿Dónde ponemos todo esto? ¿En el <li> o en el <a>?
En firefox funciona todo bien si lo ponemos en el <li>. En Internet explorer funciona casi todo bien. Las versiones anteriores a la 7 no hacen caso del :hover salvo que esté en la etiqueta <a>.
Si ponemos :hover en la etiqueta <a> para que se vea en internet explorer y dejamos el resto en la etiqueta <li>, sólo se pone azul el texto del enlace cuando pasamos el ratón sobre la etiqueta <a> y no todo el botón.
Esto nos obliga a poner también los tamaños de padding dentro de la etiqueta <a>. Al hacer esto, nos surge un nuevo problema y es que la etiqueta <li> se hace pequeña y no cabe dentro la <a> con todo su padding. Para que la etiqueta <li> coja el tamaño de la etiqueta <a>, debemos poner display:block en la etiqueta <a>, dándole así "mayor categoría" y que <li> la tenga en cuenta a la hora de fijar su tamaño.
El estilo de todo esto, ya separado, sería así
...
<style>
li.opcion
{
float:left;
margin:0px 1px;
border:1px solid black;
border-bottom:4px black solid;
border-right:4px black solid;
background:#eeeeee;
}
a.opcion
{
display:block;
padding:5px;
}
a.opcion:hover
{
background:cyan;
}
</style>
...
<ul style="list-style-type:none;">
<li class="opcion"><a class="opcion"
href="algun_sitio_1">opcion1</a></li>
<li class="opcion"><a class="opcion"
href="algun_sitio_2">opcion2</a></li>
<li class="opcion"><a class="opcion"
href="algun_sitio_3">opcion3</a></li>
</ul>
y el efecto de todo esto es ...