Hilfestellung für Formatierung 'body'-Bereich in bestimmter Schriftart

Lichtfaenger · 03.07.2014

Guten Morgen zusammen!

Ich bitte mal freundlichst um Unterstützung in nachfolgender Thematik. Ich habe mir eine HTML-Vorlage für Outlook 2010 "gebastelt", die ich als Briefpapier verwende. Im Head habe ich hierzu 2 .jpg eingebunden. Der Footer ist mittels Tabelle mit den relevanten rechtlichen Daten (HRB, postalische Anschrift etc. gefüllt und erscheint im Font Calibri in Größe 10. Soweit so gut.

Jetzt mein Problem: Der 'body'-Bereich soll ebenfalls mit dem Font Calibri "automatisch" belegt sein,
d.h., wenn ich die Schreibmarke in - den dann noch leeren - Bereich bewege, soll mit dem Font
Calibri der Textinhalt geschrieben werden. Das ist momentan nicht der Fall! :-(

Stattdessen wird Times New Roman vorgegeben und ich 'darf' dann immer manuell den Textbereich markieren und oben in Bearbeitungsleiste von Outlook 2010 auf Calibri in Schriftgröße 11 umstellen.

Vor vielen, vielen langen Jahren habe ich mit Homesite mit Standard-HTML bissel hobbymäßig "gearbeitet". Hier aber würde ich gerne mit CSS-Format-Styles was machen, aber leider kenne ich mich damit so was von gar nicht aus, dass ich jeden Versuch nach relativ kurzer Zeit wieder frustriert abbrechen muss.

Im Moment sieht das "Projekt" ;-) wie folgt aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>VorlageBK2013</title>
</head>
<body>
<img src="c:%5Cinstall%5Chl.jpg" alt="" border="0"
height="" width="" /><img
src="c:%5Cinstall%5Cjm.jpg" alt="" border="0"
height="" width="" />
 
 

[--- hier in diesem Bereich kommt der Text

--
 
 
 
 
 
 
 

<table style="text-align: left; width: 100%; font-family: Calibri;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">Rxxxxxxxxxxxx 
</td>
<td style="vertical-align: top;">Telefon
+49 (0) xxxxxxxxxx </td>
<td style="vertical-align: top;">Hxxxxxxx
</td>
</tr>
<tr>
<td style="vertical-align: top;">xxxxxxxxxxxxx 
</td>
<td style="vertical-align: top;">Telefax
+49 (0) xxxxxxxxxx 
</td>
<td style="vertical-align: top;">Axxxxxxxxxx
</td>
</tr>
<tr>
<td style="vertical-align: top;">xxxxxxxxxxxxxxxx
</td>
<td style="vertical-align: top;"> 
</td>
<td style="vertical-align: top;">Gxxxxxxxxxx 
</td>
</tr>
<tr>
<td style="vertical-align: top;">Internetxxxxxxxxxxxxxxxxx</td>
<td style="vertical-align: top;">E-Mail: <a
href="mailto:xxxxxxx@xxxxxxxx.xxx">xxxxxxxxxxxxxxx</a>
</td>
<td style="vertical-align: top;"> 
</td>
</tr>
</tbody>
</table>
 

 
</body>
</html>

+++ EOF +++

Obiges Beispiel habe ich via Kompozer "erstellt" mittels anfänglicher Verwendung von phase 5-Editor.

Im voraus schon mal vielen Dank für eine Unterstützung.

Groetjes,
Lichtfänger

TAM1993 · 03.07.2014

Hi Lichtfaenger,

ich weiß jetzt nicht, ob das deinen Vorgaben entspricht. Guck einfach mal.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>VorlageBK2013</title>

<style type="text/css">
    *, body {
        font-family: Calibri;
    }

    td {
        vertical-align: top;
        font-size: 11pt;
    }
</style>

</head>
<body>
<img src="c:%5Cinstall%5Chl.jpg" alt="" border="0"
height="" width="" /><img
src="c:%5Cinstall%5Cjm.jpg" alt="" border="0"
height="" width="" />
<br />
<br />

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore dolores odio laborum aliquid explicabo iste modi ex error consequatur tenetur mollitia, ipsum atque iure magni eligendi neque sint, dolor.

<table style="text-align: left; width: 100%;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><small>Rxxxxxxxxxxxx<br /></small></td>
<td><small>Telefon
+49 (0) xxxxxxxxxx </small></td>
<td><small>Hxxxxxxx
</small></td>
</tr>
<tr>
<td><small>xxxxxxxxxxxxx<br />
</small></td>
<td ><small>Telefax
+49 (0) xxxxxxxxxx <br />
</small></td>
<td><small>Axxxxxxxxxx
</small></td>
</tr>
<tr>
<td><small>xxxxxxxxxxxxxxxx
</small></td>
<td><small><br />
</small></td>
<td><small>Gxxxxxxxxxx<br />
</small></td>
</tr>
<tr>
<td><small>Internet<span
style="text-decoration: underline;">xxxxxxxxxxxxxxxxx</span></small></td>
<td><small>E-Mail:&nbsp;<a
href="mailto:xxxxxxx@xxxxxxxx.xxx">xxxxxxxxxxxxxxx</a>
</small></td>
<td style="vertical-align: top;"><small><br />
</small></td>
</tr>
</tbody>
</table>
<small><br /></small>
<br />
</body>
</html>

Hab dazu auch mal ein bisschen den Quellcode aufgeräumt, was unnötig war.

Mit

HTML:

 *, body {
        font-family: Calibri;
    }

wird im Head definiert, dass der ganze text im dokument (*) und im body (body) die Schrfitart Calibri hat. Wie es mit später eingefügten Daten aussieht, weiß ich nicht. Ich kann mir das ganze nicht vorstellen, was du vor hast...

Mit freundlichem Klick

topptsf · 03.07.2014

Bonjour ...
für den 'body' sollten Font-Family &Size als CSSRegel declariert werden.

Suche :

HTML:

<title>VorlageBK2013</title>
</head>

Ersetze durch :

HTML:

<title>VorlageBK2013</title>
<style type="text/css">
body,td,th {
   font-family: Calibri;
   font-size: 11px;
}
</style>
</head>

TIP :
Bitte hosten Sie die Graphicdateien auf einem Webspace und passen Sie den img-Tag entsprechend an.

HTML:

<img src="http://domaine-name/pfad/name-datei.jpg">

entsprechend an.
Sonst erscheint beim Empfänger anstelle der Graphic ein Zeichen für 'broken-link'

Cordialement Henry

Edit by Henry:
Da war jemand schneller. (Ich sollte beim Posten nicht telefonieren)

Lichtfaenger · 03.07.2014

TAM1993 schrieb:
Hi Lichtfaenger,

ich weiß jetzt nicht, ob das deinen Vorgaben entspricht. Guck einfach mal.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <title>VorlageBK2013</title> [...] Hab dazu auch mal ein bisschen den Quellcode aufgeräumt, was unnötig war. Mit [HTML] *, body { font-family: Calibri; }

wird im Head definiert, dass der ganze text im dokument (*) und im body (body) die Schrfitart Calibri hat. Wie es mit später eingefügten Daten aussieht, weiß ich nicht. Ich kann mir das ganze nicht vorstellen, was du vor hast...

Mit freundlichem Klick

Vielen Dank für die zeitnahe Rückantwort!

Ich habe jetzt den Code eingefügt, allerdings erscheint der Fülltext noch immer in Times New Roman. :-(

Groetjes,
Lichtfaenger

Lichtfaenger · 03.07.2014

topptsf schrieb:
Bonjour ...
für den 'body' sollten Font-Family &Size als CSSRegel declariert werden.

OK, diese Version versuche ich gleich einzubauen. Melde mich dann umgehend.

[... ]TIP :

Bitte hosten Sie die Graphicdateien auf einem Webspace und passen Sie den img-Tag entsprechend an.

HTML:

<img src="http://domaine-name/pfad/name-datei.jpg">

entsprechend an.
Sonst erscheint beim Empfänger anstelle der Graphic ein Zeichen für 'broken-link'

Cordialement Henry

Edit by Henry:
Da war jemand schneller. (Ich sollte beim Posten nicht telefonieren)

Möglichkeit auf Webspace zu platzieren wäre gegeben. Allerdings, wenn ich mir selbst vom Büro eine Mail an meinen Privataccount bei Gmail sende, erscheinen die Grafiken auf meinem Rechner. Anscheinend funktioniert es dann doch, oder?

Also, ich habe absolut keine Erfahrungen mit CSS etc., von daher nicht so viel den Kopf schütteln. Ich bin froh um jede Hilfe und freue mich, wenn der Quelltext W3-konform darstellbar ist. Hierfür nehme ich auch gerne die Arbeit in Kauf, die Grafiken auf den Firmen server zu platzieren.

Groetjes,
Lichtfänger

Lichtfaenger · 03.07.2014

topptsf schrieb:
Bonjour ...
für den 'body' sollten Font-Family &Size als CSSRegel declariert werden.

Suche :

HTML:

<title>VorlageBK2013</title> </head>

Ersetze durch :

HTML:

<title>VorlageBK2013</title> <style type="text/css"> body,td,th { font-family: Calibri; font-size: 11px;ger anstelle der Graphic ein Zeichen für 'broken-link' Cordialement Henry Edit by Henry: Da war jemand schneller. (Ich sollte beim Posten nicht telefonieren) ;)[/QUOTE]

Guten Tag topptsf,

vielen Dank für die Info! Das hat jetzt funktioniert!
Chapeau!

Was die Grafiken betrifft:
Ich denke, dass diese mit der jeweiligen Mail 'mitgesendet' werden und von daher werden diese auch korrekt angezeigt. Nun, die Größe habe ich mit paar kb recht klein gehalten, von daher ist die Belastung nicht arg groß.

Gleichwohl ist es sicherlich eleganter, hier über den Tipp mit der Auslagerung auf unseren Server nachzudenken.

Nochmals vielen Dank für die schnelle Hilfe.

Groetjes,
Lichtfänger

topptsf · 03.07.2014

Danke für das Feed-back.
Was die Grophic betrifft, empfehle ich wirklich den Weg des Hosting, da Outlook (wie alle Webproducte aus dem Haus m****soft oft eigenen Regeln folgen, welche nicht mit Fremdproducten interagieren, da nicht 100% conform mit den Regeln w3.org

TAM1993 · 03.07.2014

Ich verstehe nicht ganz, wie du was vorhast. Vielleicht kann ich dir dann ja helfen...
Beschreib doch mal bitte.

EDIT: Ok hat sich ja erledigt.