ist alles nicht fertig und im Entwicklungsstand......... aber man sieht das Problem wenn der Viewport verändert wird........
Beiträge von Serpico73
-
-
Hi,
habe ein 3 spaltiges Layout - der mittlere Inhaltscontainer hat momentan einen vertikalen Scrollbalken bei Veränderung des Viewports wenn es nötig ist. So solls sein........
Möchte jetzt aber ein img oder div ungewöhnlich platzieren ........ Es soll kurz vor Ende der Spalte 2(Inhaltscontainer) hinüber bis in Spalte 3 platziert sein. Das klappt soweit, mein Problem allerdings ist, das der Scrollbalken bei kleinem Viewport im Inhaltscontainer jetzt vergrößert ist und die größe vom div(oder img) dazu addiert....... was ich aber in dem Fall nicht möchte ..........muss ich mein ganzes Konzept umstellen oder gibt es da eine Lösung..............? -
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