 Fotopräsentation 09 (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 - Briefmarke - Vorschaugrafiken + Text - CSS-formatiert
UPDATE 04.04.2010 17:30 Uhr, 3 weitere Grafiken
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 09.
|
|
Bildbeschreibung
|
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).
Siehe Menü 6 in dieser Rubrik für weitere Formate.
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 
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 markegrafik 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 2 Pixel Seitenabstand wie eine Reihe von Briefmarken in einem Album 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 Vorschau-Bild-Textelementen, 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="marke">
<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 2 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 2 Pixel eingetragen (Zwischenraum dann 4 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.marke
{
margin: 2px 2px 2px 2px;
border: 0px solid #000000;
height: 178px;
width: auto;
float: left;
text-align: center;
background:url(briefmarke-01.jpg) #FFFFFF top left no-repeat;
font-size:8px;
}
div.marke img
{
display: inline;
margin: 26px 27px 5px 27px;
border: 1px solid #000000;
}
div.marke a:hover img {border: 1px solid #FFFFFF;}
div.beschreibung
{
text-align: center;
font-weight: normal;
font-size:10px;
margin: 0px;
color:#0090E0;
}
-->
</style>
Der Quellcode im Body-Bereich Ihres HTML-Dokuments
Für jedes Bild-Text-Element tragen Sie einen solchen Code-Block ein:
<div class="marke">
<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(briefmarke-01.jpg) #FFFFFF top left no-repeat;
|
Home • Bilder • Fotopräsentation 09
ZIP
)
)