Korrespondenzen, die als E-Mail versendet werden können aus verschiedenen Elementen zusammengestellt werden.
Im einfachsten Fall enthält eine Korrespondenz nur ein Textelement. Dieses wird dann mit dem folgenden HTML-Code zu eine Multipart-Nachricht verarbeitet.
In der E-Mail ist also
Beispiel Mailstruktur
<body> <div class="sdw_head"></div> <div class="sdw_plain"> Beispieltext für die ganze Breite <div class="sdw_right">Beispieltext rechtsbündig</div> <h1>Uberschriften Ebene 1</h1> <h2>Uberschriften Ebene 1</h2> <h3>Uberschriften Ebene 1</h3> </div> <div class="sdw_row"> <div class="sdw_cell sdw_colstyle_w20"><em>Label-Spalte</em></div> <div class="sdw_cell sdw_colstyle_w80">Inhaltsspalte</div> </div> <div class="sdw_row"> <!-- weitere Zeilen möglich --> </div> <div class="sdw_foot">Verweis auf die Anwendung</div> </body>
Beispiel-CSS
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 1em;
background-image:
url("data:image/svg+xml;utf8,<svg>[Bildinformationen]</svg>");
background-attachment: fixed;
background-position: bottom right;
background-repeat: no-repeat;
background-size: 30%;
margin-left: 2em;
margin-right: 4em;
max-width: 900px;}
.sdw_row { display: flex;}
.sdw_cell {
border-color: grey;
border-style: solid;
padding: 3px}
.sdw_colstyle_w10 { flex-basis: 10%}
.sdw_colstyle_w20 { flex-basis: 20%}
.sdw_colstyle_w30 { flex-basis: 30%}
.sdw_colstyle_w40 { flex-basis: 40%}
.sdw_colstyle_w50 { flex-basis: 50%}
.sdw_colstyle_w60 { flex-basis: 60%}
.sdw_colstyle_w70 { flex-basis: 70%}
.sdw_colstyle_w80 { flex-basis: 80%}
.sdw_colstyle_w90 { flex-basis: 90%}
.sdw_right { text-align: right;}
.sdw_foot {
text-align: center;
font-size: 0.8em;
margin-top: 2em;
padding-top: 1em;
padding-bottom: 1em;
background-color: #cccccc;}
.sdw_foot a {
text-decoration: none;
color: #d36f16}
Schritt-für-Schritt-Anleitung
Verwandte Artikel