Für die absoluten CSS Freaks - Flexible, schattierte Div Box (mehrere Hintergründe)

Andi22 · #1 (**permalink**) 21.05.2009, 12:43

Hallo CSS-Freaks,

ich bin einer von denjenigen, die das mit dem "man darf überhaupt keine Tabellen fürs Layout hernehmen" nicht ganz so genau nehmen - prinzipiell würde ich gerne auf Tabellen beim Layout verzichten, doch es gibt Spezialfälle, wo es meiner Meinung nach mit einem Div Layout browserunabhängig (IE7, FF, Safari und Chrome - den IE 6 lassen wir mal weg) praktisch unmöglich ist. So einen Spezialfall hab ich hier, denke ich. Ich will eine flexible (Höhe und Breite soll sich dem Inhalt anpassen) Inhaltsbox, die von einem schattierten Rand umgeben ist - ein Bild als Beispiel:

Der Markup Code im Tabellenlayout dafür sieht so aus:

HTML-Code:

<table cellpadding="0" cellspacing="0" style="margin-top: 10px;">
  <tr>
    <td class="contentbox">Das ist ein Inhalt der ungefähr 300 Pixel breit ist<br />Das ist ein Inhalt<br />Das ist ein Inhalt<br />Das ist ein Inhalt<br />Das ist ein Inhalt<br />Das ist ein Inhalt<br />Das ist ein Inhalt<br />Das ist ein Inhalt<br />Das ist ein Inhalt<br />Das ist ein Inhalt</td>
    <td class="right"></td>
  </tr>
  <tr>
    <td style="height: 4px" valign="top">
      <table cellpadding="0" cellspacing="0" style="width: 100%">
        <tr>
          <td class="bottomleft">&nbsp;</td>
          <td class="bottomcenter">&nbsp;</td>
        </tr>
      </table>
    </td>
    <td class="bottomright"></td>
  </tr>
</table>

Der zugehörige CSS Code

Code:

.contentbox {
	border: solid 1px #A4A4A4;
	background-color: white;
	padding: 5px;
	vertical-align: top;
}

td.right {
	width: 3px;
	background-image: url("../img/contentbox/right.png");
	font-size: 1px;
}

td.bottomleft {
	width: 6px;
	height: 4px;
	background-image: url("../img/contentbox/bottomleft.png");
	background-repeat: no-repeat;
	font-size: 1px;
}

td.bottomcenter {
	height: 4px;
	background-image: url("../img/contentbox/bottomcenter.png");
	background-repeat: repeat-x;
	font-size: 1px;
}

td.bottomright {
	width: 3px;
	height: 4px;
	background-image: url("../img/contentbox/bottomright.png");
	background-repeat: no-repeat;
	font-size: 1px;
}

Um so einen Schatteneffekt einer Box hinzubekommen, sind mehrere Hintergrundbilder notwendig, nämlich:
righttop.png - rechte obere Ecke
rightcenter.png - rechter Rand
bottomright.png - rechte untere Ecke
bottomcenter.png - unterer Rand
bottomleft.png - linke untere Ecke

Im Tabellenlayout wird die righttop.png und rightcenter.png zusammengefasst in einer right.png verwendet.

Alle Bilder findet ihr hier

Mich würde es freuen, wenn es einer von euch in einer div genauso hinkriegt, wie es mit der Tabelle funktioniert.

Viel Spaß beim Tüfteln!

philosapiens · #2 (**permalink**) 21.05.2009, 14:44

Hi,

schöne Sache, doch gefallen mir Tabellenlayouts eher weniger.
Ich finde folgende Idee zwar vom Code her etwas viel, aber das Ergebnis ist meiner Meinung nach sehr ansehnlich:

Der Weg:
Cascading Style Sheets { Tutorials : Schatten mit CSS }

Das Ziel:
Cascading Style Sheets { CSS-Schatten : Beispiel 8 }

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
DIV in DIV BOX	party	CSS	1	24.08.2007 16:20
div box bekomme ich nett zentriert???	Hard@Bowl	CSS	1	23.05.2005 11:22
css einsteiger div zentrieren..	Holger (HMR)	CSS	10	13.11.2004 16:23
#boxes a:hover.info: 2.posting mit css !!!	marioN	CSS	5	25.01.2004 17:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac,	marioN	CSS	2	19.01.2004 17:17