Thomas Luethi: schatten um grafiken

Beitrag lesen

Hallo Georg,

ich versuche derzeit erfolglos, einen vorgefertigten schatten in form von grafiken um ein bild zu legen. es soll ein mitarbeiterverwaltungssystem grafisch aufgepeppt werden. die bilder der mitarbeiter sind aber variable in höhe und breite. weiss jemand, wie man soetwas hinbekommt ? ich habe es mit tabellen versucht, aber die einzelnen elemente der schattengrafik werden nicht bündig eingefügt.

für tipps jederzeit dankber,

Schau mal meine folgende Testseite an:
http://www.tiptom.ch/tests/css/rahmen/bilderrahmen1_01.html

Dort verwende ich eine 3x3-Tabelle. In der mittleren Zelle steht der eigentliche Content (Bild, Text), die auesseren Zellen enthalten als eigentlichen Inhalt Blind-GIFs, als Hintergrund-Grafik die Rahmen-Grafiken.

Damit die Bilder in Tabellenzellen "buendig" sind, musst Du einerseits in HTML sagen, dass die Zellen kein Padding und Spacing haben sollen:
<table border="0" cellspacing="0" cellpadding="0">

Andererseits kannst Du das auch in CSS sagen:
table { border:0; border-spacing:0; }
td { border:0; padding:0; }

Fuer Mozilla 1.0 und fuer Netscape ab 7 (6?) muss man zudem sagen, dass Bilder, die in Tabellenzellen stehen, diese als "Block" ganz ausfuellen sollen:
td img { display:block; }

Die ganzen Loesungen mit Tabellen sind natuerlich "Missbrauch von HTML zu Layout-Zwecken". Ob Du sowas wirklich willst, ist Deine Sache.

Eine saubere und einfache Loesung mit aktuellem CSS (Level 1/2) gibt es nicht.
Allenfalls koenntest Du statt einer Tabelle etwas entsprechendes mit vielen DIV-Elementen machen, aber das faende ich noch viel schlechter.

Mit CSS Level 4 wird es vielleicht moeglich sein, fuer jedes Objekt einzelne Rahmen-Grafiken fuer oben/unten/rechts/links sowie fuer die 4 Ecken anzugeben.
In der aktuellen Diskussion fuer das Box-Model in CSS Level 3 ist sowas jedenfalls noch nicht vorgesehen:
http://www.w3.org/TR/css3-box/#the-border

Meine weiteren Testseiten mit "Rahmen" findest Du unter:
http://www.tiptom.ch/tests/css/rahmen/

HTH, mfg
Thomas