Häufig gebrauchte Beispiele zur Formatierung von Content-Seiten. Die CSS-Styles sind in den Beispielen direkt im Quelltext notiert. Für die bessere Wartbarkeit sollten sie in eine externe CSS-Datei ausgelagert werden.
3 Bilder nebeneinander – Eins ganz links – eins ganz rechts – drittes immer genau in der Mitte
Quickcode:
<img style=“float: left;“ src=“#“ alt=“#“ title=“#“>
<img style=“float: right;“ src=“#“ alt=““ title=““>
<p style=“text-align: center;“><img src=“#“ alt=““ title=““></p>
<br style=“clear: both;“>
Da das p-Element meist schon irgendwelchen CSS-Definitionen unterliegt, kann auch ein DIV genommen werden:
Quickcode:
<img style=“float: left;“ src=“#“ alt=“#“ title=“#“>
<img style=“float: right;“ src=“#“ alt=““ title=““>
<div style=“text-align: center;“><img src=“#“ alt=““ title=““></div>
<br style=“clear: both;“>
Und schließlich sollte alles in eine externe CSS-Datei geschrieben werden:
<style type=“text/css“>
.floatleft {float: left;}
.floatright {float: right;}
.floatcenter{text-align: center;} /*margin: auto; geht nicht überall*/
.clear {clear: both;}
</style>
<img class=“floatleft“ src=“#“ alt=“#“ title=“#“>
<img class=“floatright“ src=“#“ alt=““ title=““>
<div class=“floatcenter“><img src=“#“ alt=““ title=““></div>
<br class=“clear“>
Ein häufiges Problem ist der CSS-Ersatz für den Html-Ausdruck „<div align=“center“>“. Mit style=“margin: auto;“ ordnet man das DIV-Element mittig an. Aber mit „text-align: center;“ den Inhalt des DIV und das brauchen wir hier.
Feststehendes Textfeld mit umfliessendem Text
Text in P-Container mit einer festen Breite. Geht auch mit DIV und allen anderen Block-Elementen. Weitere Formatierungen sind natürlich auch möglich.
Umfließender Text in P-Container neben feststehenden P-Container. Das Ganze geht natürlich auch mit anderen Block-Elementen, wie DIV. Umfließender Text in P-Container neben feststehenden P-Container. Das Ganze geht natürlich auch mit anderen Block-Elementen, wie DIV.Umfließender Text in P-Container neben feststehenden P-Container. Das Ganze geht natürlich auch mit anderen Block-Elementen, wie DIV.Umfließender Text in P-Container neben feststehenden P-Container. Das Ganze geht natürlich auch mit anderen Block-Elementen, wie DIV.Umfließender Text in P-Container neben feststehenden P-Container. Das Ganze geht natürlich auch mit anderen Block-Elementen, wie DIV.Umfließender Text in P-Container neben feststehenden P-Container. Das Ganze geht natürlich auch mit anderen Block-Elementen, wie DIV.
Quickcode:
<p style=“border: 1px solid ; margin: 0pt 10px 10px 0pt; padding: 2px; float: left; width: 200px;“> Text in P-Container…</p><p>Umfließender Text…</p>
Links und Rechts ein Bild und in der Mitte Text
Qickcode:
Formatieren von Überschriften mit CSS
Formatierte Überschrift mit CSS-Styles
Überschriften können mit CSS formatiert werden: <h2 style=“border: 3px solid rgb(17, 105, 0); margin: 20pt 0px 15px 0pt; padding: 2px; background-color: rgb(255, 21, 95); color: rgb(255, 255, 255);“>Text</h2>. Die oben verwendeten CSS-Definitionen dürften selbstbeschreibend sein und sind sicher nicht vollständig aufgeführt. Insbesondere lassen sich Bilder und Hintergrundbilder darstellen. Die Farben können natürlich auch in hexadezimaler Schreiweise angegeben werden.
Bild links und umfliessender Text rechts neben Bild
Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer. Das ist ein Layer.
Dieser erste Absatz soll neben dem Bild stehen. Zuerst wird für das Bild im img-Tag die Style-Definition <img style=“float: left;“> festgelegt. Dieser nachfolgende p-Block wird dadurch rechts daneben angeordnet. In die Style-Definition können natürlich auch alle anderen Dafinitionen geschrieben werden: <img style=“border: 1px solid ; margin: 0pt 10px 10px 0pt; padding: 2px; float: left; width: 184px; height: 153px;“ alt=““ src=“link zum Bild“ align=“top“>.
Dieser zweite Absatz steht bei entsprechender Seitenbreite ebenfalls neben dem Bild, bzw. umläuft das Bild bei Verkleinerung des Fensters. Die Style-Definition schaut bis hierher so aus: <img style=“float: left;“><p>Erster Absatz</p><p>Zweiter Absatz</p>. Wie dieser Textfluss beendet wird, soll im nächsten Absatz beschrieben werden.
Dieser Text soll nicht mehr neben dem Bild stehen. Dafür kann <p style=“clear: left;“> als Style-Definition für diesen p-Tag geschrieben werden. Anwendbar ist dieses Verfahren auf alle Block-Elemente, also auf address, blockquote, div, dl, fieldset, form, h1-h6, hr, noframes, noscript, ol, p, pre, table, ul. FOlgende Werte sind für clear: anwendbar:
- left – Beendet einen Umfluß mit float:left
- right – Beendet einen Umfluß mit float:right
- both – Beendet den Umfluß um beide Seiten
- none – Keine Beendigung
Zweispaltiges Seitenlayout mit Bild links und Textblock rechts
Ein Bild auf der linken Seite und mehrere Testböcke ohne Umlauf auf der rechten Seite. Zuerst definieren wir wieder das Bild mit <img style=“float: left; width: 184px; height: 153px;“>. Anschließend kann ein (oder mehrere) Block-Element(e) rechts daneben gesetzt werden indem je nachdem wie breit das Bild ist, ein linker Abstand definiert wird: <p style=“margin-left: 200px;„>. Mit <p style=“clear: left;“> kann ein neuer Text-Block wieder aus dem Textfluss genommen werden.
Text rechts neben Bild und soll nicht das Bild unten umlaufen. Text rechts neben Bild und soll nicht das Bild unten umlaufen. Text rechts neben Bild und soll nicht das Bild unten umlaufen. Text rechts neben Bild und soll nicht das Bild unten umlaufen. Text rechts neben Bild und soll nicht das Bild unten umlaufen. Text rechts neben Bild und soll nicht das Bild unten umlaufen. Text rechts neben Bild und soll nicht das Bild unten umlaufen. Text rechts neben Bild und soll nicht das Bild unten umlaufen.
Neuer Text rechts neben Bild und soll nicht das Bild unten umlaufen. Neuer Text rechts neben Bild und soll nicht das Bild unten umlaufen. Neuer Text rechts neben Bild und soll nicht das Bild unten umlaufen. Neuer Text rechts neben Bild und soll nicht das Bild unten umlaufen. Neuer Text rechts neben Bild und soll nicht das Bild unten umlaufen. Neuer Text rechts neben Bild und soll nicht das Bild unten umlaufen.
Text aus Textfluss wieder raus genommen und steht wieder vorn. Text aus Textfluss wieder raus genommen und steht wieder vorn. Text aus Textfluss wieder raus genommen und steht wieder vorn. Text aus Textfluss wieder raus genommen und steht wieder vorn. Text aus Textfluss wieder raus genommen und steht wieder vorn. Text aus Textfluss wieder raus genommen und steht wieder vorn. Text aus Textfluss wieder raus genommen und steht wieder vorn.
Überschrift über ganze Zeile, Bilderleiste rechts, Text mit Überschriften und Listen links
Überschrift in erster Zeile
Beschreibung zum Bild
Beschreibung zum Bild
Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern.
Überschrift links von den zwei Bildern.
Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern.
Noch eine Überschrift und eine Liste
- Listenpunkt 1 Listenpunkt 1 Listenpunkt 1 Listenpunkt 1 Listenpunkt 1
- Listenpunkt 2 Listenpunkt 2 Listenpunkt 2 Listenpunkt 2
- Listenpunkt 3 Listenpunkt 3 Listenpunkt 3
- Listenpunkt 4 Listenpunkt 4
Quellcode:
<h3>Überschrift in erster Zeile</h3>
<div style=“border: 0px none; margin: 10px 0px 10px 10px; padding: 0px; float: right; width: 255px; text-align: center;“><img style=“border: 1px solid; margin: 0px 0px 10px 10px; padding: 2px; width: 250px; height: 250px;“ src=“#“ alt=“Alternativer Text zum ersten Bild“ align=“top“ /> <small>Beschreibung zum Bild</small> <br /><br /> <img style=“border: 1px solid; margin: 0px 0px 10px 10px; padding: 2px; width: 250px; height: 150px;“ src=“#“ alt=“Alternativer Text zum zweiten Bild“ align=“top“ /> <small>Beschreibung zum nächsten Bild</small></div>
<p>Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern. Text links von den zwei Bildern.</p>
<h3>Überschrift links von den zwei Bildern.</h3>
<p>Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern. Wieder ein Text links von den zwei Bildern.</p>
<h3>Noch eine Überschrift und eine Liste</h3>
<ul>
<li>Listenpunkt 1 Listenpunkt 1 Listenpunkt 1 Listenpunkt 1 Listenpunkt 1</li>
<li>Listenpunkt 2 Listenpunkt 2 Listenpunkt 2 Listenpunkt 2</li>
<li>Listenpunkt 3 Listenpunkt 3 Listenpunkt 3</li>
<li>Listenpunkt 4 Listenpunkt 4</li>
</ul>
<p><br style=“clear: both;“ /></p>