Foros del Web » Creando para Internet » CSS »

CSS div para espacio en correo HTML

Estas en el tema de CSS div para espacio en correo HTML en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 20/07/2009, 04:54
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años
Puntos: 10
Pregunta CSS div para espacio en correo HTML

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!!
  #2 (permalink)  
Antiguo 21/07/2009, 02:47
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años
Puntos: 10
Respuesta: CSS div para espacio en correo HTML

Nadie me puede ayudar??
  #3 (permalink)  
Antiguo 21/07/2009, 03:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CSS div para espacio en correo HTML

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 21/07/2009, 09:54
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años
Puntos: 10
De acuerdo Respuesta: CSS div para espacio en correo HTML

Cita:
Iniciado por kseso? Ver Mensaje
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!!
  #5 (permalink)  
Antiguo 21/07/2009, 10:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CSS div para espacio en correo HTML

Siempre bajo la premisa del #3, Naranjito:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. </head>
  6. <div style="width:80%; overflow:hiddent; margin: 0 auto;">
  7. <div style="float:left; width:300px; background:#fff;">
  8. <img alt="" tittle="" src="http://elezeta.net/blog/wp-content/uploads/2008/03/el-cliente-siempre-tiene-la-razon.jpg" width="300" height="300" />
  9. <p>iquierda con el logo</p>
  10. </div>
  11. <div style="float:right; width:300px; background:#fff;">
  12. <img alt="" tittle="" src="http://bligoo.com/media/users/0/11288/images/disenador%20cliente.JPG" width="300" height="300"  />
  13. <p>derecha con Dirección</p>
  14. </div>
  15. <div style="color:#444; font-family:arial,sans-serif; font-size: 1em; padding: 1em; margin:0 300px">
  16. <p style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size:1.3em; text-decoration: underline;">Título del correo</p>
  17. <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>
  18. <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>
  19. </div>
  20. </div>
  21. </body>
  22. </html>
Incluyo el head y demás para que lo veas.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 29/07/2009, 05:01
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años
Puntos: 10
Exclamación Respuesta: CSS div para espacio en correo HTML

"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...
  #7 (permalink)  
Antiguo 29/07/2009, 05:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CSS div para espacio en correo HTML

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 29/07/2009, 07:28
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años
Puntos: 10
Respuesta: CSS div para espacio en correo HTML

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">
<!--
#apDiv1 {
position:absolute;
width:594px;
height:115px;
z-index:1;
}
#apDiv2 {
position:absolute;
width:580px;
height:16px;
z-index:1;
top: 121px;
}
-->
</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>
  #9 (permalink)  
Antiguo 29/07/2009, 11:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: CSS div para espacio en correo HTML

Más bien era esto:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. </head>
  6. <div style="width:80%; overflow:hiddent; margin: 0 auto;">
  7. <div style="background:#fff; width: 100%; text-align:center;">
  8. <img alt="" tittle="" src="http://img233.imageshack.us/img233/4558/logofirmat.jpg" />
  9. </div>
  10. <div style="color:#444; font-family:arial,sans-serif; font-size: 1em; padding: 1em;">
  11. <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>
  12. <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>
  13. <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>
  14. </div>
  15. <div style="background:#fff; width: 100%; text-align:center;">
  16. <img alt="" tittle="" src="http://img24.imageshack.us/img24/7969/bloquetextonomwebtelcop.jpg" />
  17. </div>
  18. </div>
  19. </body>
  20. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 21:13.