Tutorial: Thumbnail

Inhalt

1. Prinzip
2. Quellcode
   1. CSS-Quellcode
   2. HTML-Quellcode
3. Beispiel

Prinzip

In einer Tabellenzeile kann angegeben werden, wie der Text vertikal ausgerichted werden soll. Dies kann man mit CSS simulieren. Es benötigt dafür 3 Elemente welche mit Unterschiedlichen display Werten verändert werden.

Leider unterstütz der Internet Explorer (bis einschliesslich IE7) diese display varianten nicht, jedoch kann ein Fehler in der Engine des IE ausgenutzt werden um den selbigen Effekt zu erzielen:

• Das oberste Element statisch positionieren
• Das Nächste mit position:absolute und mit top:50% vertikal herabsetzen
• Wenn nun das darunterbefindende Element (mit variabler Höhe) mit top:-50% neu positioniert wird, beziehen sich diese 50% fälschlicherweise auf die eigene Höhe!

Quellcode im Detail

CSS

1. ul.thumbnails li {
2. position:relative;/* Damit der IE es richtig anzeigt */
3. display:table;
4. width:200px;
5. height:200px;
6. float:left;
7. margin-left:5px
8. background-color:#000;
9. }

Das Display wird vom IE als block interpretiert, da er den Wert nicht kennt.

Die folgenden Werte sind nur für die schöne Darstellung der Thumbnails vonnöten: width, height, float, marign-left, background-color.

10. ul[class="thumbnails"] li {
11. position:static;
12. }

Für w3c-Kompatible Browser wird position:static wieder zurückgestellt.

13. *+html ul[class="thumbnails"] li {
14. position:relative;
15. }

IE7 Hack-Damit da die Display angaben mit table nicht unterstützt werden

16. ul.thumbnails li a {
17. display:table-cell;
18. width:100%;
19. text-align:center;
20. vertical-align:middle;/* IE */
21. position:absolute;/* IE */
22. top:50%;
23. }

Der Inhalt wird zentriert mit vertical-align:middle. Der IE jedoch benötigt noch weitere Angaben (Siehe Prinzip)

24. ul[class="thumbnails"] li a {
25. position:static;
26. }
28. *+html ul[class="thumbnails"] li a {/* IE7 */
29. position:absolute;
30. }
32. ul.thumbnails li a img {
33. position:relative;
34. top:-50%;
35. }
37. ul[class="thumbnails"] li a img {
38. position:static;
39. }
41. *+html ul[class="thumbnails"] li a img {
42. position:relative;
43. }

HTML

1. <ul class="thumbnails">
2. <li><a href="#"><img src="blubb.bmp" alt="der Blubber in Action" /></a></li>
3. </ul>

Beispiel

Das Beispiel der Thumbnails begutachten

Dieser Code wurde erfolgreich getestet in folgenen Browsern:

• Mozilla Firefox 2.0
• Opera 9
• Netscape 7.2
• Internet Explorer 5/5.5/6/7