✔ Rahmen um Div-Container

[stain]

Hallo,

ich habe lange rumprobiert, bin aber zu keiner Lösung gekommen. Ich will durch die angehängten Grafiken von Ecken und Kanten einen Rahmen um einen Div-Container ziehen. Ich habe versucht sie zu positionieren, aber zu einem guten Ergebnis bin ich nicht gekommen. Gibt es da vielleicht eine Quellcode-Vorlage, aus der ich mit den vorhandenen Grafiken einen solchen Rahmen erstellen kann? Ich hab' schon bei Google gesucht, aber auch nichts gutes gefunden...

 

[Maik]

Hi,

dann musst du wohl die falschen Suchbegriffe eingegeben haben, denn mit "css rounded corners" oder "grafische abgerundete Ecken mit CSS" spuckt tonnenweise verwendbare Anleitungen aus, um eine Box mit grafisch abgerundeten Ecken auszustatten.

Selbst hier im CSS-Forum finden sich zu der Thematik jede Menge Beiträge, wie z.B. Css Grafiken wie hier die Boxen ?, um nur ein Beispiel zu nennen, denn vor dir haben sich auch schon andere User mit der Technik beschäftigt.

 

[stain]

Da habe ich wohl wirklich falsch gesucht. Jedoch will ich auch noch einen Schatten um diesen Container haben. (siehe angehangene Grafiken) Das ist so viel ich weiß ohne Grafiken nicht möglich.

//Edit:
Oh man, ich habe doch noch was gefunden. Wie ärgerlich, dass ich deswegen jetzt 'nen neuen Thread aufgemacht habe.
http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/index.htm Das benöigt zwar ziemlich viele DIVs aber das ist dann auch egal.
Aber danke Maik!

 

[Maik]

Jedoch will ich auch noch einen Schatten um diesen Container haben. (siehe angehangene Grafiken) Das ist so viel ich weiß ohne Grafiken nicht möglich.

Wenn dir der Einsatz von Javascript nicht ungelegen kommt, kannst du die acht Grafikschnipsel getrost in die Tonne kloppen

1. ShadedBorder: JavaScript Round Corners with Drop Shadow
2. DropShadow Sample

 

[stain]

Ich bin echt zu dumm für Google.^^ Aber dann vertzichte ich lieber auf JavaScript und verwende die Variante, die ich zwei Posts höher bereits verlinkt habe. Sie sieht außerdme gut aus.
Die von dir verlinkten Shadows sehen aber auch schick aus.

 

[stain]

Was muss ich machen, damit ein Hintergrundbild eines DIVs zwar an der oberen Kante ausgerichtet ist, aber einen Abstand von 20px zur unteren Div-Kante haben soll?

 

[Maik]

Ich kenne dein Markup und Stylesheet nicht, wenn es sich aber um ein verschachteltes DIV-Konstrukt handelt, kannst du die erforderlichen Abstände mit der margin- oder padding-Eigenschaft einrichten.

Zur Veranschaulichung kannst du dir ja mal das Beispiel CSS Transparent Frame anschauen, in dem der Autor auf diese Weise das Überlappen der semitransparenten PNGs verhindert hat.