✔ Layer: Altbekanntes "height:100%;"-Problem

Status
Nicht offen für weitere Antworten.
Bomber

Bomber

Erfahrenes Mitglied
Hi!

Ich hab schon gesehen das dieses Problem bereits öfters aufgetaucht ist, aber aus dem Threads habe ich irgendwie keine Lösung herausbekommen.

Ich habe einen Großen "Main" Container in dem ein "Header" Container ein "Menu" Con. und ein "bottom_pattern" Container drin sind. Außerhalb des Main Containers noch einmal Links und Rechts zwei schmucke Streifen "site_pattern_right" bzw "site_pattern_left".

Header und Menü sollen untereinander am oberen Bildrand kleben, während "bottom_pattern" am unteren Bildrand kleben soll. Content, soll sich, je nach anfallendem Content, eben ausdehnen.

Solange nichts zu scrollen da ist funktioniert das gut, alles ist an seinem Platz. Ist allerdings mehr Text im Content-Container da und muss gescrolled werden, bleibt der Main Container so groß wie das Browserfenster ist. Der Content Container dehnt sich aus. Bottom Container beibt innerhalb des Main Containers an unterster Stelle.
Auch die Streifen an der Seite, bzw ihre Container sind nur so groß wie das ungescrollte Fenster.

So siehts aus: http://konzentrat.net/test/bilder.php

Hier ist das ganze als Zip: http://konzentrat.net/test/konzentrat.zip

Ich weiß echt nicht mehr weiter, nachdem ich mir den halben Tag damit um die Ohren gehauen habe muss ich kapitulieren, ich hoffe jemand kann mir helfen

Danke!
 
hab ich wie gesagt schon, ich habs nicht gepeilt.

was ist denn der lösungsansatz? das hintergrundbild? das float?
 
Die vertikal-wiederholende Hintergrundgrafik sorgt, unabhängig vom jeweiligen Inhalt, für gleich hohe Spalten und die float-Eigenschaft dient zum Einrichten der einzelnen Spalten.
 
Dann verstehe ich nicht was ich anders gemacht habe als in den Lösungsansätzen aus dem Thread. :(
 
Zum Beispiel hast du alle DIV-Elemente im Anzeigefenster absolut positioniert und für das DIV #site_pattern_left keine Positionsangaben genannt, weshalb es sich nicht an der gewünschten Stelle im Layout befindet, sondern im Browserfenster in der linken oberen Ecke klebt:

Code: 
#site_pattern_left{
        position:absolute;
        margin-top:0px;
        margin-bottom:0px;
        margin-right:4px;
        width:24px;
        background-image:url(img/header.jpg);
}
Und was die Header-Grafik in diesem Element zu suchen hat, das den linken Seitenstreifen darstellen soll, kann ich auch nicht so richtig nachvollziehen.

Mein Tipp: erstelle eine Hintergrundgrafik für das DIV #main, die die beiden Seitenstreifen enthält und vertikal wiederholt wird. Somit besitzen diese "Spalten" neben der Spalte #content immer die gleiche Höhe.
 
Hi!

Erstmal danke für deine Antwort und Sorry: Ich war gestern ziemlich durch'n Wind, hatte rumexperimentiert und die Sachen nicht zurückgestellt.

Ich habe es jetzt so gemacht wie du es mir angeraten hast, dh. ein #main Container mit den beiden Seitenstreifen als Hintergrundbild. #main enthält #header, #menu, #content & #bottom_pattern.

Leider besteht mein Problem immer noch, denn #main erstreckt sich zwar über die Höhe des "sichtbaren Bildschirms" aber eben nicht weiter. Das war ja das Problem, das ich gestern auch schon hatte, hab mich da vielleicht etwas blöd ausgedrückt.

Hier nochmal zum angucken: http://konzentrat.net/test/index.htm
Das CSS: http://konzentrat.net/test/styles.css
Und zum runterladen: http://konzentrat.net/test/test.zip

Wäre nett wenn du nochmal drüber gucken würdest.

Danke.
 
So, ich hab #content jetzt mal Probehalber auf "position:relative;" gestellt.

Jetzt fehlen im #main Container eigentlich nur noch die "top:206px;" die bei #content eingestellt sind.

Hm.. wie krieg ich die da jetzt rein.

Edit: Hurra Hurra.. mit "margin-top" natürlich.. CSS ist eigentlich ganz einfach, wenn mans mal geschnallt hat ;)

Danke natürlich trotzdem an michaelsinterface.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück