Desen Web

Una imagen vale mas que mil palabras, por lo que cual seria la mejor manera de explicar las propiedades css o las funciones PHP? pues claro con imágenes. Lo que me hace gracia es el tipo de imágenes elegidas.

Por ejemplo:

Un overflow: hidden = Ajusta los elementos para mostrar en linea

O en PHP strtolower se utiliza para pasar a minúsculas un string…

Link : borrachos + CSS

Link : Accidentes de Tráfico + PHP

Según los estandartes web, no se recomienda utilizar px para poner el tamaño a la letra. Si bien acepta cualquiera de las 4 medidas utilizadas para CSS se recomienda utilizar % o em.

Si te es difícil utilizar estas unidades hay un truco que te solucionara el problema. En el principio de tu CSS:

body {
font-size: 62.5%;
}

De esta forma tendras una escala decimal de em. Puesto que el tamaño definido por la mayoria de navegadores es de 16px y si calculas 16 x 62.5% obtienes los 10px. Con lo que puedes obtener, por ejemplo:

font-size:1em; /* 1em = 1 x 10px = 10px */
o decimales
font-size: 1.2em; /* 1.2em x 10px = 12px */

Cuanto utilizamos nuestros diseños en distintos navegadores, a menudo, nos encontramos con problemas de compatiblidad (Gracias Internet Explorer por hacernos perder el tiempo) pero la solucion puede ser senzilla.

Una manera seria eliminar los margin y padding del navegador con:

* {
margin: 0;
padding: 0;
}

Pero lo que normalmente se utiliza es una hoja de “reset”, de esta forma todas las propiedades quedan con los mismos valores por defecto para todos los navegadores:

A continuación se muestra la hoja de estilos reset.css propuesta por el diseñador Eric Meyer:

/* v1.0 | 20080212 */

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,
b, u, i, center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
:focus {
outline: 0;
}
/* En HTML añadir cellspacing=”0″ */
table {
border-collapse: collapse;
border-spacing: 0;
}

Aun y así esta hoja de estilos no se adapta a todos los diseños, pero nos ahorrara muchos esfuerzos en la mayoría de casos.

Una web que merece una mención especial es dynamicdrive, una web donde encontrareis diferentes scripts de menús, galerías, efectos… utilizando css y javascript.La mayoria de los script son faciles de entender y se hace muy sencillo modificar el codigo para adabtarlo a tus necesidades.

No necesariamente tiene que tratarse de un mapa geográfico, sino que puede ser cualquier mapa de imagen que al pasar el puntero del mouse por encima despliegue información adicional, otras imágenes, etc. Todo con CSS.En la web de MikeCherim.com tenemos un ejemplo para que veamos cómo funciona y también desde allí podemos descargar los archivos XHTML y CSS necesarios para que revises el código y lo uses en tu sitio web. Haz clic aquí para ir al sitio.