|
|||
Flexibles 2-Spalten-Layout erzeugt Scrollbalken!?
Hallo zusammen,
ich habe mal anhand der Suchfunktion geschaut, ob es mein Problem schonmal gab, aber in dieser Form konnte ich es bislang nicht finden. Ich will mal gleich zum Thema kommen: Ich habe ein Layout mit einem Header, einer Navigation, einem Inhalt und einem Footer. Die Navigation befindet sich links neben dem Inhalt-Container und besitzt eine andere Farbe. Da im Inhalt-Container stets unterschiedlich lange Texte stehen werden, soll sich die Höhe des Navigations-Containers entsprechend anpassen, so dass beide Container mit Beginn des Footers enden. Dies ist mir auch problemlos gelungen, "height: 100%;" im <body> resp. in den entsprechenden Containern sei Dank. Doch leider war die Freude nur von kurzer Dauer. Im FireFox / IE (je neuste Versionen) betrachtet erzeugte der Code natürlich unterschiedliche Ergebnisse, das Problem jedoch ist vom Prinzip her gleich. Die Container "Inhalt" und "Navigation" werden zwar wie erwünscht bis zum Footer angezeigt, jedoch ist der Footer nirgends mehr sichtbar. Dafür erscheint zur Rechten nun dieser wunderschöne Scollbalken, mit welchem man den Footer sichtbar werden lassen kann. Auch die Reduzierung des height-Wertes im <body> auf 70% löste das Problem nicht erheblich, im IE passierte wie erwartet rein gar nichts, im FF ist die Länge der beiden betroffenen Container nun kleiner, auf der inhaltsschwachen Seite ziehen sich die Container zwar nach wie vor bis ans Ende des Browserfensters, aber das ist wohl der eigentliche Effekt des "height: 100%;"-Attributwerts. Hat jemand für diese Schilderung einen Lösungsvorschlag? Ich habe mittlerweile etliche Möglichkeiten durchprobiert, selbst das Internet warf keine neue Idee mehr aus. Zur Verdeutlichung nochmal ein paar Code-Auszüge: HTML: Zitat:
Zitat:
|
Sponsored Links |
|
|||
Hallo dottore:skin,
Die Methode mit FooterStick(Alt) ist mir geläufig, jedoch bin ich bis jetzt auf dem Kenntnisstand, dass der Footer stets am Browserende angezeigt werden soll. Gerade das möchte ich vermeiden Sorry, dass ich mich etwas undeutlich ausgedrückt habe. Also ich habe einen header, zwei Inhalt-Container (resp. Spalten) und einen Footer. Der Inhalt sollte eine Mindesthöhe haben, damit die entsprechenden Hintergrundbilder vollständig angezeigt werden (hier zickt der IE ja schonmal rum...). Nun kann es aber sein, dass ein Container im Inhalt her länger wird, so dass man scrollen muss, was an sich relativ geläufig ist. Daher sollen beide Inhalt-Container gleichmässig "wachsen", also im Endeffekt bei einem langen Text im der einen Spalte gleich lang sein. Der Footer soll dann einfach den Inhalts-Bereich abschliessen und untendran gehängt werden. Das Problem, was bei mir jetzt aufgetaucht ist, ist: Beide Inhaltscontainer enden mit dem Ende des Browserfensters, so dass man für den Footer auf jeden Fall scrollen muss. Und das, obwohl beide Inhalt-Container relativ inhaltsleer sind. |
|
|||
Jepp, das hat geholfen, vielen Dank. Ich habe mich im Nachhinein nun für die Faux-Columns-Variante entschieden, in gewissen Sinne aber auch nur, weil ich das ganze mal auf meinen Fall bezogen ausprobieren wollte.
Leider ist nun aber noch ein neues Problem aufgetaucht (allerdings nicht durch die Faux-Columns), aber ich möchte nicht gleich einen neuen Thread eröffnen. In dieser Form konnte ich auch noch keine Hilfe in diesem Forum finden. Kurz vorweg: Das Problem existiert nur im Firefox, im IE ist alles wunderbar. Ich habe nun einen Header, einen Content (mit 2 gefloateten Spalten) der in der Höhe variabel (je nach Textlänge) sein soll, und letzendlich habe ich einen Footer. Im Firefox muss ich allerdings feststellen, dass der (etwas längere Text) im Content einfach über den Footer hinweg geschrieben wird. Zunächst kam mir ein clear-Fehler in den Sinn, doch ich habe nun fast alle Möglichkeiten probiert - ohne Erfolg Code:
HTML: [...] <div id="header"><img src="header.gif"></div> <div id="content"> <div id="content_left"> <div class="content_navi">Navigation:</div> <ul> <li>Punkt01</li> <li>Punkt02</li> </ul> </div> <div id="content_right"> <div class="content_text"> <h1>headline</h1> bla<br>bla<br>bla [...] <br>bla<br>bla<br>bla </div> </div> <div class="clear"></div> </div> <!-- Ende 'id="content"' --> <div id="footer"> texttexttexttext </div> [...] ---------------------------- CSS (nur relevantes): #content { padding: 0; background: url("bg.gif") repeat-y; z-index: 1; width: 812px; min-height: 420px; } #content_left { width: 185px; height: 420px; background: url("navi_bg.jpg") no-repeat; background-position: 20% 20%; z-index: 2; float: left; } #content_right { background: url("content_bg.jpg") no-repeat; background-position: top center; z-index: 2; width: 625px; float: right; } #clear { clear: both; } #footer { width: 810px; height: 60px; } Im IE klappt das alles wunderbar, aber wie bereits erwähnt beginnt der Footer bereits nach 420 (?) Pixeln Content-Höhe. Der (eigentlich etwas längere "<br>bla"-Text wird einfach über ihn hinweg weitergeschrieben. Sobald dieses Problem gelöst ist, bin ich im Grunde fertig mit dem Gerüst. Ich prokel da (mal wieder) seit einiger Zeit dran und bin inzwischen etwas ratlos. Vielen Dank im Voraus für eure Bemühungen Geändert von JonasR (06.11.2007 um 22:04 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 Spalten Layout INKL. 1 Spalten Layout | miedsegadse | CSS | 20 | 14.04.2011 01:02 |
Layout: 2 Spalten gleich langer Höhe | Boof | CSS | 1 | 05.03.2010 11:50 |
3 Spalten fixed width css layout | sharepointkb | CSS | 9 | 28.02.2010 21:00 |
Flexibles 3-Spalten Layout | Tobbe | CSS | 4 | 18.10.2006 14:07 |
scrollbalken zerstört mein layout | tobydom | CSS | 15 | 29.11.2005 14:39 |