15 Noviembre, 2007 por jairo
Después de buscar en la red algun "Snippet" de código de cómo crear un menu de iconos con listas, horizontal y además con texto centrado en CSS y no encontrar nada, he tenido que ponerme manos a la obra y crearlo. Es fácil de ver este tipo de menu rápido en las webs maquetado con las ya olvidadas tablas , pero no tanto con CSS y XHTML.
He probado varios métodos, unos más simples que otros pero todos ellos mostraba diferencias visuales entre navegadores como IE7 y FireFox 2.0.0.9.
Lo más difÃcil ha sido centrar la imagen y el texto, pero con una buena combinación de las propiedades "float" y "display" he conseguido lo que querÃa. Además este código permite que el espacio de cada icono se autoextienda cuando escribimos un texto largo. Por cierto, en el código he centrado la lista y además he introducido un borde en la parte inferior e izquierda para que se vea mejor el centrado de los iconos y texto.
El código fuente del CSS es simple y puede quedar más simple quitanto los bordes y el centrado general.
CSS:
#quickmenu
{
width:600px;
margin-left:auto;
margin-right:auto;
}
#quickmenu ul{
margin:0;
padding:0;
}
#quickmenu ul li{
display:inline;
border-left:solid 1px #CCCCCC;
border-bottom:solid 1px #CCCCCC;
float:left;
text-align:center;
}
#quickmenu ul li.firstelement{
border:0;
border-bottom:solid 1px #CCCCCC;
}
#quickmenu a{
display:block;
background-repeat:no-repeat;
background-position:top;
padding:40px 10px 0px 10px;
}
#inicioico{background-image:url(wp-content/uploads/2007/11/ico1.gif);}
#ico1{background-image:url(wp-content/uploads/2007/11/ico2.gif);}
#ico2{background-image:url(wp-content/uploads/2007/11/ico1.gif);}
#ico3{background-image:url(wp-content/uploads/2007/11/ico2.gif);}
#ico4{background-image:url(wp-content/uploads/2007/11/ico1.gif);}
#ico5{background-image:url(wp-content/uploads/2007/11/ico2.gif);}
Aquà tenemos el código HTML. Como veis queda un código simple y limpio, ya que por ejemplo, no introduzco las imágenes con la etiqueta "IMG". Además, utilizando esta etiqueta no se centraba bien el texto y la imagen.
HTML:
<li class="firstelement"><a href="" id="inicioico">Inicio
</a></li> <li><a href="" id="ico1">Ico 1
</a></li> <li><a href="" id="ico2">Icono 2
</a></li> <li><a href="" id="ico3">Ico 3
</a></li> <li><a href="" id="ico4">Icono 4
</a></li> <li><a href="" id="ico5">ico
</a></li> </ul>
</div>
Loading ...
Esta entrada fue publicada en XHTML, CSS
Puedes seguir todas las respuestas de esta entrada a través de RSS 2.0 feed.
Dejar un comentario
(2 votos, media: 4.5 de 5)
Abril 11th, 2008 a las 3:42 pm
HOLA,MIRA TENGO UN BLOG Y NECESITO UN MENU HORIZONTAL DESPLEGABLE,ADONDE TENGO QUE PEGAR ESTOS CODIGOS,EN EL EN EL EN QUE PARTE DEL HTML?????DE LA PLANTILLA ,DESDE YA MUCHAS GRACIAS.
Enero 15th, 2009 a las 5:26 pm
Muchisimas Gracias, justo lo que andaba buscando…. AHora trataré de colocar el texto bajo las imagenes!
Febrero 6th, 2009 a las 11:56 pm
muy bueno el menu, excelente !! podrÃas decirme como quitar el punto que sale antes del texto debido a la propiedad
gracias !!
Abril 26th, 2009 a las 7:16 am
Gracias!! es lo q buscaba! Suerte!