sintaxis css en boletín mi pregunta es sobre el envío por email de código css.
Os explico la situación. Tengo que enviar un boletín con las últimas actividades de una asociación. He pensado que para que sea más vistoso, ponerlo en tres columnas con una cabecera y pie.
Las imágenes, que no son muchas, tendrían un enlace directo, no irían como adjuntas.
He leído en el foro que gmail y hotmail no leen el código css, y que hay que escribirlo insertado en el código html.
Ahora lo tengo distribuído así:
Código:
Me gustaría saber cómo ir incluyendo el código css dentro del html. He visto ejemplos pero todos se refieren al estilo de las letras, tamaño, negrita... pero mi duda son los divs. <html>
<head>
<title>Boletín Anoa</title>
</head>
<body>
<style type="text/css">
BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: left;
background-image: url(http://www.dog-paw-print.com/images/lime-dog-paw-print-backgrou.jpg);
}
IMG {
border: none;
}
p {
font-family: verdana;
color: #000000
font-size: 10pt;
}
n{
font-weight: bold;
}
#contenedor{
width:800px;
margin: auto;
background-color: #ffffff;
text-align: left;
}
#cabecera{
background-color: #CEF6CE;
width: 800px;
height: 110px;
padding: 3 3 3 10px;
}
#cabecera img{
float: left;
}
#cabecera H1{
text-align: center;
color: #0000ff;
}
#cabecera h2{
text-align: center;
color: #0000ff;
}
#cuerpo{
background-color: #ffffff;
padding: 10 0 0 0px;
display: inline;
}
#menu{
width: 160;
height: 740;
float: left;
background-color: #ffffff;
}
#menu ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#menu li{
margin: 2 2 2 2px;
padding: 2 2 2 2px;
}
#cajamenu{
width: 160px;
}
#cajamenucabecera{
background-color: #47BF4C ;
font-size: 11pt;
padding: 2 2 2 2px;
color: ffffff;
font-weight: bold;
}
#cajamenucuerpo{
font-size: 10pt;
padding: 4 4 4 4px;
background-color: #ffffff;
line-height: 18px;
font-family: arial;
}
#columna_derecha{
width: 305px;
height: 740;
float: right;
background-color: #ffffff;
}
#cajaderecha {
width: 305px;
}
#cajaderechacabecera{
background-color: #47BF4C ;
font-size: 11pt;
padding: 2 2 2 2px;
color: ffffff;
font-weight: bold;
}
#cajaderechacuerpo{
font-size: 10pt;
padding: 4 4 4 4px;
background-color: #ffffff;
line-height: 18px;
font-family: arial;
}
#columna_izquierda{
margin-left: 170px;
width: 305px;
height: 740;
background-color: #ffffff;
}
#cajaizquierda {
width:305px;
}
#cajaizquierdacabecera{
background-color: #47BF4C ;
font-size: 11pt;
padding: 2 2 2 2px;
color: ffffff;
font-weight: bold;
}
#cajaizquierdacuerpo{
font-size: 10pt;
padding: 4 4 4 4px;
background-color: #ffffff;
line-height: 18px;
font-family: arial;
}
#pie {
background: #ffffff;
margin: 20 0 20 0px;
clear: both;
}
#cajapie{
width:800px;
}
#cajapiecabecera{
background-color: #47BF4C ;
font-size: 11pt;
padding: 2 2 2 2px;
color: ffffff;
font-weight: bold;
}
#cajapiecuerpo{
font-size: 10pt;
padding: 4 4 4 4px;
background-color: #ffffff;
line-height: 18px;
font-family: arial;
}
</style>
<div id="contenedor">
<div id="cabecera">
TITULO DEL BOLETÍN
</div>
<div id="cuerpo">
<div id="menu">
<div id="cajamenu">
<div id="cajamenucabecera">
TITULO DE CAJA
</div>
<div id="cajamenucuerpo">
CONTENIDO
</div>
</div>
<div id="cajamenu">
<div id="cajamenucabecera">
BBB
</div>
<div id="cajamenucuerpo">
BBBB
</div>
</div>
</div>
<div id="columna_derecha">
<div id="cajaderecha">
<div id="cajaderechacabecera">
DDD
</div>
<div id="cajaderechacuerpo">
DDDD
</div>
</div>
<div id="cajaderecha">
<div id="cajaderechacabecera">
EEE
</div>
<div id="cajaderechacuerpo">
EEE
</div>
</div>
</div>
<div id="columna_izquierda">
<div id="cajaizquierda">
<div id="cajaizquierdacabecera">
FFF
</div>
<div id="cajaizquierdacuerpo">
FFF
</div>
</div>
<div id="cajaizquierda">
<div id="cajaizquierdacabecera">
GGG
</div>
<div id="cajaizquierdacuerpo">
GGG
</div>
</div>
</div>
</div>
<div id="pie">
<div id="cajapie">
<div id="cajapiecabecera">
HHH
</div>
<div id="cajapiecuerpo">
HHH
</div>
</div>
<div id="cajapie">
<div id="cajapiecabecera">
III
</div>
<div id="cajapiecuerpo">
III
</div>
</div>
<div id="cajapie">
<div id="cajapiecabecera">
JJJ
</div>
<div id="cajapiecuerpo">
JJJJ
</div>
</div>
</div>
</div>
</body>
</html>
De hecho en hotmail lo que falla es el float, las cajas sí se ven con el estilo que tienen.
En gmail se ve todo sin estilos, una cosa detrás de otra.
En fin, a ver si alguien me puede ayudar a montar esto y poder enviar el boletín.
Muchísimas gracias.
