Schattengrafik an eine größen-dynamische Box anbringen

Ich glaube ich habe im CODE einen Fehler gefunden:
7. DIV-Schachtel: "frame_cr" Seite rechts / margin: 0px -353px 0px 353px / kein padding
muss sein:
7. DIV-Schachtel: "frame_cr" Seite rechts / margin: 0px -353px 0px -353px / kein padding
 
OK .. stimmt so .. danke für die Hilfe!

Grafiken aus Version2 ... und Breite aus .frame herrausnehmen sowie Höhe aus vorletzer CSS-Klasse entfernen; dann sollte eine dynamische veränderung möglich sein - braucht aber mindesthöhe und Breite.

Gruß, Grille.
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: 12px 23px 30px 23px;
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>
 
Grille hat gesagt.:
Grafiken aus Version2 ... und Breite aus .frame herrausnehmen sowie Höhe aus vorletzer CSS-Klasse entfernen; dann sollte eine dynamische veränderung möglich sein - braucht aber mindesthöhe und Breite.
Zum Vergrößern anklicken....
Wie wäre es dann hiermit?

CSS: 
.frame {
position: relative;
min-width:900px; /* anstatt width:900px */
}

...

.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;
min-height:760px; /* anstatt height:760px */
}
 
Nach meinem Verständnis wird min-height & min-widht nicht von allen Browsern verstanden. Hatte aber auch schon die Überlegung diesen Wert anzugeben ...

im Anhang die überarbeitete und optimierte Version
 

Anhänge

Für die, die es nutzen wollen:

Ich hatte Probleme den Schatten in mein eigentliches Projekt einzubauen. Grund war offensichtlich, dass Eigenschaften der Schattendefinition in den Inhaltsbereicht der eigentlichen Webseite übernommen wurden.

Die Lösung brachte bei mir das eindeutige benennen der einzelnen DIV-Layer und Die Zuweisung der Eigenschaften dann über diesen eindeutigen Namen:

HTML
Code: 
<div id="page">
	<div id="box1"><div id="box2"><div id="box3"><div id="box4"><div id="box5"><div id="box6"><div id="box7"><div id="box8"><div id="box9">
		<div id="header"></div>
		<div id="content"><!-- ###CONTENT### start --> <!-- ###CONTENT### stop --></div>
	</div></div></div></div></div></div></div></div></div>
</div>

CSS (Pfadangaben der Grafiken aus meinem Projekt!)
Code: 
#page { width:871px; margin: 100px auto 0px auto; text-align:left;}
	/*#shadow {
		min-width:707px;	minimale Breite sollte 707px sein
		width:871px;		oder statisch / minimale Breite sollte 707px sein
	}*/
	#box1 { background: url("../img/shadow/leftbottom.png") bottom left no-repeat; }
	#box2 { background: url("../img/shadow/rightbottom.png") bottom right no-repeat; }
	#box3 { background: url("../img/shadow/lefttop.png") top left no-repeat; }
	#box4 { background: url("../img/shadow/righttop.png") top right no-repeat; padding: 322px 353px 277px 353px; margin: 0; }
	#box5 { background: url("../img/shadow/topside.png") top center repeat-x; padding: 0; margin: -322px 0px -277px 0px; }
	#box6 { background: url("../img/shadow/bottomside.png") bottom center repeat-x; padding: 322px 0px 277px 0px; margin: 0; }
	#box7 { background: url("../img/shadow/rightside.png") center right repeat-y; padding: 0; margin: 0px -353px; }
	#box8 { background: url("../img/shadow/leftside.png") center left repeat-y; padding: 12px 23px 30px 23px; margin: 0; }
	#box9 { background:#9b95c9; padding: 0px 0px 0px 25px; margin: -322px 0px -277px 0px;
		/*min-height:588px;  minimale Höhe sollte 588px sein*/
		/*height:700px;  oder statisch / minimale Höhe sollte 588px sein*/
	}

Das weglassen der Angabe "Position: relative" hatte im Firefox keine Auswirkung; IE & CO noch nicht getestet.

Zum IE6: sicher wird es da nicht richtig dargestellt. ABER ich habe damit aufgehört für nun schon 10 Jahre alte Browsertechnologie Stundenlang am CODE rumzufrikeln! Stattdessen bekommen User dieses Browsers eine Nachricht auf den Bildschirm, welche Sie auch über Sicherheitslücken aufklärt. Würde mich freuen wenn andere Webentwickler in Zukunft auch so Handeln damit diese IE-Fehler-Pest endlich ausgerottet wird!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück