 Fotopräsentation 07 (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. Verwendung einer Hintergrundgrafik (Diarahmen).
|
|
Fotopräsentation - Monitor - Vorschaugrafiken + Text - CSS-formatiert
( modifiziertes Beispiel meiner  Fotopräsentation 04 )
Wenn Sie Mini-Bilder als Vorschaugrafiken auf Ihren Webseiten anbieten, die der Seitenbesucher zum Vergrößern anklicken kann, sollen diese Vorschaugrafiken ohne großen Aufwand zu notieren und leicht umzuordnen sein. Eine Anordnung innerhalb einer Tabelle ist dann nicht geeignet. Und wenn Sie schon dabei sind, warum sollte man die Bildchen nicht ein wenig nett 'verpacken'? Hier ist meine Fotopräsentation 07.
Dieses CSS-basierte Anwendungsbeispiel ist für Grafiken von 150 x 113 Pixel geeignet. Die Hintergrundgrafik ist genau zugeschnitten für Fotos dieser Größe (Verhältnis 4 : 3).
Solange der Platz reicht
Die Darstellung der Vorschaugrafiken auf diese Art eignet sich besonders für Layouts mit "Float-Technik", bei der die Anzeigebreite für dargestellte Inhalte von der Bildschirmauflösung abhängig ist.  Demo 01  Demo 02
Genau wie im Anwendungsbeispiel Fotopräsentation 05, verwende ich hier eine Hintergrundgrafik, die in 2 Versionen zur Verfügung steht (siehe unten). In dieser Präsentation 07 setze ich eine Monitorgrafik ein. In den Beispielen 05 und 06 verwende ich andere Grafiken.
|
|
 |
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 reihen sich durch den festgelegten 4 Pixel Seitenabstand wie eine Reihe von Diarahmen auf einem Lichtkaten aneinander.
(Script PopUp-Window in Bildgröße - Bilder: Menü 03) |
|
Bildbeschreibung
|
Vorteile
Vorteile gibt es aber auch für andere 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
Machen Sie sich ein Bild
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
Hintergrundgrafik ausgelegt für Vorschaugrafiken von 150 x 113 Pixel
Bildbeschreibung
Bildbeschreibung
Bildbeschreibung
Bildbeschreibung
Bildbeschreibung
Bildbeschreibung
Fotos: Mini-Image-Box (eigene Aufnahmen - Jansen)
Jedes einzelne Bild-Text-Element, bestehend aus Grafik und Bildbeschreibung, ist in einem <div>-Block zusammengefasst.
<div class="monitor">
<a href="#"><img src="foto.jpg" alt="Foto 1" width="150" height="113"></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 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 8 px sind die Abstände der Bild-Text-Elemente für oberhalb und unterhalb festgelegt. Zusätzlich ist die Gesamthöhe auf 178 Pixel definiert.Der seitliche Abstand wurde mit 5 Pixel eingetragen (Zwischenraum dann 10 Pixel, logisch). So reihen sich die Darstellungen mit diesem seitlichen Abstand nebeneinander.
Die margin-Angaben im zweiten Anweisungsblock sorgen für den notwendigen Innenabstand zur Positionierung der 150 x 113 Pixel großen Grafiken (incl. einem 1 px breiten Rand).
Die Formatierung für den internen <div>-Bereich des Beschreibungstextes, sehen Sie im letzten Anweisungsblock (Unterklasse '.beschreibung'). Dort werden Textformatierung und Hintergrundfarbe eingestellt. Die Hintergrundfarbe in diesem Beispiel ist mit '#FFFFFF' weiß.
CSS-Anweisungen im Head-Bereich Ihres HTML-Dokuments
<style type="text/css">
<!--
div.monitor
{
margin: 8px 5px 8px 5px;
border: 0px solid #000000;
height: 178px;
width: auto;
float: left;
text-align: center;
background:url(monitor-07-01.gif) #FFFFFF top left no-repeat;
font-size:2px;
}
div.monitor img
{
display: inline;
margin: 20px 9px 25px 9px;
border: 1px solid #000000;
}
div.monitor a:hover img {border: 1px solid #FFFFFF;}
div.beschreibung
{
text-align: center;
font-weight: normal;
font-size:11px;
margin: 0px;
color:#5F5F5F;
}
-->
</style>
Der Quellcode im Body-Bereich Ihres HTML-Dokuments
Für jedes Bild-Text-Element tragen Sie einen solchen Code-Block ein:
<div class="monitor">
<a href="#"><img src="foto.jpg" alt="Foto 1" width="150" height="113"></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.
Grafiken
Grafiken zum Download rechtsklicken und Speichern:
Dateiname entsprechend eintragen:
background:url(monitor-07-01.gif) #FFFFFF top left no-repeat;
|
Home • Bilder • Fotopräsentation 07
ZIP
)