 Elemente positionieren 02 - Textposition
Ein Beispiel zur Positionierung von (Text)elementen. Das ist natürlich in unterschiedlichen Bereichen einsetzbar. Hier demonstriert in einer Anwendung, die im Kopf einer HTML-Seite 2 Texte über eine Hintergrundgrafik legt.
Diese Technik werwende ich in meinem Downloadbeispiel HP-Vorlage H04. So kann man die gleiche Hintergrundgrafik für jedes Thema einsetzen. Schließlich ist der große Titeltext (Orangenbärchen) nicht Bestandteil der Grafik und kann durch jeden anderen Text ersetzt werden.
Im Downloadbeispiel demonstriere ich, wie leicht ein Re-Design möglich ist, verwendet man diese Technik. Ach ja, eine Seite könnte man je nach Unterthema farblich unterscheiden, wenn man bei gleichen Texten eine andersfarbige Grafik wählt.
Vorgaben
Der Kopf einer HTML-Seite hat eine 760 Pixel breite Tabelle mit einer Hintergrundgrafik. Angepasst an die Grafik sollen 2 unterschiedlich formatierte Texte an einer bestimmten Position angezeigt werden. Die Positionierung soll sich an der obenen linken Ecke der Tabellenzelle orientieren.
| |
|
Ansicht des Seitenkopfes in Originalgröße (Auszug)
Orangenbärchen
Internationale Gummibärchen
|
Absicht
Als Vorlage für eine Webseite soll das Layout des Seitenkopfs / Titelblocks mit wenigen Mausklicks angepasst werden können. Ähnlich können sie das auch für ein Redesign oder für Seite einsetzen, die ein gleiches layout aber unterschieliche Farbgebungen haben sollen (in Pastelltönen abgestufte Seiten).
- Hintergrundgrafik / Hintergrundfarbe austauschen
- Texte anpassen
- Textformatierung anpassen
Alternativ lässt sich statt der Hintergrundgrafik natürlich auch eine Tabellen-Hintergrundfarbe notieren. Dazu würde ich u.U. Pastelltöne einsetzen. Die Farbabstufungen können sie mit einem Colorpicker dieser Grafik entnehmen:
 Color-Picker / TrayColor
Quellcode
a) Tabelle mit Hintergrundgrafik
<table height="71" width="760" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top" align="left" background="images/oben-pfirsich.gif">
Texte und Inline-Formatierungen werden hier notiert
</td></tr></table>
b) Tabelle mit Hintergrundfarbe
<table height="71" width="760" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top" align="left" bgcolor="#FF8E5C">
Texte und Inline-Formatierungen werden hier notiert
</td></tr></table>
Texte und Inline-Formatierung
<div style="position: relative;">
<div style="Formatierungsanweisungen-01">Orangenbärchen</div>
<div style="Formatierungsanweisungen-02">Internationale Gummibärchen</div>
</div>
Formatierungsanweisungen-01 (ohne Zeilenumbrüche eintragen):
padding:0px;
position:absolute;
display:block;
left:30px; top:24px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:22px;
font-weight:bold;
color:#FFE8DE;
Formatierungsanweisungen-02 (ohne Zeilenumbrüche eintragen):
padding:0px;
position:absolute;
display:block;
left:370px;
top:22px;
font-size:10px;
font-weight:normal;
color:#FFE8DE
Vorlage und Demo einer Anwendung
Ein vollständiges Download einer Webseitenvorlage, bei der diese Technik eingesetzt wird, finden sie im menü 'Downloads' im Bereich Webseitenvorlagen ohne Frames (HP-Vorlage H04)
Klicken sie dort im Kopfbereich auf 'Vorschau' oder 'Download'.
HP-Vorlage H04
|
HOME
BEISPIEL 
ZURÜCK