css
-
Hallo zusammen,
habe angefangen mit css zu beschäftigen, um endlich vom Tabellendesign loszukommen. Dabei bin ich auf eine merkwürdige Sache gestoßen. Und zwar geht möchte ich so Kästchen machen, die aber oben rechts, oben links, unten rechts und unten links verschiedene Ecken (aus Bildern) haben. Damit klar wird wie ich das meine, in "Tabellen" hätte ich das so gemacht:
<table> <tr> <td><img src="obenlinks.jpg"></td> <td></td> <td><img src="obenrechts.jpg"></td> </tr> <tr> <td></td> <td>inhalt des kastens</td> <td></td> </tr> <tr> <td><img src="untenlinks.jpg"></td> <td></td> <td><img src="untenrechts.jpg"></td> </tr> </table>
also beispielsweise so:
+------\ | | =------/
dafür hab ich jetzt zig styletypen anlegen müssen, damit das mit css ging. war also erheblich aufwendiger als tabellen. das is aber doch nicht das ziel von css, also hab ichs wohl nicht so ganz richtig gemacht. hat einer vielleicht n kurzes beispiel / link / tipp, wie mans richtig macht?
BTW: Ist es eigentlich schlechter Stil divs zu schachteln? Ich dachte, Tabellen wären unter anderem so mies, weil man die ständig schachteln muss, um was gebacken zu kriegen. Musste das aber nu bei divs auch machen.. Oder is das ein Designfehler?
Viel Grüße!
-
hab grad noch was gefunden, http://roundedbox.andreas-kalt.de/ , is aber leider down... kennt einer n mirror?
-
-
okay, dankeschön, das hilft mir schonmal weiter, aber wie mache ich es denn dann, wenn ich folgendes kodieren will:
<table> <tr> <td><img src="obenlinks.jpg"></td> <td background="linie_unten.jpg">Titel</td> <td><img src="obenrechts.jpg"></td> </tr> <tr> <td></td> <td>inhalt des kastens</td> <td></td> </tr> <tr> <td><img src="untenlinks.jpg"></td> <td></td> <td><img src="untenrechts.jpg"></td> </tr> </table>
was dann ungefähr so aussehen sollte:
+----------+ | Titel | |----------| | Text | | Text | | Text | +----------+
bei der Tabelle hätte ich ausnutzen können, dass die linie_unten.jpg gekachelt wird und ich somit nur einen 1 Pixel breiten Streifen als Bild nehmen können. Hab den Artikel unter dem Link, den ich noch gepostet hab, doch noch gefunden. Da wurde zwar eine Lösung beschrieben, aber dafür muss man relativ große Bilder verwenden, wenn man verschiedene Breiten der Kästchen verwenden will. Bei der Tabellenlösung wäre es ja weniger Bildmaterial, was man braucht.
Ich mein klar, dass macht im Endeffekt durch komprimieren nicht viel aus, aber es wird ja auch irgendwie gehen, und wenn, dann will ich es auch ordentlich haben.
Viele Grüße!
-
Packe den Titel doch in ein weiteres DIV, das du innenrein schachtelst. Bei diesem setzt du dann einfach dein border-bottom entsprechend