Handtekening met HTML, afbeeldingen niet zichtbaar

Status
Niet open voor verdere reacties.

Suchard

Gebruiker
Lid geworden
24 feb 2011
Berichten
140
Hieronder de code van mijn html pagina,

ik heb de afbeeldingen op mijn webserver gezet, maar ze zijn niet zichtbaar. Ook al niet wanneer ik zelf de email aanmaak, dus het gaat al fout voor het verzenden.

Wat gaat hier mis??

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
	width: 300px;
	background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout */
	float: left;
}

/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #999;
}
body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.4;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 0px;
	padding-left: 0px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
.buttons {
	float: left;
	margin-right: 13px;
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 0px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 0px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
-->
</style></head>

<body>

<div class="container">
  <div class="content">
    <p>Met vriendelijke groeten,</p>
    <p>Susanne van der Steen<br />
      D<br />
      <br />
      06 - </p>
    <p><a href="http://www.decorator.nl/"><img src="../Documents/WEBSITES/DECORATOR/public_html/images/signature/LOGO_DECORATOR.png" width="122" height="128" alt="logo" /></a></p>
    <p><a href="http://www.facebook.com/susanne.vandersteen.9"><img src="../Documents/WEBSITES/DECORATOR/public_html/images/signature/facebook_32.png" alt="facebook" width="32" height="32" class="buttons" /></a>
    <a href="http://nl.linkedin.com/pub/susanne-van-der-steen/35/4b0/175"><img src="../Documents/WEBSITES/DECORATOR/public_html/images/signature/linkedin_32.png" alt="linkedin" width="32" height="32" class="buttons" /></a>
    <a href="https://twitter.com/#!/I_am_decorator"><img src="../Documents/WEBSITES/DECORATOR/public_html/images/signature/twitter_32.png" alt="twitter" width="32" height="32" class="buttons" /></a></a></p>
    <h1>&nbsp;</h1>
    <!-- end .content --></div>
  <!-- end .container --></div>
</body>
</html>
 
Als dit inderdaad voor een e-mail is moet je volgens mij wel het volledige adres van de afbeeldingen geven, (dus inclusief http://etc.). Anders weet het mailprogramma niet waar het de afbeeldingen vandaan moet halen.
 
Ik heb het net gewijzigd, maar dan verdwijnt de afbeelding al in Dreamweaver, want het is niet de originele link van de afbeelding.
 
Dat volg ik even niet, wat bedoel je precies met de originele link?
 
Als ik een afbeelding toevoeg in mijn html pagina, dan ga ik naar de map waar die instaat.

Wanneer ik daar http etc.. voorzette, kreeg de afbeelding een gebroken link.

Kan het ook aan imail liggen, want dat gebruik ik. Ik zie hem in de voorkeuren/handtekeningen helemaal keurig staan, met afbeeldingen en al, maar zodra ik een mail maak staat er de tekst maar de afbeeldingen zijn vervangen door vraagtekens.
 
Zijn die afbeeldingen wel van buitenaf te bereiken? Anders gaat het niet werken op deze manier.
 
aha, dus public-html moest er tussenuit, tja, daarvoor zit ik op dit forum, thanks!!!
 
Maak je handtekening het liefst met notepad voor het html en css deel. Teveel 'moderne' commando's worden namelijk niet goed weergegeven door de diverse mailclients.


Voor de links naar de plaatjes. Deze werken ook altijd als je een relatief pad gebruikt voor de verwijzing. Het plaatje dan in dezelfde map plaatsen als het .html bestand. Hou er namelijk rekening mee dat veel zakelijke gebruikers achter een filter zitten en niet alle websites kunnen bezoeken.
 
Laatst bewerkt:
@Rogers,

Weet je misschien hoe ik deze handtekening ook leesbaar kan maken voor Iphone/telefoongebruikers?
Ik heb deze html gekopieerd uit een mailing en vermaakt.

Code:
<HTML>
<HEAD>
<title>Signature Decorator</title>
<style type="text/css">

</style>
</HEAD>
<BODY>
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Susanne van der Steen</title>
<style type="text/css"> 
.ReadMsgBody { width: 100%;} 
.ExternalClass {width: 100%;}  
#iPhone { -webkit-text-size-adjust:none; }
 
</style>

<body>
<table width="100%" cellpadding="0" >
  <tr>
    <td style="border-top: 1.5px dotted #999; bottom-top: 1.5px dotted #999;"><table width="100%" cellpadding="0">
      <tr>
        <td><table width="100%" border="0" cellpadding="5" font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; >
          <tr>
            <td width="90" style="vertical-align:top;"><a href="http://www.decorator.nl" TARGET="_blank"><img src="http://www.decorator.nl/images/signature/LOGO_DECORATOR.png" alt="Decorator" width="67" height="70" border="0"/></a></td>
            <td style="color: #999; font-size:11px; line-height: 5px;font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;"><p><strong>Met vriendelijke groeten / With kind regards,</strong></p>
     <p><strong>Susanne van der Steen</strong></p>
     <p>&nbsp;</p>
     <p>Decoratief schilderwerk | Objecten &amp; Ornamenten | Schaalmodellen</p>
     <p>Dorshout 32 | 5462 GM VEGHEL | 06 - 20 444 721 | <a href="mailto:info@decorator.nl" style="color: #999; font-size:11px; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; text-decoration: none; border-bottom: 1px #999 dotted;">info@decorator.com</a></p></td>
            <td style="vertical-align:top;" width="150" ><table width="100%" border="0" cellpadding="0">
              <tr>
                <td><table width="100%" border="0" cellpadding="0">
  <tr>
    <td style="font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size:11px; color:#999;" align="right">Volg me op:</td>
  </tr>
</table>
</td>
              </tr>
              <tr>
                <td><table width="100%" border="0" cellpadding="0">
                  <tr>
                    <td width="30" height="30">&nbsp;</td>
                    <td width="30" height="30"><a href="http://www.facebook.com/susanne.vandersteen.9" TARGET="_blank">
                    <img src="http://www.decorator.nl/images/signature/facebook_32.png" alt="Facebook" width="22" align="right" height="21" border="0" style="display:block; color:#4F5CBA; font-size:13px;" /></a></td>
                    <td width="30" height="30"><a href="http://nl.linkedin.com/pub/susanne-van-der-steen/35/4b0/175" TARGET="_blank">
                    <img src="http://www.decorator.nl/images/signature/linkedin_32.png" alt="Linkedin" width="21" align="right" height="21" border="0" style="display:block; color:#87C0EC; font-size:13px;" /></a></td>
                    <td width="30" height="30"><a href="https://twitter.com/#!/I_am_decorator" TARGET="_blank">
                    <img src="http://www.decorator.nl/images/signature/twitter_32.png" alt="Twitter" width="21" align="right" height="21" border="0" style="display:block; color:#ff0000; font-size:13px;" /></a></td>
                    </tr>
                  </table></td>
              </tr>
              </table></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

<!--  ##################  Message Body  ################## 
    --><!--  ##################  Footer  ##################  -->
</BODY>
</BODY>
</HTML>
 
Laatst bewerkt:
Er staan o.a. een aantal fouten in je code (wss door knippen en plakken). Verander het eerste stuk van je code , tot aan de kleingeschreven <body> eens door het volgende


<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">
<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Susanne van der Steen</title>
<style type="text/css">
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
#iPhone { -webkit-text-size-adjust:none; }
</style>
</HEAD>

en aan het einde moet ook 1 keer </BODY> weg.
 
Hoi RogerS,

Dank je voor het herstellen van de fouten, ik heb het net gewijzigd, en ook online getest, de tekst staat nog steeds door elkaar bij Iphone tester.
Maar ik vraag me af of hier uberhaupt nog iets in aan te passen is.
Schermafbeelding 2012-06-25 om 11.54.48.jpg
 
Laatst bewerkt:
Het door elkaar lopen komt door line-height=5px . Dit terwijl je font 11px groot is. Verwijder de line-heigt eens.
 
Helaas, hij loopt nog steeds door elkaar, en ondanks vertical align top, lijnt de tekst boven ook niet mooi uit.
 
Kijk nog maar eens goed naar de opbouw van de tabellen. Los van het feit dat het in 1 tabel kan en de geneste tabellen absoluut overbodig zijn, ontbreken er afsluitende tags </tr> en </td>. En de volgorde van afsluiten is hier en daar ook niet juist. De afsluitende tags moeten precies in omgekeerde volgorde komen van de begintags. Je kunt voor dit soort werk best het gratis Notepad++ downloaden. Deze heeft onder andere herkenning voor dit soort fouten.

Dus iets als:
<TABLE>
<TR>
<TD>
Tekst
</TD>
</TR>
</TABLE>

en dus niet
<TABLE>
<TR>
<TD>
Andere tekst
</TR>
</TD>
</TABLE>
 
Hoi Suzanne,
Ik zie nog een paar foutjes de revue passeren:
  • border-top: 1.5px > dat is heel knap, zo'n halve pixel, als een pixel het kleinste beeldpunt van het scherm is. ;)
  • bottom-top: ... > waarschijnlijk bedoeld: border-bottom.
  • De 3 in de <head> opgegeven styles zie ik nergens terugkomen:
    .ReadMsgBody {width: 100%;}
    .ExternalClass {width: 100%;}
    #iPhone {-webkit-text-size-adjust:none;}.

Nooit weg: de html-validator en de css-validator!

O, het Doctype; er staat bovenaan:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd">
De complete vermelding hoort te zijn:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
(en als dit het Doctype is, mogen de tags <HEAD> enz. geen hoofdletters hebben: bij xhtml zijn alleen kleine letters toegestaan.)

Ik kwam nog een oud artikel van A List Apart tegen met een serie tips; misschien zijn een aantal nog bruikbaar. En een ander artikeltje,ook misschien bruikbaar (zelf werk ik niet met html-opgemaakte e-mails; geen ervaring mee). En zo zijn er geheid nog meer tips op te Google'en.

Alle beetjes helpen?

Met vriendelijke groet,
CSShunter
________
PS: Ik zie dat de site gevuld begint te raken, en er ook de trompe-l'oeil's bij staan waar ik nieuwsgierig naar was. Heel mooi werk! :)
PS2: Op de pagina bedrijfsprofiel werkt de menu-link naar de objectens_ornamenten.html niet.
 
Excuses voor de late reactie.

haha ja, die 1.5 pixel, altijd op zoek naar het onmogelijke.
En wederom bedankt voor de complimenten, altijd leuk om te horen.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan