Absätze als Info-Box heraus stellen - 2. Teil
Im Artikel Absätze als Info-Box heraus stellen - 1. Teil haben Sie erfahren, wie Sie mit ein wenig CSS Absätze gezielt als InfoBox heraus stellen können. In diesem 2. Teil wollen wir nun daran gehen, den Absatz-Titel als Teil der Info-Box darzustellen und dem Titel jeweils automatisch eine Grafik voran stellen. Das Ergebnis sieht dann z.B. so aus:
Ein Beispiel
Dies ist eine Info-Box mit Absatz-Titel und einer vorangestellten Grafik in der Überschrift. Dank CSS und etwas jQuery-Code leicht umzusetzen.
Wir verwenden als Ausgangsbasis unsere infoBox-Definition aus Teil 1:
.infoBox {
background-color: #d1f0b9;
padding: 5px 10px 10px 5px;
border-radius: 14px;
}
background-color: #d1f0b9;
padding: 5px 10px 10px 5px;
border-radius: 14px;
}
Der Absatz-Titel
In weblica steht der Absatz-Titel im generierten Dokument stets vor dem eigentlichen Inhalt des Absatzes. Für einen Text-Absatz sieht der Code hierfür in etwa so aus:
<h3 class="title">Der Absatz-Titel</h3>
<div class="textParagraph paragraphBase " id="pa153">
Hier steht der eigentliche Inhalt...
</div>
<div class="textParagraph paragraphBase " id="pa153">
Hier steht der eigentliche Inhalt...
</div>
Wenn wir nun diesem Absatz unsere .infoBox Klasse hinzufügen, dann wirkt diese "nur" auf dem Inhalt des Absatzes, der Titel bleibt aussen vor: Das sieht dann so aus:
Der Absatz-Titel
In weblica steht der Absatz-Titel im generierten Dokument stets vor dem eigentlichen Inhalt des Absatzes. Für einen Text-Absatz sieht der Code hierfür in etwa so aus:
Der Titel erscheint ausserhalb der Info-Box. Das wollen wir nun ändern:
Neue Option für umgebendes Div 
Ab Version 3 ist der zusätzliche Javascript-Code nicht mehr nötig, um den Absatztitel in das Div des Absatzes zu schieben. Aktivieren Sie stattdessen die neue Option "Umgebendes Div" und weisen Sie die gewünschte CSS-Klasse für die Box diesem zusätzlichen Div zu.
Hierzu verwenden wir die mächtige Selektor-Syntax von jQuery. Wenn Sie noch nie mit jQuery gearbeitet haben, lesen Sie am besten zuerst den Artikel Kurzeinführung in jQuery bevor Sie mit dem Beispiel hier fortfahren.
Fügen Sie im HTML-Head der Seite den folgenden Code ein:
Fügen Sie im HTML-Head der Seite den folgenden Code ein:
<script type="text/javascript">
$(document).ready(function() {
$('.infoBox').each(function() {
var paragraph = $(this);
var heading = $(this).prev();
heading.prependTo(paragraph);
});
});
</script>
$(document).ready(function() {
$('.infoBox').each(function() {
var paragraph = $(this);
var heading = $(this).prev();
heading.prependTo(paragraph);
});
});
</script>
Dieser Code geht hin und sagt: Suche alle Elemente, welche die Klasse infoBox haben und führe für jedes gefundene Element den folgenden Code aus: Merke dir das aktuelle Element in der Variablen paragraph, suche den Vorgänger dazu (das ist der Absatztitel) und merke dir diesen in der Variablen heading. Verschiebe nun den Inhalt von heading im Dokument unmittelbar vor den Inhalt von paragraph. Damit landet die Überschrift innerhalb des Absatzes direkt vor dem ursprünglichen Inhalt.
Wenn wir uns die Seite jetzt anschauen, dann erscheint der Titel innerhalb des Absatzes:
Wenn wir uns die Seite jetzt anschauen, dann erscheint der Titel innerhalb des Absatzes:
Der Absatz-Titel
In weblica steht der Absatz-Titel im generierten Dokument stets vor dem eigentlichen Inhalt des Absatzes. Nach der Behandlung durch unseren Code hat sich das geändert.
Ein Bild in der Überschrift
Zum Schluss wollen wir dem Titel in der Info-Box noch ein kleines Bild voranstellen.
Besorgen Sie sich hierfür ein passendes Bild mit einer Höhe von 16 Pixel. Nachstehend finden Sie ein paar Beispiele, die Sie in Ihren weblica Projekten frei verwenden können:
(Rechts-Klick auf das Bild, um es zu speichern)
Besorgen Sie sich hierfür ein passendes Bild mit einer Höhe von 16 Pixel. Nachstehend finden Sie ein paar Beispiele, die Sie in Ihren weblica Projekten frei verwenden können:
(Rechts-Klick auf das Bild, um es zu speichern)
Die Höhe von 16 Pixel eignet sich in der Regel für alle Überschriften von H2 bis H6. Importieren Sie zuerst das gewünscht Bild in Ihr Projekt.
Wir setzen der Überschrift, die in einer Info-Box verwendet wird dieses Bild als Hintergrund-Bild, das wir links ausrichten und nicht wiederholen. Ausserdem sorgen wir mit einem Padding noch dafür, dass der Text der Überschrift nicht am Text klebt. Ergänzen Sie in Ihrem CSS hierfür die folgende Regel:
Wir setzen der Überschrift, die in einer Info-Box verwendet wird dieses Bild als Hintergrund-Bild, das wir links ausrichten und nicht wiederholen. Ausserdem sorgen wir mit einem Padding noch dafür, dass der Text der Überschrift nicht am Text klebt. Ergänzen Sie in Ihrem CSS hierfür die folgende Regel:
.infoBox-info {
background-image: url($(info-png));
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;
}
background-image: url($(info-png));
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;
}
Der Pfad zum Bild
Beim rotmarkierten Teil handelt es sich um ein Feld, das den Pfad zum Bild enthält, das angezeigt werden soll.
Legen Sie das entsprechende Feld an. Als Wert hinterlegen Sie das Ressourcen-Feld Pfad des gewünschten Bildes: Rufen Sie hierzu im Feld-Editor die Liste mit den Ressourcen Feldern durch Drücken von Ctrl-Leertaste auf:
Legen Sie das entsprechende Feld an. Als Wert hinterlegen Sie das Ressourcen-Feld Pfad des gewünschten Bildes: Rufen Sie hierzu im Feld-Editor die Liste mit den Ressourcen Feldern durch Drücken von Ctrl-Leertaste auf:
Wie kommt nun das Bild vor den Absatz-Titel in der Info-Box? Sie ahnen es: auch hier hilft uns jQuery. Hierfür ergänzen wir unser bisheriges Skript um die fett markierte Zeile:
<script type="text/javascript">
$(document).ready(function() {
$('.infoBox').each(function() {
var paragraph = $(this);
var heading = $(this).prev();
heading.addClass('infoBox-info');
heading.prependTo(paragraph);
});
});
</script>
$(document).ready(function() {
$('.infoBox').each(function() {
var paragraph = $(this);
var heading = $(this).prev();
heading.addClass('infoBox-info');
heading.prependTo(paragraph);
});
});
</script>
Das Ergebnis sieht dann so aus:
Ein Beispiel
Dies ist eine Info-Box mit Absatz-Titel und einer vorangestellten Grafik in der Überschrift. Dank CSS und etwas jQuery-Code leicht umzusetzen.
Sie sehen: mit ein wenig CSS und jQuery-Code machen Sie aus einem Absatz eine sehenswerte Info-Box. Viel Spass beim Ausprobieren!