Enlace

Menu interactivo estilo flash pero hecho con xhtml, css y javascript is a post from: Uy perdon

Para Hotmail solo debemos añadir:

<style type=”text/css”>
<!--
    img {display:block;}
-->
</style>

En Gmail añadir en cada imagen:

style="display:block;"

Espacios entre imagenes Mailings / Newsletters is a post from: Uy perdon

Tras tener toda la estructura grafica preparada nos damos cuenta de que necesitamos que el logotipo sea un link a la pagina de inicio. ?Como se nos ha podido pasar algo tan logico? Reproches, estirones de orejas y rabietas aparte podemos solucionarlo con una simple div, una declaracion de link y su posterior posicionamiento y tamaño en nuestra css. El codigo de la div contenedora del link podria ser algo asi:

<div class="nombre">
<a href="direccion"></a>
</div>

Y este seria el codigo en nuestra css;

.nombre { margin:0x; padding:0; width:125px; height:125px; }
.nombre a { display: block; height: 100%; width: 100%; }

Por supuesto los valores de tamaño y posicion los variaremos para que encaje perfectamente en la parte que queremos sea clicable.

Div clicable is a post from: Uy perdon

La mejor solución es realizar la escritura de nuestra CSS inline. Actualmente ésta es una práctica en desuso. Sin embargo existen soluciones que nos pueden facilitar el trabajo.  Convert CSS Styles to Inline for Emails puede realizar esa operación por nosotros. Es una buena utilidad para los que programan Newsletters o emailings. Espero que os sirva

Conversiones Css para Mailings is a post from: Uy perdon

La importancia radica en que parece qe Google haya iniciado una cuenta atrás para todos aquellos navegadores que no se basan en los estándares y basados en webkits.

El cambio cometado solo puede verse con los navegadores comentados, ni IE, ni Firefox, ni Opera muestran cambio alguno en los botones. Las dos características que están siendo utilizados para los botones son “sexy-webkit-border-radius-” y “webkit-gradient”. Ambos fueron ejecutados por los desarrolladores de WebKit como nuevas características CSS hace ya más de un año.

Con este hecho el gigante Google envía un aviso a los que creen en las nuevas características estándar y que su propio navegador ejecuta y apoya. No es la primera vez que Google hace esto. Google Gears se inició mucho antes de que Chrome como vía de aplicación de las normas HTML5.

Comparativamente, el  juicio antimonopolio contra Microsoft se centraba en la combinación escritorio, navegador y S.O. Google está utilizando su posición dominante para obligar a aplicar un tema estancado durante demasiado tiempo con una diferencia, que están usando su posición para un bien mayor (al menos eso espero). Microsoft podía haber dicho “este sitio web sólo es compatible con Internet Explorer”, mientras que Google, por el momento, no ha dicho:”Esta página web es mucho mejor, y tiene botones sexy, si utiliza Chrome”.

Google fuerza a usar las normas is a post from: Uy perdon

A la hora de desarrollar es importante tener en cuenta el siguiente decálogo de errores en Net.tus.

Pero si aún así nada de esto os satisface o tenemos poco tiempo o simplemente es que somos vagos siempre se puede echar mano del listado de css’s libres.

Hojas de referencia css is a post from: Uy perdon

El uso incorrecto de las clases sería definirlas para un único elemento. En cambio definir una id por cada elemento individual para estilos comunes sería incorrecto.

A la hora de definirlos los distinguimos mediante la colocación de un punto para las clases y una # para las id:

#header {} - id
.header {} - clase

Un posible uso incorrecto sería el siguiente:

#corporativo { color: red; font-size: 1.5em; text-decoration: none; }
#historia  { color: red; font-size: 1.5em; text-decoration: none; }
#contenido  { color: red; font-size: 1.5em; text-decoration: none; }
#destacado  { color: red; font-size: 1em; text-decoration: none; }

Como varios de nuestros elementos se repiten podemos aunar los elementos comunes:

.textocolor  { color: red; font-size: 1.5em; text-decoration: none; }
#destacado { font-size: 1em; }

Aunque el resultado de ambos es el mismo el segundo código es más ligero e inteligible en caso de aplicar algún cambio.

CSS: Id vs. class is a post from: Uy perdon

Examen css is a post from: Uy perdon

Botones Web 2.0 is a post from: Uy perdon

La estructura css es esta:

<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>

El resultado de la css el siguiente:

#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}

Leer artículo completo

Igualar columnas css sin hacks is a post from: Uy perdon