Sprint
Erfahrenes Mitglied
Hallo zusammen,
der IE treibt mich mal wieder zum Wahnsinn. Der Designer meinte mal wieder, einen zweifarbigen Hintergrund bauen zu müssen. Mit zwei entsprechend eingefärbten Blöcken und einem überlagerten Bild funktioniert das eigentlich. Wenn da nicht der IE wäre, bei dem 2 x 50% > 100% sind. Wenn die beiden Blöcke je 50% haben, kann er die nicht nebeneinander stellen, sondern nur dann, wenn sie z.B. 49% haben. Damit kann man noch leben, auch wenn es mal wieder typisch ist.
Das als Vorgeschichte, warum der Kopfbereich so merkwürdig aufgebaut ist. Der eigentliche Content Bereich soll nun aber wiederum den Kopfbereich überlagern. auch das funktioniert in jedem normalen Browser (siehe Screenshot), außer dem IE. Die Überlagerung kriegt er ja noch hin, aber weder ist der Bereich zentriert, noch stimmen die darin eingebetteten Teile (siehe 2. Screenshot). Vielleicht habe ich es auch mal wieder viel zu kompliziert gemacht, aber irgendwie bin ich im Moment völlig ratlos, wo das Problem liegt.
der IE treibt mich mal wieder zum Wahnsinn. Der Designer meinte mal wieder, einen zweifarbigen Hintergrund bauen zu müssen. Mit zwei entsprechend eingefärbten Blöcken und einem überlagerten Bild funktioniert das eigentlich. Wenn da nicht der IE wäre, bei dem 2 x 50% > 100% sind. Wenn die beiden Blöcke je 50% haben, kann er die nicht nebeneinander stellen, sondern nur dann, wenn sie z.B. 49% haben. Damit kann man noch leben, auch wenn es mal wieder typisch ist.
Das als Vorgeschichte, warum der Kopfbereich so merkwürdig aufgebaut ist. Der eigentliche Content Bereich soll nun aber wiederum den Kopfbereich überlagern. auch das funktioniert in jedem normalen Browser (siehe Screenshot), außer dem IE. Die Überlagerung kriegt er ja noch hin, aber weder ist der Bereich zentriert, noch stimmen die darin eingebetteten Teile (siehe 2. Screenshot). Vielleicht habe ich es auch mal wieder viel zu kompliziert gemacht, aber irgendwie bin ich im Moment völlig ratlos, wo das Problem liegt.
CSS:
#wrapout {
background-image: url(../images/top.png);
background-repeat: no-repeat; background-position: center top;
position: absolute; width: 100%; height: 100%; margin-top: -255px;
}
#wrapin { position: relative; width: 950px; margin-right: auto; margin-left: auto; height: auto; }
#btl { background-color: #2d2d2d; position: relative; width: 49%; height: 255px; float: left; }
#btr { background-color: #272727; position: relative; width: 49%; height: 255px; float: right; }
#btop { background-color: #191919; position: relative; width: 100%; height: 40px; }
#header { color: #333; font-size: 1.2em; background-color: #ececec;
position: relative; width: 878px; height: 167px;
float: none; padding: 15px 30px 8px; border: solid 6px white;
}
#headtext { width: 476px; height: 167px; float: left; }
#headbutton { width: 180px; height: 167px; float: left; }
#domain { font-size: 2.5em; line-height: 3em; position: relative; left: 40px; width: auto; height: 40px; float: none; margin-bottom: 40px; }
#show { position: relative; top: 1px; width: 222px; height: 167px; float: right; }
pre { display:none }
.pics { position: relative; width: 222px; height: 160px; z-index: 5; margin: 0; padding: 0; }
.pics img { position: relative; top: 0; left: 0; margin: 0; padding: 0; width: 222px; height: 160px; z-index: 5; }
#socialwrap { margin-right: auto; margin-left: auto; position: relative; width: 950px; height: 32px; }
#socialwrap img { position: relative; top: 4px; float: right; margin-right: 40px; }
#cont { background-color: #272727;
position: relative; width: 938px; height: auto; z-index: 20;
border-left: 6px solid white; border-bottom: 6px solid white; border-right: 6px solid white;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
}
#menubox { background-color: #dedede;
position: relative; width: 938px; height: 38px; z-index: 50;
float: none; padding: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
}
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>kleinanzeigen.de</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="css/css.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$.fn.cycle.defaults.speed = 900;
$.fn.cycle.defaults.timeout = 4000;
$(function() {
// run the code in the markup!
$('#show pre code').each(function() {
eval($(this).text());
});
});
</script>
</head>
<body>
<div id="btop">
<div id="socialwrap">
<div class="social"><img src="images/twittericon.png" alt="" height="32" width="32" /></div>
<div class="social"><img src="images/rssicon.png" alt="" height="32" width="32" /></div>
</div>
</div>
<div id="btl"></div>
<div id="btr"></div>
<div class="clear"></div>
<div id="wrapout">
<div id="wrapin">
<div id="domain">Kleinanzeigen.de</div>
<div id="menubox">
</div>
<div id="header">
<div id="headtext">
<h1>Hier ist ein bißchen bla bla</h1>
und das hier ist noch etwas mehr bla bla.
</div>
<div id="headbutton">
<div class="button orange" style="width: 80px;">Registrieren</div>
<div class="button blue" style="width: 80px;">Anmelden</div>
</div>
<div id="show">
<div id="fade" class="pics">
<img src="images/anim1.jpg" width="222" height="167" alt="" />
<img src="images/anim2.jpg" width="222" height="167" alt="" />
<img src="images/anim3.jpg" width="222" height="167" alt="" />
</div>
<pre><code class="mix">$('#fade').cycle();</code></pre>
</div>
</div>
<div id="cont">...</div>
<div class="clear"></div>
</div>
<div id="footer">© kleinanzeigen.de</div>
</div>
</body>
</html>