Tweet
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:
CSS codebereich:
Also über Hilfe wäre ich sehr dankbar.
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>
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);
}
Kommentar