html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

Leído en: Kabytes.

• Vertical align div
• Min-Height
• PNG transparency
• Autoclear
• Reset CSS
• Scrolling Render IE
• Opacity
• PRE Tag
• Li Background Repeat IE
• Good to know

Acceder a los hacks.

Web: Pure CSS Data Chart

Vía: Kabytes.

Pasos para instalarlo:

1.-Descargamos el fichero (Guardar como) con las librerías (imageMenu.js y mootools.js)

2.-Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imageMenu.js"></script>

3.- Insertamos el siguiente código en nuestra hoja de estilos (CSS):

/*Images menu*/
#kwick {
position: relative;
/*border-bottom: 3px double #333;*/
margin-top: 20px;
}
#kwick ul{
list-style:none;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 97px;
/*padding: 10px;*/
background: #fff;
/*border-right: 5px solid #202020;*/
border-right: 2px solid #fff;
}
#kwick .kwick span {
display: none;
}
#kwick .opt1 {
outline: 0; background: #9ce782 url(../images/landscapes.jpg) ;
}
#kwick .opt2 {
outline: 0; background: #92bdfa url(../images/people.jpg);
}
#kwick .opt3 {
outline: 0; background: #faa892 url(../images/nature.jpg);
}
#kwick .opt4 {
outline: 0; background: #e78282 url(../images/urban.jpg);
}
#kwick .opt5 {
outline: 0; background: #000 url(../images/abstract.jpg);
border-right: 0;
}

4.-Aquí está el código HTML de nuesto menú en cuestion:

<div id="kwick">
			<ul class="kwicks">
				<li><a class="kwick opt1" href="http://www.christiangl.com/" ></a></li>
				<li><a class="kwick opt2" href="http://www.christiangl.com/" ></a></li>
				<li><a class="kwick opt3" href="http://www.christiangl.com/"></a></li>
				<li><a class="kwick opt4" href="http://www.christiangl.com/" ></a></li>
				<li><a class="kwick opt5" href="http://www.christiangl.com/" ></a></li>
			</ul>
</div>
		<script type="text/javascript">
			var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
		</script>

5.-Para crear más opciones en el menú debemos hacer lo siguiente:

Continuamos añadiendo las definiciones que necesitemos en la página de estilo de nuestro sitio de la siguiente forma:

#kwick .opt6 {
outline: 0; background: #000 url(../images/NuevaImagen.jpg);
border-right: 0;
}

y a continuación añadimos en el HTML de nuestro menú el link con su determinada clase:

<li><a class="kwick opt6" href="http://www.christiangl.com/" ></a></li>

Y eso es todo, aquí os dejo la dirección de una demo del funcionamiento del menú .