Foros del Web » Creando para Internet » CSS »

sintaxis css en boletín

Estas en el tema de sintaxis css en boletín en el foro de CSS en Foros del Web. Buenas tardes, 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 ...
  #1 (permalink)  
Antiguo 28/02/2010, 08:00
 
Fecha de Ingreso: septiembre-2007
Mensajes: 10
Antigüedad: 10 años, 2 meses
Puntos: 1
Pregunta sintaxis css en boletín

Buenas tardes,

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:
<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>
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.

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.
  #2 (permalink)  
Antiguo 28/02/2010, 10:27
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: sintaxis css en boletín

Hola:

Pues, tomando como ejemplo un div de tu código, tendrías que ponerlo así:

Código HTML:
Ver original
  1. <div id="cajaderechacuerpo" style="font-size: 10pt;padding: 4 4 4 4px;background-color: #ffffff; line-height: 18px;font-family: arial;">
  2. EEE
  3. </div>

Saludos.

  #3 (permalink)  
Antiguo 28/02/2010, 11:20
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: sintaxis css en boletín

solo una cosa... bueno varias
Código:
background-color: #CEF6CE;
 width: 800px;
 height: 110px;
 padding: 3 3 3 10px;
 }

#cuerpo{
 background-color: #ffffff;
padding: 10 0 0 0px;
display: inline;

 }
etc, etc, etc.... por que le pones unidad al ultimo valor? .....

Etiquetas: sintaxis
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:06.