[R.Carlos]

Hallo zusammen,
ich habe ein kleines Problem. Ich möchte eine Box erstellen in der mein Text erscheint. Diese Box sollte rumherum einen Schalgschatten besitzen.
Wenn ich das die mit einer Tabelle erstelle, funktioniert das einwandfrei (mit Hintergrundbildern). Kann man sowas auch mit css erstellen?

Ich dachte, dass würde mit dem gleichen Prinzip funktionieren, wie mit einer Box mit abgerundeten Ecken (das geht super). Allerdings bekomme ich das m it dem Schlagschatten irgendwie nicht hin.

Kann mir da vielleicht jemand weiterhelfen?

Gruß
R.Carlos

[heiko_rs]

Du erstellst eine entsprechende Grafik, schneidest aus der Mitte (vertikal) einen 1px hohen Teil (mit voller Breite) heraus, weist diesen einem div als Hintergrund zu, und dann dem ersten ersten Element innerhalb des divs (z.B. <h1>) den oberen Teil der Grafik, und dem letzten (z.B. <p id="bottom">) den unteren.

[R.Carlos]

Hallo Heiko,
vielen Dank für deine schnelle Antwort.
Setzt deine Beschreibung nicht voraus, dass die Box eine Feste Breite hat?
Ich hätte das gerne variabel. Also je mehr Text in der Mitte steht desto höher wird die Box. Ist das auch irgendwie machbar?

Gruß
R.Carlos

[heiko_rs]

Zitat von R.Carlos

Setzt deine Beschreibung nicht voraus, dass die Box eine Feste Breite hat? Ich hätte das gerne variabel. Also je mehr Text in der Mitte steht desto höher wird die Box

Was genau? Die Höhe ist bei meinem Beispiel variabel; wenn auch die Breite variabel sein soll, muß man etwas mehr "tricksen".

[R.Carlos]

sorry. Jep...die Breite soll variable sein. Dabei dennoch den Schatten links und rechts haben.

[heiko_rs]

Okay, dann noch die Frage "Lieber mehr Markup oder lieber teilweise etwas größere Grafiken"? ("größer" ist hier relativ, ich schätze maximal 3 KB für die größte.) Oder ein Mittelweg?

[R.Carlos]

Wie es am besten passt. Was würdest du den empfehlen?
Sorry bin da nicht so der Experte. Fange gerade erst an mit CSS.

[heiko_rs]

Also mal ein Mittelweg. Du erstellst eine passende Grafik in maximal zu erwartender Breite (z.B. 1600px), aus der Du Dir dann die einzelnen Teile schneidest.

Dann nimmst Du 2 divs, ineinander verschachtelt. Das äußere bekommt die Hintergrundfarbe und den linken Schatten, in Form einer 1px hohen und ca. 15px (natürlich je nach Schatten) breiten Grafik mit repeat-y left top. Das innere div bekommt die entsprechende Grafik für rechts (right top).

Dann folgen die Ecken. Dafür nimmst Du <h1> in der Form <h1><span>Überschrift</span></h1>. <h1> bekommt die Ecke links oben, ca. 10px hoch und in der vollen Breite (1600px). <span> wird als Block dargestellt und bekommt die Ecke oben rechts (ca. 10px hoch und 15px breit).

Und nach demselben Prinzip auch die unteren Ecken (im letzten Absatz).