BlogStyle

Menú sencillo y vistoso en CSS

Martes, Mayo 6th, 2008

Estaba viendo unos templates en html y css que tengo en mi computadora y vi uno en el que me gustó su menú y me llamó mucho la atención el hecho de que solo use una imagen para el y yo estoy acostumbrado a usar mínimo 2.

Enseguida abrí el archivo en mi dreamweaver y verifiqué el CSS y la estructura del html; No me tomó más de 5 minutos en darme cuenta de lo sencillo que es.

Esta es la imagen de como se ve en el template mencionado.

¿A poco no se ve bonito? Pues es muy fácil hacerlo. Y solo se usa esta imagen:

Primero vamos a analizarlo con el Dreamweaver.

Como vemos en la imagen de arriba, consta de dos elementos principales, de <li>
y de <a>. <li> esta debajo de <a>.

Su html viene siendo este:

<ul>
	<li id="actual"><a href="#">opcion</a></li>
	<li><a href="#">opcion 2</a></li>
	<li><a href="#">opcion 3</a></li>
	<li><a href="#">opcion 4</a></li>
	<li><a href="#">opcion 5</a></li>
</ul>

Se trata de una lista desordenada que contiene enlaces. La id es para diferenciar en la sección que te encuentras de la página.

Ahora la magia del CSS

ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 85%;
 
}
 
ul li {
float: left;
margin: 0;
padding: 0 0 0 9px;
background-image: url(nav.gif);
background-position: left top;
background-repeat: no-repeat;
}
a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 7px 20px 4px 10px;
background-image: url(nav.gif);
background-position: right top;
background-repeat: no-repeat;
}
a:hover {
color: #00CCCC;
}
#actual {
background-position: left -41px;
 
}
#actual a {
background-position: right -41px;
color: #FFFFFF;
}

Etiqueta por etiqueta.

• ul: Limpiamos todo su aspecto de la lista desordenada y le dimos configuración a las fuentes.
• ul li: Hicimos un float: left para que se alinie horizontalmente, limpiamos el margen y un padding hacia la izquierda para que quede ese espacio entre el enlace y la lista.
  También la asignamos un background-image y lo posicionamos en la esquina superior izquierda.
• a: Lo declaramos un bloque, le damos un padding para que se expanda de tamaño la lista y le dimos un background-image con alineación superior derecha.
  Desde aqui ya se debe ver la estructura del menú ahora solo faltan los últimos toques.
• a:hover: No hace falta explicar.
• #actual: Declaramos el id para el menú el cúal identificará en que sección estamos. Solo le movemos el background hacia la izquierda y lo bajamos 41px.
• #actual a: No cambia de color su enlace de este id.

Con esto queda listo nuestro lindo menú y tan solo utilizamos una imagen.

Lo importante es que se entienda la estructura y la construcción, apartir de ahi tu solo podrás crear los tuyos de acuerdo a tus necesidades.

Les dejo el archivo de ejemplo.

Tags: (X)HTML, CSS, Diseño, Tutoriales
Guardado en: (X)HTML, CSS, Diseño | Sin comentarios »

Enlaces que se usan sin texto ni imágenes

Viernes, Mayo 2nd, 2008

Vamos por este primer tutorial espero de muchos en el que vamos a ver como crear un enlace sin texto ni imagenes y para que nos puede servir.

De ejemplo vamos a usar esta parte del template:

Como vez son 3 enlaces que al pasar el puntero sobre ellos se alza formando un bonito efecto; Vamos a ver como crearlo.
(more…)

Tags: (X)HTML, CSS, Tutoriales
Guardado en: (X)HTML, CSS, Diseño | Sin comentarios »