Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03599.jsonl.gz/577

In vielen Fällen soll eine Internetseite Elemente enthalten, die in zwei Spalten dargestellt werden sollen. In diesem Tutorial beschreibe ich einen sehr einfachen Block, um ein Bild einer Person anzuzeigen, so dass die Beschreibung rechts vom Bild dargestellt wird.
Das Ergebnis schaut folgendermassen aus:
Tabellenlayouts
Ich werde hier nicht in die Details über Tabellen-Layouts eingehen. Nur ganz grundlegend – das Tag “table” sollte nicht für Layouts verwendet werden. Inzwischen ist div & css der korrekte Weg.
Concrete5 erlaubt es uns zwei editierbare Bereiche zu erstellen, womit wir quasi ein 2-spaltiges Layout hätten. Allerdings ergibt sich in unserem Fall das Problem, dass das Bild in der linken Spalte wäre, der Text in der rechten. Damit beide Elemente immer auf der gleichen Höhe beginnen, müssten wir eine fixe Höhe mitgeben, was in den meisten Fällen wohl nicht optimal ist.
Ich werde also eine Lösung beschreiben, die in einem einspaltigen Layout verwendet werden kann, und dabei keine html Tabellen verwendet.
Der Personen Block
Der Block enthält lediglich zwei Elemente. Ein Bild und ein Textfeld um eine Beschreibung einzugeben.
Die HTML Ausgabe sieht folgendermassen aus:
1 2 3 4 5
<div class="ccm-person"> <div class="ccm-person-image"><img src="http://myserver/remo.jpg" alt=""></div> <div class="ccm-person-description">Lorem ipsum dolor sit ame.</div> <div style="clear:both"></div> </div>
Bitte beachten, dass ich am Ende eine “inline CSs-Anweisung” eingebaut habe. Dies wenn möglich durch eine Klasse aus dem gewählten Theme ersetzen. Ich hab hier lediglich zu Demonstrationszwecken kein ganzes Theme veröffentlicht, damit der Code kurz und lesbar bleibt.
Ohne weitere CSS-Anweisungen wird der Text unterhalb des Bildes dargestellt. Da wir aber ein zweispaltiges Layout haben wollen, fügen wir unsere CSS Datei aus dem Theme ein paar Zeilen hinzu:
1 2 3 4 5 6 7 8
.ccm-person-image { float: left; width: 80px; } .ccm-person-description { float: left; width: 385px; }
Dies muss unter Umständen dem Theme angepasst werden.
Am besten einfach den Block herunterladen und loslegen!