Schriftzug einrücken/ Positionierung

alisabeth · Freitag um 17:18

Hallo zusammen,

ich bin ein blutiger Neuling im Thema HTML bzw. hatte ich vorher noch nie Kontakt damit. Ich versuche unsere Mailvorlagen für unser neues Gästehaus einzurichten. Leider scheitere ich dabei, den Schriftzug "Ihr Zugangscode" in Zeile 34 weiter an das Schlüsselbild Zeile 30 zu rücken.
Kann mir jemand helfen? Die Buchungssoftware ist leider nicht wirklich hilfsbereit...

Vielen Dank vorab für etwaige Hilfe!

Aktuelle Programmierung lautet:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="100%" style="width:100%; max-width:650px;" cellspacing="0">
<tr>
<td width="650" style="max-width:650px;">
<table width="100%" style="width: 100%;" cellspacing="5">
<tr>
<td>
<table width="100%" style="width: 100%;" cellspacing="5">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="height: 20px; font-size: 1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" style="width: 100%;" cellspacing="5">
<tr>
<td colspan="3" style="width:50%; border:1px solid #ccc; padding:10px; vertical-align: top;" valign="top">
<table width="100%" style="width: 100%;" cellspacing="0">
<tr>
<td width="96" style="width: 96px; text-align: left;"><img src="https://www.easy-booking.at/wo/Services/images/smartlock.png" width="64" height="64" /><br><br></td>
<td width="10" style="width: 10px; font-size: 1px;"> </td>
<td width="*" style="font-family: Arial, sans-serif; font-size: 14px;">

<h1 style="font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color:#58585a; margin:1;">Ihr Zugangscode</h1>
</td>

<tr>
<td colspan="3" style="padding:10px; border:1px solid #ccc; font-family: Arial, sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<b>Ihr persönlicher PIN für den Haupteingang & Ihr Apartment</b><br><br>
<h1 style="font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color:#58585a; margin:0;">{accessCodes}</h1>
</td>
</tr></tr>
<td colspan="3">

</td>
</tr>
<tr>
<td colspan="3" style="width:50%; border:1px solid #ccc; padding:10px; vertical-align: top;" valign="top">
<table width="100%" style="width: 100%;" cellspacing="0">
<tr>

<td width="10" style="width: 10px; font-size: 1px;"> </td>
<td width="*" style="font-family: Arial, sans-serif; font-size: 14px;">

{greetingText},<br><br>hiermit erhalten Sie den Zugangscode zum Haupteingang und Ihrem Apartment.<br><br>

Dieser gilt für die gesamte Aufenthaltsdauer von Ihrem Anreisetag ab 15.00 Uhr bis zu Ihrem Abreisetag bis 11.00 Uhr.<br><br>

Kostenfreie Parkplätze befinden sich direkt vor dem Haus oder unterhalb vor unserem Restaurant „Römerkeller“ in der Moselweinstraße 58. <br><br>

Wir freuen uns sehr, Sie ab morgen als Gast willkommen zu heißen.
</td>
</table>
</td>
</tr>

<tr>

</td>
</tr>

<tr>
<td height="20" style="height: 20px; font-size: 1px;"> </td>
</tr>
<tr>
<td height="20" style="height: 20px; font-size: 1px;"> </td>
</tr>
<tr>
<td>
<table width="100%" style="width: 100%;" cellspacing="5">
<tr>
<td style="width:100%; background-color:#58585A; padding:10px; vertical-align: top;" valign="top">
<table width="100%" style="width: 100%;" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color:#ffffff;">{hotelName}</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;">{hotelAddress}</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;">{hotelPostCodeCity}</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;">Tel.: {hotelPhoneNo}</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;">E-Mail: <a style="color:#ffffff;" href="mailto:{hotelEMailAddress}" title="E-Mail">{hotelEMailAddress}</a></td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;"><a style="color:#ffffff;" href="{hotelWebSite}" title="Webseite" target="_blank">{hotelWebSite}</a></td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>

</html>

Sempervivum · Freitag um 18:18

Hallo @elisabeth,
da sind einige Strukturfehler in deinem Layout, vor allem schließende Tags fehlen. Beseitige ich die und verkleinere die Breite der Zelle, liegt der Text direkt neben dem Schlüsselsymbol. Beachte meinen Kommentar mit den drei Ausrufezeichen:

Code:

<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <table width="100%" style="width:100%; max-width:650px;" cellspacing="0">
        <tr>
            <td width="650" style="max-width:650px;">
                <table width="100%" style="width: 100%;" cellspacing="5">
                    <tr>
                        <td>
                            <table width="100%" style="width: 100%;" cellspacing="5">
                                <tr>
                                    <td>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td height="20" style="height: 20px; font-size: 1px;">&nbsp;</td>
                    </tr>
                    <tr>
                        <td>
                            <table width="100%" style="width: 100%;" cellspacing="5">
                                <tr>
                                    <td colspan="3"
                                        style="width:50%; border:1px solid #ccc; padding:10px; vertical-align: top;"
                                        valign="top">
                                        <table width="100%" style="width: 100%;" cellspacing="0">
                                            <tr>
                                                <!-- !!! Hier habe ich die Breite der Zelle auf "60" geändert
                                                um den Text noch weiter nach links zu rücken: -->
                                                <td width="60" style="width: 60px; text-align: left;"><img
                                                        src="https://www.easy-booking.at/wo/Services/images/smartlock.png"
                                                        width="64" height="64" /><br><br></td>
                                                <td width="10" style="width: 10px; font-size: 1px;">&nbsp;</td>
                                                <td width="*" style="font-family: Arial, sans-serif; font-size: 14px;">
                                                    <!--EDITABLE_TEXT_START-->
                                                    <h1
                                                        style="font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color:#58585a; margin:1;">
                                                        Ihr Zugangscode</h1>
                                                    <!--EDITABLE_TEXT_END-->
                                                </td>


                                            <tr>
                                                <td colspan="3"
                                                    style="padding:10px; border:1px solid #ccc; font-family: Arial, sans-serif; font-size: 14px; vertical-align: top;"
                                                    valign="top">
                                                    <b>Ihr persönlicher PIN für den Haupteingang & Ihr
                                                        Apartment</b><br><br>
                                                    <h1
                                                        style="font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; color:#58585a; margin:0;">
                                                        {accessCodes}</h1>
                                                </td>
                                            </tr>
                                </tr>
                                <td colspan="3">

                                </td>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" style="width:50%; border:1px solid #ccc; padding:10px; vertical-align: top;"
                            valign="top">
                            <table width="100%" style="width: 100%;" cellspacing="0">
                                <tr>

                                    <td width="10" style="width: 10px; font-size: 1px;">&nbsp;</td>
                                    <td width="*" style="font-family: Arial, sans-serif; font-size: 14px;">
                                        <!--EDITABLE_TEXT_START-->
                                        {greetingText},<br><br>hiermit erhalten Sie den Zugangscode zum Haupteingang und
                                        Ihrem Apartment.<br><br>

                                        Dieser gilt für die gesamte Aufenthaltsdauer von Ihrem Anreisetag ab 15.00 Uhr
                                        bis zu Ihrem Abreisetag bis 11.00 Uhr.<br><br>

                                        Kostenfreie Parkplätze befinden sich direkt vor dem Haus oder unterhalb vor
                                        unserem Restaurant „Römerkeller“ in der Moselweinstraße 58. <br><br>

                                        Wir freuen uns sehr, Sie ab morgen als Gast willkommen zu heißen.
                                        <!--EDITABLE_TEXT_END-->
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>

        </tr>


        <tr>
            <td height="20" style="height: 20px; font-size: 1px;">&nbsp;</td>
        </tr>
        <tr>
            <td height="20" style="height: 20px; font-size: 1px;">&nbsp;</td>
        </tr>
        <tr>
            <td>
                <table width="100%" style="width: 100%;" cellspacing="5">
                    <tr>
                        <td style="width:100%; background-color:#58585A; padding:10px; vertical-align: top;"
                            valign="top">
                            <table width="100%" style="width: 100%;" cellspacing="0">
                                <tr>
                                    <td
                                        style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color:#ffffff;">
                                        {hotelName}</td>
                                </tr>
                                <tr>
                                    <td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;">
                                        {hotelAddress}</td>
                                </tr>
                                <tr>
                                    <td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;">
                                        {hotelPostCodeCity}</td>
                                </tr>
                                <tr>
                                    <td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;">Tel.:
                                        {hotelPhoneNo}</td>
                                </tr>
                                <tr>
                                    <td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;">E-Mail:
                                        <a style="color:#ffffff;" href="mailto:{hotelEMailAddress}"
                                            title="E-Mail">{hotelEMailAddress}</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="font-family: Arial, sans-serif; font-size: 12px; color:#ffffff;"><a
                                            style="color:#ffffff;" href="{hotelWebSite}" title="Webseite"
                                            target="_blank">{hotelWebSite}</a></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </td>
    <td></td>
    </tr>
    </table>
</body>

</html>

Oliver77 · Freitag um 18:21

Da du keine Tabelle eigentlich brauchst, hier eine Vorlage nur mit <div>

https://codepen.io/Oliver7777/pen/OJeGrmq

Sempervivum · Freitag um 18:25

Genaues weiß ich nicht aber mir ist zu Ohren gekommen, dass in der Welt von HTML-Mail Tabellen immer noch ihre Daseinsberechtigung haben und Dinge wie Flexlayout Fremdworte sind. Mal sehen ob es bei @elisabeth funktioniert.

Oliver77 · Freitag um 18:31

Achso flex geht nicht?

Sempervivum · Freitag um 18:34

Wie geschrieben, genaues weiß ich nicht. Deshalb habe ich mich zurück gehalten und das HTML von Elisabeth so gelassen. Aber auch wenn man bei Tabellen bleibt, müsste es wahrscheinlich nicht so sehr kompliziert und verschachtelt sein.

msi · Freitag um 18:41

Outlook ist sehr allergisch auf alles, was nicht in Tabellen gepackt wurde. Flex oder Grid sind daher bei Mails nicht zu gebrauchen. Wie das bei anderen Mail-Clients aussieht, kann ich nicht sagen, ich meine aber, dass auch Thunderbird besser mit Tabellen klar kommt.

Oliver77 · Freitag um 18:58

Hmm mal mit Gmail verschickt und 1und1 webmailer geöffnet:

Flex gap:20px kennt er nicht!

msi · Freitag um 20:22

@Oliver77
Webmailer sind ein anderes Thema, da werden die Mails ja im Browser angezeigt, das ist dann kein Problem. In Outlook würde das ganz anders aussehen.

Oliver77 · Freitag um 20:25

Ah ok null Plan von Outlook :) Benutze es nicht...

alisabeth · Montag um 09:33

Vielen Dank euch! Funktioniert alles super

Schriftzug einrücken/ Positionierung

alisabeth

Neues Mitglied

Sempervivum

Senior HTML'ler

Oliver77

Aktives Mitglied

Sempervivum

Senior HTML'ler

Oliver77

Aktives Mitglied

Sempervivum

Senior HTML'ler

msi

Aktives Mitglied

Oliver77

Aktives Mitglied

msi

Aktives Mitglied

Oliver77

Aktives Mitglied

alisabeth

Neues Mitglied

Neueste Beiträge