CSS div para espacio en correo HTML

NaRanJiTo78 · #1 (**permalink**) 20/07/2009, 03:54

Hola!

Me gustaría saber como configurar las propiedades de un DIV, al estar creando una firma en HTML (3 div, imagen de logo - Central para escritura - e imágen de dirección)
para que cuando se escriba en ese div, vaya pasando a otra línea, y así sucesivamente (como cualquier mail de outlook)

Un saludo y muchas gracias!!

NaRanJiTo78 · #2 (**permalink**) 21/07/2009, 01:47

Nadie me puede ayudar??

kseso? · #3 (**permalink**) 21/07/2009, 02:19

Hola Naranjito
Hasta que llegue alguien con más conocimientos sobre el particular, te comento:
Creo recordar que varias veces se ha comentado que los "correos html" no admiten estilos vinculados a una hoja de estilos externa o incluidos en el head.
Así que si mi memoria no me falla (y ya son unos añitos

) tendrás que incluir los estilos en el body:
<div style=".......;">Contenido</div>

Así que centrándonos en tu caso concreto, tu estructura es el típico layout de tres columnas, las exteriores de anchura fija y la central supongo que en función de la pantalla. Hay muchos ejemplos. Si tienes dificultad en encontrar alguno comenta.

Y para que la central crezca de acuerdo al contenido, símplemente no le marques medidas.

Si necesitas más concreción en el tema css, comenta.

Un saludo

NaRanJiTo78 · #4 (**permalink**) 21/07/2009, 08:54

Cita:

Iniciado por kseso?

Hay muchos ejemplos. Si tienes dificultad en encontrar alguno comenta.

Me podrías facilitar alguno concreto respecto a éste tema?

Mira que he buscado y nada...

Muchas gracias por tu ayuda!

Saludos!!

kseso? · #5 (**permalink**) 21/07/2009, 09:52

Siempre bajo la premisa del #3, Naranjito:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<div style="width:80%; overflow:hiddent; margin: 0 auto;">
<div style="float:left; width:300px; background:#fff;">
<img alt="" tittle="" src="http://elezeta.net/blog/wp-content/uploads/2008/03/el-cliente-siempre-tiene-la-razon.jpg" width="300" height="300" />
<p>iquierda con el logo</p>
</div>
<div style="float:right; width:300px; background:#fff;">
<img alt="" tittle="" src="http://bligoo.com/media/users/0/11288/images/disenador%20cliente.JPG" width="300" height="300"  />
<p>derecha con Dirección</p>
</div>
<div style="color:#444; font-family:arial,sans-serif; font-size: 1em; padding: 1em; margin:0 300px">
<p style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size:1.3em; text-decoration: underline;">Título del correo</p>
<p>Lorem ipsum dolor sit amet consectetuer ipsum pede eleifend quam ut. Pede Aenean sem eu consectetuer condimentum id egestas gravida justo feugiat. Praesent dui laoreet semper et egestas tellus eu lacus congue urna. Sapien In sem vitae mauris consequat pede lacus felis nunc mi. Vitae Duis hac non urna et.</p>
<p>Cursus fames malesuada elit nec ante tincidunt Integer Vestibulum quam mattis. Nunc est quis interdum tortor metus pede a In augue consequat. Elit nunc hendrerit vel Cras Ut Cum adipiscing orci malesuada leo. Condimentum facilisis habitant vitae dictum ante est est Sed dis malesuada. Ipsum ac vitae et eu tempus justo nunc laoreet tempus In. Tempor leo nibh accumsan sed ac vel leo justo.</p>
</div>
</div>
</body>
</html>

Incluyo el head y demás para que lo veas.

Un saludo

NaRanJiTo78 · #6 (**permalink**) 29/07/2009, 04:01

"Kseso?"...Solo una duda...los correos generalmente tienen cabecera,, después abajo se escribe, y abajo la dirección de correo,telefono,etc...(vertical)

Me lo pusiste como si fuera cabecera-escribir en medio-firma...es decir, como si fuese "horizontal"...como puedo cambiar los Divs para que sean de arriba a abajo?

Lo he intentado, pero el del centro está como bloqueado...me podrías ayudar?

Muchas gracias!!

Un saludo y perdona las molestias...

kseso? · #7 (**permalink**) 29/07/2009, 04:46

quita los 'float' y modifica las anchuras (width), y cambia el orden de las dos últimas cajas. Pero Naranjito, esto de 1º de parvulito de css

NaRanJiTo78 · #8 (**permalink**) 29/07/2009, 06:28

Así estaRía bien??

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">

<head>

<title>Torina Firma </title>

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

<style type="text/css">

</style>
</head>

<body>

<div style="width:100%; overflow:hiddent; margin: 0;">

<div style="width:375px; background:#fff; height: 89px; vertical-align: 0px;">
<p><img src="http://img233.imageshack.us/img233/4558/logofirmat.jpg" width="375" height="89" border="0" align="top" /></p>

</div>

<div style="width:300px; background:#fff;"></div>

<div style="color:#444; font-family:arial,sans-serif; font-size: 1em; padding: 1em; margin:0"></div>

</div>

<div id="apDiv2"><img src="http://img9.imageshack.us/img9/6884/rayastyle.jpg" alt="" width="850" height="16" /></div>
</p>
<img src="http://img24.imageshack.us/img24/7969/bloquetextonomwebtelcop.jpg" alt="" />
</body>

</html>

kseso? · #9 (**permalink**) 29/07/2009, 10:53

Más bien era esto:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<div style="width:80%; overflow:hiddent; margin: 0 auto;">
<div style="background:#fff; width: 100%; text-align:center;">
<img alt="" tittle="" src="http://img233.imageshack.us/img233/4558/logofirmat.jpg" />
</div>
<div style="color:#444; font-family:arial,sans-serif; font-size: 1em; padding: 1em;">
<p style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size:1.3em; text-decoration: underline; font-weight:bold; color: #A4742A;">Título del correo</p>
<p>Lorem ipsum dolor sit amet consectetuer ipsum pede eleifend quam ut. Pede Aenean sem eu consectetuer condimentum id egestas gravida justo feugiat. Praesent dui laoreet semper et egestas tellus eu lacus congue urna. Sapien In sem vitae mauris consequat pede lacus felis nunc mi. Vitae Duis hac non urna et.</p>
<p>Cursus fames malesuada elit nec ante tincidunt Integer Vestibulum quam mattis. Nunc est quis interdum tortor metus pede a In augue consequat. Elit nunc hendrerit vel Cras Ut Cum adipiscing orci malesuada leo. Condimentum facilisis habitant vitae dictum ante est est Sed dis malesuada. Ipsum ac vitae et eu tempus justo nunc laoreet tempus In. Tempor leo nibh accumsan sed ac vel leo justo.</p>
</div>
<div style="background:#fff; width: 100%; text-align:center;">
<img alt="" tittle="" src="http://img24.imageshack.us/img24/7969/bloquetextonomwebtelcop.jpg" />
</div>
</div>
</body>
</html>