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

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…