 Fotopräsentation 04 (Darstellung CSS-formatiert)
CSS-formatierte Darstellung von Vorschaugrafiken mit Beschreibungstext. Fließende Darstellung als Bild-Text-Element nebeneinander, abhängig von der zur Verfügung stehenden Breite.
|
|
Fotopräsentation - Vorschaugrafiken + Text - CSS-formatiert
Geeignet für Vorschaugrafiken jeder Größe!
Siehe auch meine erweitertes Beispiele  Fotopräsentation 05 und Fotopräsentation 06
Bildbeschreibung
Bildbeschreibung
Bildbeschreibung
Wenn Sie eine größere Anzahl von Mini-Bildern als Vorschaugrafiken auf Ihren Webseiten anbieten, die der Seitenbesucher zum Vergrößern anklicken kann, sollen diese Vorschaugrafiken ohne großen Aufwand zu notieren sein. Einfügen von neuen Bildern oder eine neue Sortierung sollte leicht möglich sein. Eine Anordnung innerhalb einer Tabelle wäre damit nicht geeignet. Und wenn Sie schon dabei sind, warum sollte man die Bildchen nicht ein wenig nett 'verpacken'? Hier ist meine Fotopräsentation 04.
Dieses CSS-basierte Anwendungsbeispiel ist für jede Vorschaugröße geeignet und nicht auf ein bestimmtes Maß der Vorschaugrafik beschränkt. Die automatische Anpassung macht es möglich.
Die Darstellung der Vorschaugrafiken auf diese Art eignet sich besonders für Layouts mit "Float-Technik", bei der die Breite der Inhalte von der Bildschirmauflösung abhängig ist.
 Demo 01  Demo 02 Demo 03
Die Anzahl der nebeneinander dargestellten Bild-Text-Elemente ist nicht starr festgelegt (wie z.B. innerhalb einer Tabelle) und lediglich abhängig von der zur Verfügung stehenden Breite! Natürlich könnte man die Breite des Darstellungsbereichs auch limitieren.
Rechts sehen Sie ein einzelnes Bild-Text-Element.
Mehrere davon ordnen sich durch den festgelegten 4 Pixel Seitenabstand mit einer Lücke von 8 Pixeln nebeneinander an.
|
Bildbeschreibung
|
Nachträgliche Änderung der Reihenfoge kein Problem
Vorteile gibt es aber auch für ältere Layouts. Da keine Tabelle für die Anordnung der Vorschaugrafiken verwendet wird ist es kein Problem, die Reihenfolge zu ändern oder später weitere Grafiken an einer beliebigen Stelle hinzu zu fügen. Beispiel für eine solche Anwendung mit alphabetischer Anordnung auf meinen Geilenkirchen-Seiten
Unten eine Anzeige von Vorschaugrafiken, die eigentlich zur Vergrößerung anklickbar sein sollen. Ich habe hier keinen weiteren Aufwand zur Darstellung der Großansicht betrieben. In diesem Anwendungsbeispiel möchte ich lediglich die Darstellung der Vorschaugrafiken mit CSS erklären. Beispiele finden Sie in meiner Web-Toolbox - Bilder: Menü 03 (PopUp-Window in Bildgröße) oder im Web (lightshow). Im Download ist ein Bild-PopUp integriert.
CSS-formatierte Darstellung von Bild-Text-Elementen
Bildbeschreibung
Bildbeschreibung
Fotos: Mini-Image-Box (Jansen)
Jedes einzelne Bild-Text-Element, bestehend aus Grafik und Bildbeschreibung, ist in einem <div>-Block zusammengefasst.
<div class="grafik">
<a href="#"><img src="foto.jpg" alt="Foto 1" width="170" height="128"></a>
<div class="beschreibung">Bildbeschreibung</div>
</div>
Durch eine CSS-Anweisung mit 'float' werden die Bild-Text-Elemente nebeneinander dargestellt, solange ausreichend Platz vorhanden ist. Danach springt die Darstellung in den Anzeigebereich darunter und die Darstellung wird in 'der nächsten Zeile' fortgesetzt.
Zur Veranschaulichung öffnen Sie die Demo 02 und verändern die Größe des Browserfensters durch Ziehen mit der Maus.
Formatierungen
Rahmenbreite und -farbe, Textformatierung, Hintergrundfarbe und alle Abstände sind durch CSS-Anweisungen festgelegt.
Im ersten Anweisungsblock mit dem wichtigen 'float: left', sind Außenabstände (margin) für jedes Bild-Text-Element festgelegt. Mit einem Eintrag von 4 px sind die Abstände der Bild-Text-Elemente zueinander dann 8 Pixel, logisch.
Die Rahmenbreite (margin) für jedes Bild-Text-Element und auch die Rahmenformatierung (border) ist im zweiten Anweisungsblock notiert.
Die Formatierung für den internen <div>-Berich des Beschreibungstextes, sehen Sie im letzten Anweisungsblock (Unterklasse '.beschreibung'). Dort werden Textformatierung und Hintergrundfarbe eingestellt
Zur Veranschaulichung mit unterschiedlichen CSS-Formatierungen öffnen Sie
die Demo 01 und die Demo 03
CSS-Anweisungen im Head-Bereich Ihres HTML-Dokuments
<style type="text/css">
<!--
div.grafik
{
float: left;
margin: 4px 4px 4px 4px; /* oben rechts unten links */
border: 1px solid #000000;
height: auto;
width: auto;
text-align: center;
background-color:#4F4F4F;
font-size:2px;
}
div.grafik img
{
display: inline;
margin: 10px;
border: 1px solid #FFFFFF;
}
div.grafik a:hover img {
border: 1px solid #000000;
}
div.beschreibung
{
font-family:Arial,Helvetica,sans-serif;
text-align: center;
font-weight: normal;
font-size:11px;
margin: 0px;
color:#000000;
background-color:#EFEFEF;
}
-->
</style>
Der Quellcode im Body-Bereich Ihres HTML-Dokuments
Für jedes Bild-Text-Element tragen Sie einen solchen Code-Block ein:
<div class="grafik">
<a href="#"><img src="004.jpg" alt="Foto 1" width="170" height="128"></a>
<div class="beschreibung">Bildbeschreibung</div>
</div>
! WICHTIG - Float-Left aufheben
Wenn Sie unterhalb der fließenden, links ausgerichteten Darstellung der Bild-Text-Blöcke mit einer normalen Darstellung fortfahren möchten, muss das 'float:left;' aufgehoben werden. Sonst versucht der Browser eventuell zur Verfügung stehenden Platz rechts neben den Bild-Text-Blöcken mit Inhalten zu füllen, die sie eigentlich unterhalb der Grafiken eingetragen haben.
Das bewirken Sie mit einer CLEAR-Anweisung, die unterhalb der Bild-Text-Blöcke eingetragen wird.
<div style="clear:both;height:1px;"> </div>
Ich bevorzuge diese Notierung.
|
Home • Bilder • Fotopräsentation 04
ZIP
)