nicht angemeldet
DIV-Layer mit Schatten
Hi,
ich würde gerne einem DIV-Layer Schatten verpassen mit Grafiken. Ich frage mich wie ich das am besten mache.
Es sollte so aussehen, dachte ich. Innen das ist das eigentlich DIV-Layer, außen rum das der Schatten.
-----------------------
| | | |
-----------------------
| | | |
| | | |
| | Inhalt | |
| | | |
| | | |
-----------------------
| | | |
-----------------------
An die Ecken kommt dann jeweils eine Grafik mit Schatten (immer dieselbe, nur anders ausgerichtet). An den Rand kommt auch eine Schattengrafik.
Ist das so die beste herangehensweise? Ich hab mir auch bei SelfHTML das Tutrioal zu "abgerundete Boxen" angesehen, dort wurden nur 4 Grafiken verwendet. Eine davon aber sehr groß, was ich nicht so für sinnvoll erachte.
Mach ich obiges Bildchen lieber als tabelle oder mit divs irgendwie??
oder doch ganz anders. (vll. doch eher nur mit 4 Divs)
Der Inhalt in der Mitte sollte in Höhe und Breite vollkommen variable sein.
Gruß
Christian
-
Hi Christian!
Ist das so die beste herangehensweise? Ich hab mir auch bei SelfHTML das Tutrioal zu "abgerundete Boxen" angesehen, dort wurden nur 4 Grafiken verwendet. Eine davon aber sehr groß, was ich nicht so für sinnvoll erachte.
Die besagte gif-Grafik hat eine Dateigröße von 4.48 KB. Das hat man selbst per Modem sehr schnell geladen. Ich sehe dort also keinerlei Nachteil.
mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"And all those exclamation marks, you notice? Five? A sure sign of someone who wears his underpants on his head."
(Terry Pratchett)-
Hi,
Die besagte gif-Grafik hat eine Dateigröße von 4.48 KB. Das hat man selbst per Modem sehr schnell geladen. Ich sehe dort also keinerlei Nachteil.
Zumal man, abhaengig vom Einsatz, auch kleinere Grafiken verwenden kann. (Oder sogar groessere verwenden muss...)
Auf alle Faelle ist es so besser als jedes Tabellenlayout, das hier gar nicht verloren hat.
-
-
Moin Christian...
ich würde das ganze als Tabelle und CSS lösen und diese dann in ein DIV packen.
Damit das mit den transparenten Schatten optisch gut aussieht, würd ich alle Bilder
als PNG verwenden und dann lieber für den IE im CSS den entsprechenden Filter
(AlphaImageLoader) definieren.--DIV-----------------------
| |
| --TABLE--------------- |
| | 1a | 1b | 1c | |
| ---------------------- |
| | | | | |
| | | | | |
| | 2a | 2b | 2c | |
| | | (Image) | | |
| | | | | |
| ---------------------- |
| | 3a | 3b | 3c | |
| ---------------------- |
| |
----------------------------Wenn Du die Zellen zwischen den Ecken mit repeat-x bzw repeat-y definierst, kannst
Du winzig kleine Grafiken einsetzen. Außerdem passt sich der Schatten "automatisch" an
jede Bildgröße in 2b an.Macht für den Schatten-Rahmen 8 PNGs - bei mir zusammen 1.7 kb.
Möchtest Du später via JS das Bild in 2b austauschen, kommst Du über das umschließende
DIV und bei Vergabe entsprechende IDs jederzeit an die Tabellenzelle ran, brauchst
dich aber um die Schatten selbst nicht weiter kümmern.Grüße, dicon