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

Text in Email unabhängig von Bildschirm-/Fensterbreite fixieren

E

EliasH

Neues Mitglied
Hey Ich habe folgendes Problem:
Ich bin Schüler und kenne mich mit HTML leider sehr wenig aus.
Momentan bin ich dabei meine Bewerbung für ein Auslandspraktikum zusammenzubasteln.
Die Emails die ich versenden möchte sollen aus meiner gestalteten Bewerbung bestehen, die ich als .jpg Datei eingefügt habe. Allerdings muss ich den Ansprechpartner editieren können, so dass zumindest die erste Zeile nicht als Bilddatei abgespeichert sein kann.
Ich habe das in Thunderbird jetzt mal passend hingefriemelt:

Html2.JPG
Siehe Anhang 1

Das Hintergrundbild ist 1024 Pixel breit und zentiert, Der Text hat folgenden HTML code:

HTML: 
<div style="position:absolute;left:310px;top:40px" class="cls_003"><big><big><font
        color="#ffffff"><b><span class="cls_003">Dear Mr Mustermann,</span></b></font></big></big></div>
<big><big> <font color="#ffffff"><b> </b></font></big> </big>
<div style="position:absolute;left:310px;top:65px" class="cls_003"><big><big><font
        color="#ffffff"><b><span class="cls_003">In the following I wish
            to apply for an internship at your hotel.</span></b></font></big></big></div>
<big><big> <font color="#ffffff"><b> </b></font></big> </big>
<div style="position:absolute;left:310px;top:95px" class="cls_003"><big><big><font
        color="#ffffff"><b><span class="cls_003">Please scroll down or
            open the attachment.</span></b></font></big></big></div>
<big><big> <font color="#ffffff"><b> </b></font></big> </big>
<div style="position:absolute;left:310px;top:140px" class="cls_003"><big><big><font
        color="#ffffff"><b><span class="cls_003">Yours sincerly,</span></b></font></big></big></div>
<big><big> <font color="#ffffff"><b> </b></font></big> </big>
<div style="position:absolute;left:310px;top:165px" class="cls_003"><big><font
      color="#ffffff"><b><span class="cls_003"><big>Elias Heinel</big></span></b></font></big></div>

Jetzt ist es aber das Problem, dass der je nach Bildschirm- oder Fensterbreite nicht mehr genau in der Mitte des Hintergrundbilds liegt:

Html3.JPG
Siehe Anhang 2

Meine Frage ist jetzt wie bekomme ich es hin, dass der Text unabhängig von Bildschirm- oder Fensterbreite mittig angezeigt wird?

Wäre eine super wenn mir da jemand in einfacher Sprache helfen könnte oder falls es das Thema schon gibt einen Link posten könnte!

Vielen vielen Dank und einen schönen Sonntag Abend!
Elias
 
Du darfst nicht mit absoluten Positionierungen arbeiten. Baue ein div mit

margin: 0 auto;
width: 1024px;
background-image: url(wo_auch_immer/bg.jpg);

und darin packst du deinen Text ohne diese ganzen div's
 
Ich will dich jetzt nicht demotivieren, aber ich würde dir stark davon abraten, deine Bewerbung so zu verfassen.

Gründe:

HTML-Email sind eine sehr diffizielle Sache und haben mit der "regulären" Websiteentwicklung nur noch wenig gemein. Email-Clients stellen identischen Code z.T. sehr unterschiedlich dar und es gibt hunderte Stolperfallen zu beachten. Dazu gehört unter anderem, dass Outlook Hintergrundbilder nur darstellt, wenn sie auf dem <body>-Tag liegen. Damit kommst du mit deiner Email schon in Schwierigkeiten. Wenn dann die Hintergrundfarbe aus irgendeinem Grund ebenfalls nicht dargestellt wird, hast du eine weiße Schrift auf weißen Grund. Glaubst du, irgendein Verantwortlicher macht sich die Mühe, das dann zu entziffern?

Grundsätzlich muss es dir ja darauf ankommen, einen Eindruck zu hinterlassen. Kommt deine Email zerschossen oder gar nicht lesbar an, ist der Eindruck dahin und ein Praktikum kannst du vergessen! Und das deine Email zerschossen ankommt, kann ich dir mit dem Code garantieren. Auch mit dem Vorschlag von @bdt600, der zwar im Web funktionieren würde, bei Emails aber kein kugelsicheres Konzept ist.

Meine Empfehlung ist daher: Konzentriere dich auf deine PDF-Bewerbung, und verfasse das Email-Anschreiben so simpel wie möglich. Im PDF kannst du dich dann gestalterisch austoben.
 
bdt600 schrieb:
Du darfst nicht mit absoluten Positionierungen arbeiten. Baue ein div mit

margin: 0 auto;
width: 1024px;
background-image: url(wo_auch_immer/bg.jpg);

und darin packst du deinen Text ohne diese ganzen div's
Zum Vergrößern anklicken....

Vielen Dank für die schnelle Antwort!
Tut mir Leid, aber wie schon gesagt kenne ich mich leider sehr wenig mit HTML aus! Ich hätte vll. noch erwähnen sollen, dass der obige Code größtenteils aus einem PDF to HTML Converter kommt und ich lediglich die Abstände verändert habe.
Mit deinen Werten kann ich als Noob leider wenig anfangen.
Wie genau baut man denn so einen div :D

Der Text der da rein muss ist folgender:

Dear Mr Blabla,<br>

In the following I wish to apply for an internship at your hotel.<br>

Please scroll down or open the attachment.<br><br>

Yours sincerly,<br>

Elias Heinel

Und wie und wo muss ich dann den div außenrum bauen?

Hab da mit Hilfe von selfhtml.org sowas zusammengebastelt:
HTML: 
<html>
<head>


   
#Content {
    width:1024px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    }
</style>
</head>

<body>

<div id="Content">
    <p>Dear Mr Blabla,<br>
    In the following I wish to apply for an internship at your hotel.<br>
    Please scroll down or open the attachment.<br><br>
    Yours sincerly,<br>
    Elias Heinel</p>
   
</pre>
</div>

</body>
</html>

Das funktioniert allerdings nicht, ist aber auch kein Wunder, da ich wirklich sehr wenig bis keine Ahnung von HTML habe
könntest du oder jemand anderes hier mir das vll. verbessern?
 
Banana_Jones schrieb:
Ich will dich jetzt nicht demotivieren, aber ich würde dir stark davon abraten, deine Bewerbung so zu verfassen.

Gründe:

HTML-Email sind eine sehr diffizielle Sache und haben mit der "regulären" Websiteentwicklung nur noch wenig gemein. Email-Clients stellen identischen Code z.T. sehr unterschiedlich dar und es gibt hunderte Stolperfallen zu beachten. Dazu gehört unter anderem, dass Outlook Hintergrundbilder nur darstellt, wenn sie auf dem <body>-Tag liegen. Damit kommst du mit deiner Email schon in Schwierigkeiten. Wenn dann die Hintergrundfarbe aus irgendeinem Grund ebenfalls nicht dargestellt wird, hast du eine weiße Schrift auf weißen Grund. Glaubst du, irgendein Verantwortlicher macht sich die Mühe, das dann zu entziffern?

Grundsätzlich muss es dir ja darauf ankommen, einen Eindruck zu hinterlassen. Kommt deine Email zerschossen oder gar nicht lesbar an, ist der Eindruck dahin und ein Praktikum kannst du vergessen! Und das deine Email zerschossen ankommt, kann ich dir mit dem Code garantieren. Auch mit dem Vorschlag von @bdt600, der zwar im Web funktionieren würde, bei Emails aber kein kugelsicheres Konzept ist.

Meine Empfehlung ist daher: Konzentriere dich auf deine PDF-Bewerbung, und verfasse das Email-Anschreiben so simpel wie möglich. Im PDF kannst du dich dann gestalterisch austoben.
Zum Vergrößern anklicken....

Ja ich hab das ganze als PDF gestaltet und wollte auch eigentlich in die Email nur einen Text schreiben der darauf verweist den Anhang zu öffnen aber ich hatte Bedenken ob das dann überhaupt jemand macht, drum wollte ich das Design direkt in die Mail einbinden, aber du hast schon recht! Ich glaube ich muss von dem Gedanken leider wieder Abstand nehmen :(
Habe wenig Lust, dass man am Ende gar nichts lesen kann
 
Das ist das klassische Newsletter-Problem. Wie versendet man ein HTML-Dokument per Email und stellt gleichzeitig sicher, dass die Formatierungen in allen Mail-Clients ordentlich angezeigt werden.

Wenn die Bewerbung ein Dateianhang sein soll, würde ich es ohne HTML lösen. Erstelle eine layered PSD, in der die Namen der Ansprechpartner getauscht werden und exportiere das dann pro Bewerbung als einzelnes JPG oder PDF. Achte darauf, die Größe von 20x30 cm nicht zu überschreiten.. Personaler drucken sich so etwas gerne aus. ;)
 
Tronjer schrieb:
Das ist das klassische Newsletter-Problem. Wie versendet man ein HTML-Dokument per Email und stellt gleichzeitig sicher, dass die Formatierungen in allen Mail-Clients ordentlich angezeigt werden.

Wenn die Bewerbung ein Dateianhang sein soll, würde ich es ohne HTML lösen. Erstelle eine layered PSD, in der die Namen der Ansprechpartner getauscht werden und exportiere das dann pro Bewerbung als einzelnes JPG oder PDF. Achte darauf, die Größe von 20x30 cm nicht zu überschreiten.. Personaler drucken sich so etwas gerne aus. ;)
Zum Vergrößern anklicken....

Oh shit das nächste Problem :D
Die Datei ist 272x1507 mm weil ich keine Balken zwischen den einzelnen Seiten beim Bildlauf im Adobe Reader haben wollte
 
Kurz gesagt: lass es sein.
Ich lese Bewerbungen. Die meisten kommen sehr konservativ in Schriftform. Aufgeklebte Passbilder, am besten noch in schwarz-weiß, sind out. Die meisten haben ein Bild im Dokument eingebunden. Diese Bewerbungen werden ernst genommen.

Ein gangbarer und zunehmend häufiger Mittelweg ist, vorher anzurufen, ob man eine Bewerbung auch per Email einreichen darf - das nehme ich auch noch ernst. Da erwarte ich dann aber ein einziges PDF Dokument, dass genau wie eine schriftliche Bewerbung aufgebaut ist: Persönliches Anschreiben, Lebenslauf, Zeugnisse. Wer da eine Sammlung von JPG tiff docx und xls vorlegt, setzt sich dem Verdacht aus, unorganisiert zu sein.

Bewerbungen per Mail oder Fax, die ungefragt eintrudeln erwecken gleich den Eindruck von Massenware (wäre es bei Dir ja auch irgendwie). Wenn es sich dann noch um ein HTML Konstrukt handelt mit JPG Anteil, ist sofort klar dass es eine Serienbewerbung ist. Solche Bewerbungen bekomme ich oft inkl. eingescannter Unterschrift. Sowas habe ich noch nie wirklich in Betracht gezogen.

Was auch ginge, ist per Email nachfragen, ob man eine Email Bewerbung schicken kann und nach angemessener Zeit nachfragen, wie die Sache steht, ob man noch weitere Informationen liefern kann. So wird klar, das es der andere real ist.

Und zuletzt lösche ich die Dinger sofort, wenn da eine zip oder exe Datei dabei ist, das halte ich für Malware.

Das hat Dir wohl nicht substanziell für Deine Programmierkünste geholfen, aber vlt. Deine Erfolgsaussichten erhöht.
 
Ok vielen vielen Dank an euch alle!
Habe die Idee inzwischen verworfen und die PDF in den Anhang gepackt, die Email beinhaltet nun nur noch ein stinknormales Textanschreiben.
Mal sehen was zurück kommt.
Danke nochmal an alle super netter und schneller sowie ehrlicher Support hier im Forum! Freut mich!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben