syneto
Usuario (México)
¿Como crear un menú horizontal en HTML y CSS utilizando listas desordenadas? Utilizar elementos de HTML para crear algo no es complicado, sin embargo hacerlo de manera eficiente puede parecer que complica un poco el asunto pero nada más lejos de la realidad, en esta tutoría vamos a ver como crear un menú horizontal utilizando meramente HTML y CSS, más en concreto vamos a formatear una lista desordenada para que sirva como menú horizontal. El HTML <!DOCTYPE html> <html lang="es"> <head> <title>Menú Horizontal Utilizando HTML y CSS</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <ul id="menu-horizontal"> <li><a href="">Item 01</a></li> <li><a href="">Item 02</a></li> <li><a href="">Item 03</a></li> <li><a href="">Item 04</a></li> <li><a href="">Item 05</a></li> </ul> </body> </html> Figura 1.1 index.html No hay grandes sorpresas, es una simple lista desordenada, ¿pero por qué utilizar una lista desordenada?, bueno HTML es un lenguaje de etiquetas que nos sirve para darle semántica (significado) a un documento para publicarlo, esto hace que tenga más sentido usar una lista por la simple razón de que un menú horizontal es en si una lista que se despliega de manera horizontal. Paso a paso Lo primero que vamos a hacer es quitarle a la lista la mayoría del estilo que le da el navegador por defecto: Los Bullets, los margenes (margin) y el relleno (padding). /*Este es un archivo CSS que he puesto al mismo nivel que el documento index.html y se llama estilo.css*/ #menu-horizontal{ list-style: none; /*Elimina el bullet de la lista*/ margin: 0; /*Sobre escribe los margenes de la lista a 0*/ padding: 0; /*Sobre escribe el relleno de la lista a 0*/ } Figura 2.1 index.html Aunque no lo pareciera llevamos más de la mitad del camino, así que seguiremos adelante con el siguiente paso: Hacer que los items de la lista se desplieguen de manera horizontal. ... #menu-horizontal li{ float: left; /*modifica el flujo de la lista*/ } Figura 2.2 index.html Nada complicado hasta el momento, ahora vamos a darle un poco de formato a los enlaces para que parecieran botones: ... #menu-horizontal a{ display: block; /*cambia el display original de los enlaces de inline a block esto con el fin de aplicarle algunas propiedades que solo se pueden aplicar a las cajas*/ color: #fff; /*cambia el color del texto del enlace a blanco*/ text-decoration: none; /*elimina el subrayado del enlace*/ text-align: center; /*centramos el texto de los enlaces*/ font-family: sans-serif; /*cambiamos la fuente*/ font-size: 12px; /*cambiamos el tamaño de la fuente*/ width: 75px; /*le damos un ancho de 75px a cada enlace*/ height: 25px; /*le damos un alto de 25px a cada enlace*/ background: #627aad;/*cambiamos el color de fondo*/ padding-top: 8px; /*le agregamos este pequeño relleno*/ } /*La siguiente regla es para controlar el comportamiento del enlace cuando el usuario pase el ratón sobre los botones*/ #menu-horizontal a:hover{ background: #6d86b7;/*cambiamos el color de fondo*/ } Figura 2.3 index.html Eso es todo, en 3 simples pasos hemos convertido una lista desordenada en una botonera horizontal, sería cosa de que siguieran experimentando, por ejemplo remplazar el texto por imágenes (que por cierto si no saben como hacerlo ese será el siguiente tema de mi próxima tutoría) /*Aquí la versión final del archivo CSS*/ #menu-horizontal{ list-style: none; margin: 0; padding: 0; } #menu-horizontal li{ float: left; } #menu-horizontal a{ display: block; color: #fff; text-decoration: none; text-align: center; font-family: sans-serif; font-size: 12px; width: 75px; height: 25px; background: #627aad; padding-top: 8px; } #menu-horizontal a:hover{ background: #6d86b7; } En fin, les dejo los archivos y el Live Demo para que lo revisen. El mejor agradecimiento es el que allás leído este post, si tienes alguna pregunta no te quedes sin más, has un comentario.
Esta ves decidí escribir esta tutoría sobre como crear un layout de 2 columnas centrado, vamos a ver algunos detalles sobre posicionamiento de elementos, nada muy elaborado pero que bien puede despejar de muchas dudas a muchas personas.El HTML <!doctype html><html lang="es"> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/estilo.css" /> <title>Layout 2 Columnas</title> </head> <body> <div id="contenedor"> <div id="cabecera"> </div><!--cabecera--> <div id="panel-lateral"> </div><!--panel-lateral--> <div id="contenido"> </div><!--contenido--> <div id="pie-pagina"> </div><!--div--> </div><!--contenedor--> </body></html> Nada muy elaborado, 5 elementos DIV con distintos identificadores (id), ahora nuestro trabajo es crear un layout de dos columnas y para lograrlo vamos a utilizar CSS para acomodar cada elemento para cumplir con nuestras necesidades.Paso a paso:1. Lo primero que vamos a hacer es quitar los margenes que genera el navegador en el elemento BODY (1) y enseguida le vamos a dar un borde azul de 1px solido a cada uno de nuestros elementos DIV para poderlos localizar en nuestro documento (2). /* 1 */body{ margin: 0;}/* 2 */div { border: 1px solid blue;}[/color] Figura 2.1 index.htmlAhora que tenemos una buena idea de donde se encuentran nuestros elementos vamos a acomodarlos.2. En este paso vamos a delimitar el ancho de nuestro DIV con el identificador contenedor a 896px (1), acomodar sus margenes 10px de arriba y abajo, auto de izquierda y derecha (2) y por último vamos a darle un relleno de 10px a todas sus dimensiones (3). [color=#000000]#contenedor{/* 1 */ width: 896px;/* 2 */ margin: 10px auto;/* 3 */ padding: 10px;} Figura 2.2 index.htmlAhora viene la parte divertida, ya delimitamos el área general, ahora vamos a acomodar los elementos que se encuentran dentro del DIV con con el identificador contenedor.3. Para este paso solo vamos a hacer dos cosas, vamos a delimitar el área de nuestra cabecera y sus margenes, como el ancho ya esta delimitado por el ancho del contenedor solo nos basta establecer su altura (1) y agregarle 10px de margen abajo (2) para separar ese área del resto. #cabecera{/* 1 */ height: 100px;/* 2 */ margin: 0 0 10px 0;} Figura 2.3 index.html4. Lo que sigue es dimensionar los elementos DIV con los identificadores panel-lateral y contenido, también vamos a colocarlos, el panel-lateral a la izquierda y el DIV con el ID contenido a la derecha, para lograr esto utilizare porcentajes, la propiedad min-height y la propiedad float, además vamos agregar al elemento contenido y panel-lateral un margen de 10px abajo para separarlos del que a futuro vendría siendo el pie de página. /*decimos que ambos tienen una altura mínima de 400px*/#contenido,#panel-lateral{ min-height: 400px;}/* el panel-lateral al 20% del ancho y flotando a la izquierda*/#panel-lateral{ width: 20%; float: left; margin: 0 0 10px 0; /*El margen de abajo*/}/* el contenido al 78% del ancho y flotando a la derecha*/#contenido{ width: 78%; float: right; margin: 0 0 10px 0; /*El margen de abajo*/} Nota:La propiedad min-height es soportada por la mayoría de los navegadores salvo por IE6 y menores, también hay que agregar que para poder utilizar el valor inherit en IE8 el documento tiene que tener declarado el <!DOCTYPE ...>Figura 2.4 index.html¿¡QUE DIABLOS PASO!?Aunque no lo pareciese paso algo lógico (si, de esas cosas lógicas que parecen ilógicas), al utilizar la propiedad float, modificamos el flujo del documento y en lo que respecta al elemento con el ID contenedor ambos elementos ya no están dentro de el.Vamos a ver los métodos para corregir este comportamiento:a) Podemos utilizar un sibling (hermano) de los elementos que están flotando y aplicarle la propiedad clear con el valor both siempre y cuando este se encuentre después de los elementos que están flotando, en este caso el elemento con ID pie-pagina: #pie-pagina{ clear: both;} Figura 2.5 index.htmlb) En caso de que no contenemos con otro elemento con el cual podamos regresar el flujo a su normalidad, siempre podemos agregar uno y aplicar el método anterior ¿pero por que agregar elementos innecesariamente?, para este método vamos a aplicar el sub-selector ":after" y lo aplicamos de la siguiente manera. (suponiendo que no existiera el elemento pie-pagina: #contenedor:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;} Figura 2.6 index.htmlEn este caso como contamos con el elemento pie-pagina vamos a utilizar el primer método (a), y con eso habremos acabado el acomodo de todos nuestros elementos.Unas palabras sobre :afterEl sub-selector :after nos permite insertar contenido después de el elemento seleccionado, esto no quiere decir que el contenido queda inmediatamente después sino que lo agrega a forma de contenido después del contenido ya existente en el elemento, :after más que ser un sub-selector es una pseudo clase y es soportada por la mayoría de los los navegadores (IE8+) para poder utilizarlo con IE8 tiene que estar declarado el <!DOCTYPE ...>Figura 2.7 index.htmlAntes de dar por terminado este post quisiera hacer notar el uso de margin, si bien podemos utilizar las propiedades margin-top, margin-right, margin-bottom y margin-left para modificar los margenes de arriba, derecha, abajo e izquierda respectivamente la propiedad margin a mi parecer ofrece mucha más flexibilidad ya que la podemos usar de 3 formas distintas:a) La general: elemento{ margin: [valor en pixels, pt, em, etc];} b) Arriba Abajo, Derecha Izquierda: elemento{ margin: [arriba y abajo] [derecha izquierda];} c) Arriba, Derecha, Abajo, Izquierda: elemento{ margin: [arriba] [derecha] [abajo] [izquierda];} Espero que les allá gustado esta tutoría, como siempre les dejo el demo y el código para que lo revisen y descarguen, si tienen alguna duda pregunten, que preguntar no nos hace tontos, y ya saben la mejor forma de agradecerme fue haber leído este post. Demo Código
¿Qué tal? hacia tiempo que no escribía, tuve mucho trabajo estos días.Una pregunta recurrente en la comunidad DPW es ¿Qué son los Sprites en CSS? o ¿Cómo utilizar Srpites?, si bien hay muchas herramientas que sirven para realizar estas tareas, es bueno entender el principio de esta técnica, en lo personal prefiero no usar ninguna de esas herramientas ya que es muy sencillo, pero por si fuera necesario para alguno de ustedes citare algunas al final de este post para que tengan una buena referencia.Antes de ComenzarEste tema si bien no es avanzado se requieren conocimientos de CSS y HTML, puesto que no voy a detener a explicar cosas como ¿cómo hacer un menú horizontal con listas desordenadas? o ¿cómo sustituir texto por imágenes? les recomiendo visitar los enlaces.La primera cosa que hay que ver antes de trabajar con Sprites es lo referente a esa mágica y bella propiedad que tienen los elementos de bloque llamada Background que nos permite establecer el color, una imagen y su posición como fondo de estos elementos.Para modificar el background podemos recurrir a algunas de las siguientes propiedades mediante CSS.-background-color (este valor puede ser en hexadecimal o en RGB).-background-image (El url de la imagen: url('url/imagen') ).-background-repeat (si se repite o no, sus posibles valores son: no-repeat | repeat | repeat-x | repeat-y ).-background-attachment (establece si el fondo es fixed o scroll, sus posibles valores son: fixed | scroll | inherit).-background-position (su posición que puede tomar forma en 2 valores referentes a X y Y se pueden usar los tokens left | center | right para X y para Y top | center | bottom tambien puede ser expresado en %, px, etc... y por supuesto inherit).básicamente eso es todo lo que tenemos que revisar para empezar a usar sprites, sobre todo lo referente a background-position, para esta tutoría me veran usando el shorthand background que basicamente es lo mismo que todo lo anterior desde una sola regla.Nota: para usar el shorthand background el orden de los valores es el siguiente:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionEjemplo: background: #000 url('url/img') no-repeat fixed top center; ¡Perfecto! ahora que dejamos todo eso en claro empecemos.El HTML <!doctype html><html lang="es"> <head> <title>CSS Sprites</title> <link rel="stylesheet" type="text/css" href="css/estilo.css" /> <meta charset="utf-8" /> </head> <body> <div id="header"> <div id="menu-wrapper"> <ul id="menu-usuario"> <li><a href="" class="perf">Perfil</a></li> <li><a href="" class="conf">Configuración</a></li> <li><a href="" class="docu">Documentos</a></li> </ul> </div> </div><!-- fin header--> <div id="contenido"> </div><!--fin contenido--> </body></html> El CSS body{ margin: 0; background: url('../img/bg_body.jpg') repeat;}#header{ height: 127px; padding-top: 1px; background: url('../img/bg_header.jpg') repeat-x;}#menu-wrapper{ width: 896px; height: 40px; margin: 79px auto 0 auto; padding: 4px 0;}#menu-wrapper ul{ margin: 0; padding: 0; list-style: none;} Les dejo los archivos de las imágenes por si quieren seguir paso a paso la tutoría:DescargarFigura 1 index.html estado inicialBien ya tenemos todo lo necesario para empezar a trabajar así que voy a hacer que cada uno de los enlaces mida 46px * 34px, acomodarlos de manera horizontal y cambiar el texto por las imágenes (sp_menu_users.png).Para logarlo agregue estas lineas de CSS. #menu-usuario:after{ content: "."; display: block; visibility: hidden; clear: both;}#menu-usuario li{ display: block; float: left; margin: 0 4px;}#menu-usuario a{ margin-top: 3px; display: block; width: 46px; height: 34px; background: url('../img/sp_menu_users.png') no-repeat 0 -34px; text-indent: -999px; overflow: hidden;} El resultado es el siguiente:Figura 1.1 index.htmlBien ya tenemos los 3 enlaces con la misma imagen de fondo, ahora hay que posicionarla, el momento en que preparamos nuestra imagen es la parte más importante para facilitar el trabajo con Sprites, hay distintos casos y distintas maneras para este caso calcule el tamaño y espacio entre las imágenes.Ahora toca colocar el fondo de distintas formas para cada imagen, por la forma en que hice mi imagen y el tamaño de los enlaces vamos disminuir 46px a la posición X de cada enlace salvo el primero: .conf{ background-position: -46px -34px !important;}.docu{ background-position: -92px -34px !important;} Como pueden ver lo único que realice fue modificar la posición X al primero le reste 46px y al segundo 92px y así quedaron en posición.Figura 1.2 index.htmlAhora solo hay que agregar el estado cuando el el ratón pase por encima del enlace. .perf:hover{ background-position: 0 0 !important;}.conf:hover{ background-position: -46px 0 !important;}.docu:hover{ background-position: -92px 0 !important;} Figura 1.3 index.html¡Voalá! hemos terminado ¿verdad que no era tan complicado?Enserio, insisto que gran parte del trabajo es preparar las imágenes para trabajar con ellas, este pequeño menú si bien puede ser mejor logrado (hay que aceptar que no me puse muy quisquilloso) fue muy fácil de hacer, otra cosa es que es accesible ya que no perdemos los textos, solo los escondimos así que una persona que tenga debilidad visual puede usar como apoyo un lector de pantalla.Como lo prometí aquí un par de enlaces a generadores de sprites:http://www.css-sprit.eshttp://es.spritegen.website-performance.org/Como siempre les dejo el código y el demo:DescargarDemoEl mejor agradecimiento es que allás leído este post, si tienes alguna duda comenta.