Schattengrafik an eine größen-dynamische Box anbringen

Grille

Grille

Erfahrenes Mitglied
Hallo,

Wie im Titel Beschrieben möchte eich an eine Box (div) außen Schatten anbringen. Der Schatten ist nicht gleichmäßig und muss daher in (wahrscheinlich drei verschiedene Teile geteilt werden.

Um das gnaze zu verstehen, ist es besser sich jetzt die zwei Grafiken anzusehen die im Anhang sind.

mein Problem ist jetzt die Spalte die mit den 3 Teilen "Teil A", "Teil B" und "Teil C" beschriftete sind. Wahrscheinlich würde ich alle 3 Teile in ein DIV legen und dann durch CSS-Formatirung versuchen die Position und Größen festzulegen.

Da aber die Box an welcher der Schatten grenzen soll in der Höhe dynamisch ist, weiss ich nicht wie ich das umsetzen soll. "Teile A" ist wahrscheinlich unproblematisch: er soll eine feste größe haben und standartmäßig oben stehen. Bei "Teil B" ist es schon komplizierter, da diese Box eine feste größe hat und am Fußende der umfassenden Box steht. "Teil C" soll zwischen beiden stehen und den leeren Raum auffüllen.

Der Schatten besteht aus halbtransparenten png-Grafiken ... also kann man nicht die Boxen übereinanderlegen, weil sich sonst die Schatten überlagern.

Wie kann man die Div-Boxen positionieren?

Gruß Grille.
 

Anhänge

  • 01_Vorschau.jpg
    01_Vorschau.jpg
    110,8 KB · Aufrufe: 91
  • 02_Aufteilung.jpg
    02_Aufteilung.jpg
    115,3 KB · Aufrufe: 88
Hallo spicelab,

danke für die Antwort. Ich habe die beiden Seiten durchgeschaut, aber ich glaube das keine der Beiden eine Lösung ist:
zu erstens: sehr interessant, aber leider nur für einen "einfachen Schatten"
wie du in meinem Vorschaubild siehst, habe ich nur an den Ecken einen Schatten .. also einen unregelmäßigen Schatten.
zu deinem zweiten Link: einzelne Grafiken zu erstellen und dann zusammenzufügen wäre sonst auch meine Wahl, aber in meinem Fall macht sich das nicht, da dann der Footer und der Header 300 px hoch wäre ...
 
Der zweite Link dient lediglich dazu, die CSS-Technik zu studieren (margin- / padding-Regeln), die das Überlappen der DIV-Blöcke an den Ecken vermeidet, das sie ebenfalls halbtransparente PNG-Hintergrundbilder besitzen.
 
OK .. verstehe .. der zweite Link bringt mich vielleicht doch auf die richtige Idee .. danke .. ich melde mich wenn es geklappt hat.
 
Also .. ich habe versucht es nach der oberen Beschreibung umzusetzen, aber leider ohne Erfolg. der Grund ist, dass dort verschiedene Padding und Margin angegeben werden müssen, die dann den Contentbereich verschieben. Daher habe ich Die ganze Geschichte mit DIV-Boxen-Layout nachgebaut. Die Bereiche die variabel sein sollen habe ich gefährbt und auch im CSS und HTML markiert

Natürlich sind alle Grafiken enthalten.

Am wichtigsten ist die variable Höhenabhängigkeit. Die Breit kann man zur Not auch für jedes Projekt seperat angeben.
 

Anhänge

Grille hat gesagt.:
Also .. ich habe versucht es nach der oberen Beschreibung umzusetzen, aber leider ohne Erfolg. der Grund ist, dass dort verschiedene Padding und Margin angegeben werden müssen, die dann den Contentbereich verschieben. Daher habe ich Die ganze Geschichte mit DIV-Boxen-Layout nachgebaut.
Zum Vergrößern anklicken....
Die Geschichte http://www.paulhaxter.com/2008/07/25/cssframe/ ist ebenfalls ein DIV-Boxen-Layout, nur mit ineinander verschachtelten <div>-Elementen, die gewährleisten, dass sich die 4 mittleren Rand-Boxen (oben, rechts, unten, links) wie von dir gewünscht verhalten.

Wenn bei dir der Inhaltsbereich durch die padding-/margin-Regeln verschoben wird, ist dir wohl ein Fehler bei den einzelnen Wertzuweisungen unterlaufen.

Im Demo sind alle Grafiken 10*10px dimensioniert - bei dir tauchen aber ganz andere Dimensionen bei den Eckgrafiken auf, wie z.B. "279*12px", was dann auch in den Außen- und Innenabständen entsprechend berücksichtigt werden müsste.

Es gibt aber noch weitere Techniken, die z.T. auch mit weniger Grafiken auskommen - das Thema ist hier zwar "Runde Ecken", aber das Grundprinzip bleibt das gleiche:

 
Zuletzt bearbeitet:
Ich habe mich jetzt nochmal intensiv mit dem Beispiel von "paulhaxter" auseinandergesetzt (neun Grafiken: je für eine Ecke und je für eine Seite und die Mitte). Ich glaube es könnte klappen! Den oberen Teil konnte ich so nodifizieren, dass er Fehlerfrei dargestellt wird, nur bei dem Unteren Teil habe ich 3 Stunden vergebens rumprobiert. Die Ecken unten sind an der richtigen Position, doch leider werden die seitlichen Rand-Grafiken, und die untere Rand-Grafik über die Ecken gelegt.

Das Problem bei dem Beispiel von "paulhaxter" ist, dass alle Grafiken 10x10 Pixel gross sind. Daher ist es im CSS nicht möglich anhand des Maßes zu ergründen, welche Einstellung gerade vorgenommen wird.

Kann mir jemand helfen die richtige margin-padding-Konfiguration zu finden?
 

Anhänge

Zuletzt bearbeitet:
Grille hat gesagt.:
Das Problem bei dem Beispiel von "paulhaxter" ist, dass alle Grafiken 10x10 Pixel gross sind. Daher ist es im CSS nicht möglich anhand des Maßes zu ergründen, welche Einstellung gerade vorgenommen wird.
Zum Vergrößern anklicken....
Das lässt sich doch bei jedem einzelnen <div> anhand der 4 margin-/padding-Wertzuweisungen nachvollziehen, die im Uhrzeigersinn oben beginnen, also top, right, bottom und left.
 
Also ich verstehe es nicht:

1. DIV-Schachtel: "frame_bl" Ecke unten links / kein margin / kein padding
2. DIV-Schachtel: "frame_br" Ecke unten rechts / kein margin / kein padding
3. DIV-Schachtel: "frame_tl" Ecke oben links / kein margin / kein padding
4. DIV-Schachtel: "frame_tr" Ecke oben rechts / kein margin / padding: 10px 10px 10px 10px
(wahrscheinlich um die nun folgenden Kanten jeweils um 10px nach innen zu rücken)
5. DIV-Schachtel: "frame_tc" Seite oben / margin: -10px 0px -10px 0px / kein padding
(div wird oben und unten wieder zurückgerückt um padding von 4. auszugleichen)
6. DIV-Schachtel: "frame_bc" Seite unten / kein margin / padding: 10px 0px 10px 0px
(padding oben und unten damit Seitenkanten nicht über die ecken gucken)
7. DIV-Schachtel: "frame_cr" Seite rechts / margin: 0px -10px 0px -10px / kein padding
(div wird links und rechts wieder zurückgerückt um padding von 4. auszugleichen)
8. DIV-Schachtel: "frame_cl" Seite links / kein margin / padding: 10px 10px 10px 10px
(padding damit das Zentrum nicht über die Ecken guckt?)
9. DIV-Schachtel: "frame_cc" mitte / margin: -10px 0px -10px 0px / padding: 2px
(margin?)

meine Übertragung
1. DIV-Schachtel: "frame_bl" Ecke unten links / kein margin / kein padding
2. DIV-Schachtel: "frame_br" Ecke unten rechts / kein margin / kein padding
3. DIV-Schachtel: "frame_tl" Ecke oben links / kein margin / kein padding
4. DIV-Schachtel: "frame_tr" Ecke oben rechts / kein margin / padding: 322px 353px 277px 353px
(Grafikhöhe oben 322, Grafikbreite links und rechts 353 und Grafikhöhe unten 277)
5. DIV-Schachtel: "frame_tc" Seite oben / margin: -322px 0px -277px 0px / kein padding
(div wird oben und unten wieder zurückgerückt um padding von 4. auszugleichen)
6. DIV-Schachtel: "frame_bc" Seite unten / kein margin / padding: 322px 0px 277px 0px
(padding oben und unten damit Seitenkanten nicht über die ecken gucken)
7. DIV-Schachtel: "frame_cr" Seite rechts / margin: 0px -353px 0px 353px / kein padding
(div wird links und rechts wieder zurückgerückt um padding von 4. auszugleichen ?)
8. DIV-Schachtel: "frame_cl" Seite links / kein margin / padding: 10px 10px 10px 10px
(padding damit das Zentrum nicht über die Ecken guckt?)
9. DIV-Schachtel: "frame_cc" mitte / margin: -322px 0px -277px 0px / padding: 20px
(margin?)

Nach diesen Einstellungen sieht der obere und untere Bereicht gut aus, aber die Seiten rechts und links und auch das Zentrum sind verschoben.

Code: 
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS Transparent Frame</title>
		<style type="text/css">
.frame {
position: relative;
width:900px;
}
.frame div {
position: relative;
background-image: url('images/leftbottom.png');
background-position: bottom left;
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.frame div div {
position: relative;
background-image: url('images/rightbottom.png');
background-position: bottom right;
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.frame div div div {
position: relative;
background-image: url('images/lefttop.png');
background-position: top left;
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
.frame div div div div {
position: relative;
background-image: url('images/righttop.png');
background-position: top right;
background-repeat: no-repeat;
padding: 322px 353px 277px 353px;
margin: 0px 0px 0px 0px;
}
.frame div div div div div {
position: relative;
background-image: url('images/topside.png');
background-position: top center;
background-repeat: repeat-x;
padding: 0px 0px 0px 0px;
margin: -322px 0px -277px 0px;
}
.frame div div div div div div {
position: relative;
background-image: url('images/bottomside.png');
background-position: bottom center;
background-repeat: repeat-x;
padding: 322px 0px 277px 0px;
margin: 0px 0px 0px 0px;
}
.frame div div div div div div div {
position: relative;
background-image: url('images/rightside.png');
background-position: center right;
background-repeat: repeat-y;
padding: 0px 0px 0px 0px;
margin: 0px -353px 0px 353px;
}
.frame div div div div div div div div {
position: relative;
background-image: url('images/leftside.png');
background-position: center left;
background-repeat: repeat-y;
padding: 10px;
margin: 0px 0px 0px 0px;
}
.frame div div div div div div div div div {
position: relative;
background-image: url('images/frame_cc.png');
background-position: center center;
background-repeat: repeat;
padding: 20px 20px 20px 20px;
margin: -322px 0px -277px 0px;
height:760px;
}
.frame div div div div div div div div div div {
position: relative;
background-image: none;
background-position: top left;
background-repeat: repeat;
padding: 0px;
margin: 0px;
}
		</style>
	</head>
	<body>

		<div class="frame">
		<div><div><div><div><div><div><div><div><div>
		This is my frame content.<br />
		This is my frame content.<br />
		This is my frame content.<br />
		This is my frame content.<br />
		</div></div></div></div></div></div></div></div></div>
		</div>

	</body>
</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück