• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schriftzug einrücken/ Positionierung

A

alisabeth

Neues Mitglied
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...

1726240649003.png

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;">&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>
<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;">&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>
</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>
</table>
</td>
</tr>


<tr>

</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>
</table>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>

</html>
 
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>
 
  • Angry
Reaktionen: msi
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.
 
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.
 
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
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben