E-Mail Briefpapier für Outlook

RudolfA · Sonntag um 14:43

Hallo

ich habe ein html E-Mail Briefpapier für unser ehemalige Bundeswehrkameradschft erstellt. Und versucht, das es in gmail und outlook in nahezu gleichen Aussehen von meinen Kameraden empfangen wird am PC sowie am Handy.

Und habe da ein Problemchen:

Beim überprüfen auf dem Handy ist der Textabstand in der Table table{} doppelter Zeilenabstand. Wie kann ich das anpassen das es kein doppelter Zeilanabstand ist?

Das Wappen, ist soweit OK bei der Kontrolle im E-Mail Client sowie auch auf dem Handy oder sollt ich es etwas kleiner machen. Kann man es auch mit css oder html mitteln anpassen?

Da mein bescheidenes Wissen nicht ausreicht um es besser machen zu können möchte ich Euch bitten ob Ihr nicht mal ein Auge auf mein html Briefpapier werfen würdet.

Wäre Euch sehr dankbar wenn Ihr mit Eueren Fachwissen mal diese html begutachten würdet und evtl Tipps und Ratschläge geben könnt.

Gruß Rudolf

msi · Sonntag um 15:51

Poste besser den Code, denn fremde Dateien werden nicht gerne per Download geöffnet. Nutze aber dazu die Formatierungsmöglichkeiten des Forums:

RudolfA · Sonntag um 16:20

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
<title>Kameraden 3.221</title>
<style>
body {
    text-align: center;
    margin: 10px;
}
table {
    width: 80%;
    font-family: Verdana, Arial;
    font-size: 12px;
    /*border: 0px solid green;*/
    margin: 30px auto;
}
table table {
    width: 30%;
    font-family: Verdana, Arial;
    font-size: 12px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: 10px;
    margin-bottom: 10px;
}
td {
    vertical-align: top;
    text-align: left;
    padding-top: 1px;
    padding-right: 1px;
    padding-left: 1px;
    padding-bottom: 1px;
}
.logo {
    width: 100px;
}
.logo img {
    width: 70%;
}
.content {
    width: 80%;
    font-family: Verdana, Arial;
    font-size: 12px;
}
</style>
</head>

<body>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center">
  <tr>
    <td width="150" class="logo"><img src="https://3-221.de/kl1-Wappen.png" alt="Logo"></td>
    <td width="1082"><table border="0" align="left">
        <tr>
          <td>Vorname Name</td>
        </tr>
        <tr>
          <td>Str.</td>
        </tr>
        <tr>
          <td>plz ort</td>
        </tr>
        <tr>
          <td>tel</td>
        </tr>
        <tr>
          <td>Handy</td>
        </tr>
        <tr>
          <td><a href="[email protected]">[email protected]</a></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td colspan="2"><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="2" class="content"><p>Servus Kameraden,</p>
      <p>Mein text</p>
      <p>Gruß mail</p></td>
  </tr>
</table>
</body>
</html>

RudolfA · Gestern um 20:30

Wäre nicht schlecht wenn Du mir mitteilen würdest ob es so passt?

Gruß Rudolf

Sempervivum · Gestern um 20:59

Hallo Rudolf und willkommen im Forum!
Ich habe den Code mal in eine Testdatei übernommen und mit der Smartphone-Ansicht des Seiteninspektors getestet. Leider kann ich dabei keinen Unterschied zwischen letzterer und der normalen Ansicht erkennen.
Wo beobachtest Du den überhaupt den doppelten Zeilenabstand? Oben im Header mit den persönlichen Daten oder unten? Unten hast Du p-Elemente verwendet, die haben von Natur aus einen größeren Abstand der Texte durch das Default-Margin.
Beste Grüße, Ulrich

RudolfA · Gestern um 23:24

Hallo Ulrich,

danke zuerst für Deine Hilfe bzw. für Dein Bemühen mir Helfen zu wollen.

Ich habe Screenshots erstellt in der die Zeilenabstände nur auf dem Handy rechts neben dem Wappen größer sind.
Auf dem Desktop in den Mail-Clients werden diese Zeilenabstände korrekt angezeigt, wie Du in den beigefügten Screenshots erkennen kannst.

Kann das evtl. an der größe des Wappens liegen. Sollte ich diese evtl. noch kleiner machen?
Oder ist es machbar, das diese Zeilen, ( table table{} ) wie bei einem responsiven html unter das Wappen rutscht?

Ursprünglich wollte ich ja einen kompletten Hintergrund machen, aber das hab ich rasch wieder aufgegeben weil ich es nicht sauber realisieren konnte. Und da ich weniger als 0 Hilfe bekam, ist es ein letzter Strohhalm hier bei Euch mein Glück zu versuchen.

Da ich dieses Briefpapier in Outlook einbinde gab es immer wieder Probleme mit einer Grafik im Hintergrund.

Ich möchte aber nun erst mal ein kleineres Brötchen backen und wenn das klappen sollte kann ich ja weiter schauen.

Würdest Du meinen Code im wesentlich sehr verändern wollen?

Gruß Rudolf

E-Mail Briefpapier für Outlook

RudolfA

Neues Mitglied

Anhänge

msi

Aktives Mitglied

RudolfA

Neues Mitglied

Anhänge

RudolfA

Neues Mitglied

Sempervivum

Senior HTML'ler

RudolfA

Neues Mitglied

Anhänge

Neueste Beiträge