|
|||
Hilfe 3 Spaltiges Layout mit 100% höhe
Hallo,
ich bin am verzweifeln, ich bekomme das einfach nicht hin. Ich habe mal 2 Bilder erstellt wie ich mir das Layout vorstelle. Kurz zur Beschreibung der große schwarze Rahmen soll das Browserfenster darstellen. Das kleine blaue ein Logo. Ich möchte gerne das wie auf 1.jpg wenn nicht viel Text im Content bereich ist die beiden Spalten links und rechts 100% höhe haben und mit dem Fenster abschließen. Das Logo soll am unteren ende der linken Spalte zu sehen sein. Wenn jetzt aber wie in 2.jpg der Text im Content Bereich länger läuft sollen die linke und rechte Spalte genau so lang sein wie der Content Bereich. Das gleiche auch für die anderen Spalten egal wo wieviel Text steht es sollen immer alle Spalten gleich lang sein. Das Logo soll auch wenn die Spalten länger sind als die Fensterhöhe am unteren ende der linken Spalte sein. Ich bedanke mich schon im voraus für jede Hilfe. Viele Grüße S. |
Sponsored Links |
|
|||
danke für den Tipp und Sorry fürs nicht FAQ lesen.
Ich hab das jetzt so hinbekommen, aber es gibt noch kleine Probleme die ich nicht lösen kann. Ich hab das ganze mal Online gestellt unter Link 1. Wie bekomme ich die Abstände weg die Boxen links,content,rechts sollen bündig mit dem Banner anschließen. 2. Wie bekomme ich das Logo unten auf die links Spalte 3. beim FF ist über dem Banner ein Spalt wie bekomme den Weg ? zu 1. Beim IE sind die Boxen links, rechts bündig aber nicht der Content Nachtrag : Hab noch einen Bug gefunden, wenn man viel Content eingibt funzt das unter FF irgendwie nicht Link Vielen dank schonmal ... Hier der Code und das CSS : Code:
<body> <div id="container"> <div id="nonFooter"> <div id="banner"><h2>Logo</h2></div> <div id="left">links</div> <div id="right">rechts</div> <div id="content">Content</div> </div> </div> <div id="footer">Logo</div> </body> Code:
body { background-color: #e1ddd9; font-size: 0.8em; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#000000; padding:0; margin:0; } html, body {height:100%;} #container { width: 990px; margin: 0 auto; padding: 0; background-image:url(bg_main.gif); background-repeat:repeat-y; height:100%; } #banner { margin: 0; padding: 0; background-color: #fff4cc; height:130px; } #content { background-color:#CCCC00; padding: 0; margin: 0 180px; width:510px; } #left { float: left; width: 180px; margin: 0; padding:0 0 0 0; background-color:#00FF33; } #right { float: right; width: 300px; margin: 0; padding: 0; background-color:#00FF33; } #nonFooter { position: relative; min-height: 100%; } * html #nonFooter { height: 100%; } #footer { position: relative; margin-top: -4.5em; background-color:#00FF55; width:100px; } Geändert von sydios (15.06.2007 um 01:19 Uhr) |
|
|||
Zitat:
Und der footer klebt jetzt auch immer genau ein Stück unter dem eigentlichen Content ich möchte das der ca. 50 px über dem bottom liegt, das es nicht so hingeklatscht aussieht. Beim FF bleibt der Footer auch stehen und rutsch nicht nach unten. Die margin's habe ich entfernt aber beim IE ist der Abstand immer noch drinnen Code:
* { margin: 0; padding: 0; } body { background-color: #e1ddd9; font-size: 0.8em; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#000000; padding:0; margin:0; } html, body {height:100%;} #container { width: 990px; margin: 0 auto; padding: 0; background-image:url(bg_main.gif); background-repeat:repeat-y; height:100%; min-height: 100%; } #banner { margin: 0; padding: 0; background-color: #fff4cc; height:130px; } #content { width:510px; } #left { float: left; width: 180px; padding:0 0 0 0; } #right { float: right; width: 300px; padding: 0; background-color:#00FF33; } #nonFooter { position: relative; min-height: 100%; } * html #container { height: 100%; } #footer { position: relative; margin-top: -4.5em; background-color:#00FF55; width: 990px; margin: 0 auto; padding: 0; } Code:
<body> <div id="container"> <div id="banner"><h2>Logo</h2></div> <div id="left">links</div> <div id="right">rechts</div> <div id="content">Content</div> </div> <div id="footer">Logo</div> </body> |
|
|||
Ahh ok das float habe ich vergessen jetzt ist der Abstand weg.
dem container habe ich aber das min-height gegeben und den noFooter div habe ich auch entfernt. Code:
#container { width: 990px; margin: 0 auto; padding: 0; background-image:url(bg_main.gif); background-repeat:repeat-y; height:100%; min-height: 100%; } <body> <div id="container"> <div id="banner"><h2>Logo</h2></div> <div id="left">links</div> <div id="right">rechts</div> <div id="content">Content</div> </div> <div id="footer">Logo</div> </body> |
|
||||
Zitat:
Jetzt mußt Du nur noch clearen, damit #container die Floats einschließt. Entweder mit einem clearenden Element nach dem letzten Float, unmittelbar vor dem schließenden Tag von #container, oder per "Easy Clearing" (diese sowie alle weiteren clear-Varianten findest Du in den FAQ Punkt 2). |
|
|||
Cool hat geklappt
Jetzt nur noch eins und ich lass dich in ruhe Wie bekomme ich jetzt den Footer 40px höher da ja in dem nachher nur ein gif steckt. Ich hab schon versucht die margin werte zu ändern aber dann ist das zwar an der stelle an der ich es haben möchte aber nicht mehr zentriert. Code:
* { margin: 0; padding: 0; } body { background-color: #e1ddd9; font-size: 0.8em; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#000000; padding:0; margin:0; } html, body {height:100%;} #container { width: 990px; margin: 0 auto; padding: 0; background-image:url(bg_main.gif); background-repeat:repeat-y; min-height: 100%; } #banner { margin: 0; padding: 0; background-color: #fff4cc; height:130px; } #content { width:510px; float:right; } #left { float: left; width: 180px; padding:0 0 0 0; } #right { float: right; width: 300px; padding: 0; background-color:#00FF33; } #nonFooter { position: relative; min-height: 100%; } * html #container { height: 100%; } #footer { position: relative; margin-top: -4.5em; background-color:#00FF55; width: 990px; margin: 100 auto; padding: 0; } Code:
<body> <div id="container"> <div id="banner"><h2>Logo</h2></div> <div id="left">links</div> <div id="right">rechts</div> <div id="content">Content</div> <div style="clear:both;"></div> </div> <div id="footer">Logo</div> </body> |
Sponsored Links |
|
||||
Zitat:
Dann brauchst innerhalb von #container auch noch ausreichend Platz nach unten (damit seine Inhalte nicht überlagert werden), z.B. durch ausreichend margin-/padding-bottom jedes einzelnen Floats, oder durch eine Höhe des clearenden Elementes. Elegant wäre dafür hr mit visibility: hidden;, da hr (im Gegensatz zu einem leeren div) auch einen Sinn hat (auch wenn dieser erst ohne CSS sichtbar wird). |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
3 spaltiges Layout mit CSS | Serpico | CSS | 2 | 20.12.2010 16:53 |
3 spaltiges Layout mit flexibler Mitte | skobe | CSS | 1 | 11.12.2007 17:48 |
Footer Problem (3 spaltiges Layout, variable Höhe) | Lofesto | CSS | 2 | 23.07.2007 17:13 |
Hilfe bei Umsetzung von Layout... | darvida | CSS | 8 | 29.04.2005 12:32 |
layout problem mit höhe | Deude | CSS | 6 | 31.03.2005 22:00 |