Effekte im Trend

Das CSS -Grundgerüst

Die Eigenschaft overflow: hidden wird dafür sorgen, dass eine nach unten gleitende Beschreibung außerhalb der Bildminiatur im Nichts verschwindet.

.grosse_abbildung h2 {
font-size: 2em;
font-weight: normal;
margin: 0 0 5px;
padding: 10px;
}
.grosse_abbildung p {
font-size: 1.2em;
line-height: 1.6em;
padding: 10px;
margin: 0;
}

Der CSS-Stil .block small wird später auch auf die Miniaturabbildungen angewendet.

.block small
font-size: 1em;
padding: 0 0 0 20px;
background: url(icon_calendar.gif)
no-repeat 0 center;
}

Ein Element der Klasse .beschreibung wird am unteren Rand des Haupt-Containers absolut positioniert. Außerdem wird zudem mittels display: none die Beschreibung standardmäßig ausgeblendet, sofern im Webbrowser Javascript aktiviert ist.

.grosse_abbildung .block small
{margin-left: 10px;}
.grosse_abbildung .beschreibung{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: none;
}
.grosse_abbildung .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
}

Das Kontrollelement in Form einer Registerkarte zum Ein- und Ausblenden der Beschreibung verdankt sein Aussehen in den zwei möglichen Zuständen dem folgenden Code:

.grosse_abbildung a.collapse {
background: url(btn_collapse.gif) no-
repeat left top;
height: 27px;
width: 93px;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
}
.grosse_abbildung a.show {background-
position: left bottom;}

Jetzt folgt der CSS-Abschnitt für Miniaturbilder, der den Miniaturbildern am rechten Rand das Aussehen ebenfalls CSS-gesteuert verleiht:

.miniaturbilder {
float: left;
width: 299px;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
}
.miniaturbilder img {
border: 1px solid #ccc;
padding: 5px;
background: #fff;
float: left;
}
.miniaturbilder ul{
margin: 0;
padding: 0;
list-style: none;
}
.miniaturbilder ul li{
margin: 0;
padding: 12px 10px;
background: #f0f0f0 url(nav_a.gif)
repeat-x;
width: 279px;
float: left;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
border-right: 1px solid #ccc;
}

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…