Hallo liebe Forumgemeinde,
ich habe da gerade ein Problem wo ich nicht weiterkomme bzw. erstmal an die Grenzen meines Wissen komme.
Im HTML Code sind divs als Rahmen_links und Rahmen_rechts bezeichnet. Diese sollen eine feste Größe habe und als Bildhalter dienen. Diese sind absolut positioniert zum Hauptcontainer. In einer großen Monitorauflösung gibt es kein Problem. Bei kleineren Auflösungen werden und sollen die Elemente Rahmen_links und _rechts nicht voll dargestellt werden, mehr als Bildauslauf .... Problem ist allerdings das er die Größe vom div#center + die Größe vom div#rahmen_rechts addiert und somit einen waagerechten Scrollbalken darstellt. Wenn ich den body auf overflow:hidden stelle dann ist es so wie es sein sollte. Allerdings ist dann der senkrechte automatische Bildlauf nicht mehr da, wenn ein user die Höhe nicht mehr als 600px darstellen kann dann sollte er ja scrollen können. Einfach bei #Rahmen_rechts ein overflow:hidden setzen funktioniert nicht.
Also - Senkrecht Bildlauf automatisch wenn benötigt - Waagerechter Bildlauf komplett unerwünscht.
Ich glaub ich bin mit meiner Positionierung komplett durcheinander gekommen. Natürlich ist das nur der Entwurf. Normalerweise stecken mehr Inhalte und Grafiken dahinter .....
HTML Code :
</head>
<body>
<div id="main-1">
<div id="center">
<div id="rahmen_links"></div><div id="rahmen_rechts"></div>
<div id="impressum"><a href="impressum.html" title="Impressum">Impressum</a></div>
</div>
<div id="left"></div>
</div>
<div id="main-2">
<div id="right"></div>
</div>
</body>
</html>
CSS :
* { outline:none 0; margin: 0; padding: 0; list-style: none; }
body { font-size: 13px; font-family: arial, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #dbbd81; word-wrap: break-word; }
#main-1,#main-2 {width: 50%; }
#main-1 { float: left; }
#main-2 { float: right; }
#center { background-color: #fff; background-repeat: no-repeat; background-position: 70% 91%; float: right; width: 890px; margin-right: -445px; position: relative; height: 800px; }
#left,#right {background: #fff; }
#left { background-color: white; background-image: url(../images/verlauf.png); background-repeat: repeat-y; background-position: left top; height: 120px; margin-top: 105px; margin-right: 300px; border-top: 1px solid white; border-bottom: 1px solid white; }
#right { background-image: url(../images/verlauf1.png); background-repeat: repeat-y; background-position: right center; height: 120px; margin-top: 105px; margin-left: 300px; border-top: 1px solid white; border-bottom: 1px solid white; }
div {min-height: 1px; /* IE 7 */}
* html div {height: 1px; }
* html #left {margin: 0;}
* html #center { margin-left: -3px; }
#rahmen_links { background-image: url(../images/blume.png); background-repeat: no-repeat; background-position: center; position: absolute; top: 50px; left: -361px; width: 360px; height: 640px; overflow: hidden; float: left; border: solid 1px black; }
#rahmen_rechts { background-image: url(../images/blume1.png); background-repeat: no-repeat; background-position: center; position: absolute; top: 50px; left: 891px; width: 360px; height: 640px; overflow: hidden; border: solid 1px black; }
#impressum { color: #5a2d18; font-size: 11px; text-decoration: none; text-align: center; position: relative; top: 801px; left: 750px; width: 100px; height: 15px; border: solid 1px red; }
#impressum a { color: #5a2d18; text-decoration: none; }
#impressum a:hover { color: white; text-decoration: none; }
Ich bin mir sicher mit dem div#impressum kann man auch besser lösen .... 
Falls sich jemand die Mühe macht und das sich anschaut : Vielen Dank im Voraus.
mfg