Pié de página queda separado

Citar

Escrito el 17 Jul 2011 06:41 pm

Estoy construyendo mi firma digital colocando 3 div horizontales con float e una imágena abajo de estas en otra div. El problema es qu esta última imágen aparece separada das superiores. Alguien sabe porque?

La dirección es esta

http://pluspixel.com.br/assinatura-de-e-mail-css.html

Código HTML :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Assinatura de e-mail</title>
</head>

<body>
<!--Tudo -->
<div style="margin:0; padding:0; width:343px; height:100px;" >
<!--left -->
<div style="float:left">
  <img src="images/esquerda.gif" width="156" height="70" alt="Pluspixel">
 </div>
<!--fim left -->
<!--Center -->
<div style="width:155px; height:70px; background:#000; float:left; color:#FFF; font-family:Tahoma, Geneva, sans-serif; font-size:12px;">
<p>
Claudio A. Hassan<br />
<strong><a href="http://www.pluspixel.com.br" target="_blank" style="color: #6fa8dc; text-decoration: none">www.pluspixel.com.br</a></strong><br />
    (85) 3082.8181
</p>
</div>
<!--fim center -->
<!--right -->
<div style="width:28px; height:70px; float:left;">
<img src="images/direita.gif" width="28" height="70">
</div>
<!--fim right -->
<div style="clear: both;"></div>
<!--Down -->
<div style="width:339px; height:30px;">
  <img src="images/rodape.gif" width="339" height="30"></div>
<!--Fim down -->
</div>
<!--Fim tudo -->
</body>

Desde ya muchas gracias. Claudio

Por Ishkandar

Claber

303 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 17 Jul 2011 07:36 pm

Este div:

Código HTML :

<div style="float:left">

Debe tener height: 70px;
Es el responsable por los cuatro píxeles de más.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 17 Jul 2011 08:19 pm

Amigo corregí el valor de la altura de la div, en los navegadores funciona bien pero cuando la coloco en la firma digital en el gmail la diferencia continua. No te imaginás el tiempo que ya invertí en esto, comencé trabajando con el arredondamento de los cantos con css puro, no es reconocido por los clientes de e-mail, después intenté colocar los cantos como imágen, tampoco funcionó porque los backgrounds no son leídos. Después corté con slices y construí una tabla pero cuando coloqué el texto con los datos la tabla se descompaginó toda y apareció la misma diferencia que mostré aqui después se me ocurrió trabajar con posicionamento absoluto y relativo de tal forma que el texto quede sobrepuesto a la imágen; los z-index no son reconocidos...en fin. Voa ver si consigo hacer de nuevo la tabla y en la exportación dejar el texto como texto..me parece que con Fireworks se puede hacer eso.

De todas formas muchas gracias. Claudio

Por Ishkandar

Claber

303 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 18 Jul 2011 10:23 pm

Amigo, hubieses comenzado por ahí. Tengo malas noticias. El HTML en los correos electrónicos no admiten prácticamente nada de HTML 4.0 y no admiten CSS. Estás muy limitado y me temo que te quebrarás la cabeza inútilmente.

Mejor haz tu firma con una imagen y ya está.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 19 Jul 2011 10:10 am

Yo ya hice algunas usando tablas (HTML) incluso con gifs animados, colocando css inline y funcionaron, pero esta mia está difícil. Claro que ya se me cruzó por la cabeza dejar todo como imágen lo que pasa es que como la fuente es pequeña aparecem mucho sus imperfecciones. Ya intenté hasta con png24 y no consigo mejorar el resultado.
Bien, muchas gracias por todo, si consigo algo coloco aqui.

Por Ishkandar

Claber

303 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Pié de página queda separado

Escribe una respuesta rapida