Login

#1 (**permalink**) 03-12-2011, 14:35

Guten Tag erst einmal,

ich hätte da ein kleines bis mittelgroßes problem ^^

Ich möchte div wie im folgendenden Bild positionieren.

Nicht nur das es im IE und FF schon eimal unterschiedlich ausschaut, nein ich bekomme es nicht einmal in einem von beiden bisher überhaupt annähernd hin.

Ansicht FF:

Ansicht IE:

An schlimmsten ist es sogar noch im IE da er sogar die Überlagerungsanordnung (z-index) ignoriert.

Also die borduere soll über dem "rechts" sein aber hinter dem "inhalt".
"inhalt" und "rechts" sollen immer nebeneinander sein (auch bei kleinerer Auflösung, so wie wenn man das Browserfenster verkleinert.)

Aber egal was ich bastel und auch einstelle, ich bekomme einfach kein sauberes Ergebnis hin

Ach ja und mir geht es jetzt nicht um die Farben und mir ist auch bekannt das der IE leider Farbverläufe nur Linear und nicht radial kann.

html codebereich:

Code:

</head>

<body>
	<div id="borduere">borduere </div>
			<div style="clear:both;"></div>
<div id="wrapper"> 
	
	<div id="inhalt"> 
 		 <pre>Inhalt</pre>
	</div>

	<div id="rechts"> 
 		 <pre>Rechts </pre>
	</div>

</div>
	<div style="clear:both;"></div>

</body>

CSS codebereich:

Code:

html {
height:100%\9;
}

body {

  padding:0px;

  margin:0px;
  height: 100%;

  		background:-moz-radial-gradient(top, #800032, #F5EDE0);
		background:-webkit-gradient(radial, left top, left bottom, from(#800032), to(#F5EDE0)); 
		background:-webkit-radial-gradient(top, #800032, #F5EDE0); 
		background:-o-radial-gradient(top, #800032, #F5EDE0); 
		background:-ms-radial-gradient(top, #800032, #F5EDE0);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800032', endColorstr='#F5EDE0',GradientType=0 );
		background:radial-gradient(top, #800032, #F5EDE0); 
		background-attachment:fixed; 
  font-family:Verdana,Arial,Helvetica,sans-serif;

  color:#F5EDE0;

}

#borduere{
	position: absolute;
	z-index:2;
	top: 170px;
	width: 100%;

  	height:110px;
  	margin:0px 0px;

  		background-color:#464646;
  		opacity: 0.8;
  		filter:alpha(opacity=80);
}

#wrapper {	
//position: absolute;
width: 945px;
margin: auto; 
min-height: 100%;
height:auto !important;/
height:100%;
overflow: hidden !important;
}

#inhalt {
	position: relative;
	float: left;
	z-index:3;
	top:330px;
  	width:500px;

  	min-width:120px;
  	min-height:600px;

  	left: 200px;  
  	padding:0px;

	margin:-110px auto; 	
  		background:-moz-linear-gradient(top, #F5EDE0, #800032);
		background:-webkit-gradient(linear, left top, left bottom, from(#F5EDE0), to(#800032));
		background:-webkit-linear-gradient(top, #F5EDE0, #800032); 
		background:-o-linear-gradient(top, #F5EDE0, #800032);
		background:-ms-linear-gradient(top, #F5EDE0, #800032);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5EDE0', endColorstr='#800032',GradientType=0 );
		background:linear-gradient(top, #F5EDE0, #800032); 
		background-attachment:fixed; 
  	font-family:Verdana,Arial,Helvetica,sans-serif;

  	color:#F5EDE0;

}


#rechts {

	position:relative;
	float: left;

  	z-index:1;
  	top:20px;
  	width:200px;
  	height:700px;
  	text-align:center;

  		background:-moz-linear-gradient(top, #800032, #F5EDE0); 
		background:-webkit-gradient(linear, left top, left bottom, from(#800032), to(#F5EDE0));
		background:-webkit-linear-gradient(top, #800032, #F5EDE0);
		background:-o-linear-gradient(top, #800032, #F5EDE0);
		background:-ms-linear-gradient(top, #800032, #F5EDE0);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800032', endColorstr='#F5EDE0',GradientType=0 );
		background:linear-gradient(top, #800032, #F5EDE0);
		background-attachment:fixed; 
  		opacity: 0.6;
  		filter:alpha(opacity=60);
  

}

Also über Hilfe wäre ich sehr dankbar.

#2 (**permalink**) 03-12-2011, 16:03

Worked as designed. Das Beispiel sieht genau so aus, wie du es mit deinem CSS-Anweisungen vorgegeben hast.

Gib dem #rechts erst mal eine Positionsangabe mit left: irgendwas. Und der z-index wird bei mir korrekt dargestellt. Habs aber nur im IE8 getestet. Wenn garnichts mehr hilft, verpass den inneren div-Elementen ein position: absolute.

Peter

Login

PHP News

Aktuelle PHP Scripte