|
|||
Problem mit dynamischer Höhe + Footer
Hi!
Ich bin gerade dabei, mir ein Grundlayout für meine Webseiten mit CSS zu bauen: Zentrierter Bereich, Header mit Grafik, darunter Content-Bereich und unten ein Footer. Der gesamte Bereich soll mit einem Rahmen und abgerundeten Kanten dargestellt werden. Der Footer soll grundsätzlich unten bündig abschließen. Nur der Content-Bereich soll eine dynamische Höhe abhängig vom Inhalt erhalten. Die Seite soll im FF und IE fehlerfrei dargestellt werden. Bei meinem angehängten Prototyp habe ich folgende Probleme: - Ich bekomme den Footer nicht so hin, dass er grundsätzlich bündig unten abschließt. - richtige Positionierung der unteren Eck-Grafiken - die linken divs (sollen einfarbigen Hintergrund erhalten und Eck-Grafiken verbinden) haben nicht immer 100% der Höhe (FF und IE-Problem) Für ein paar Tipps wäre ich sehr dankbar! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> <style type="text/css"> * { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */ margin: 0; padding: 0; } body { text-align: center; /* Für IE 5.01 & 5.5, um die Box #mainContainer horizontal zu zentrieren */ } div { text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */ } html, body { height: 96%; /* Anzeigebereich in der Vertikalen auf 100% strecken */ } body { background-image: url('grafik/verlauf.jpg'); background-repeat: repeat-x; } #mainContainer { position: relative; margin: 20 auto; width: 800px; min-height: 96%; /* Mindesthöhe in modernen Browsern */ height: auto !important; /* !important-Regel für moderne Browser */ height: 96%; /* Mindesthöhe in IE (<7) */ border-left: 1px solid #b8b8b8; border-right: 1px solid #b8b8b8; } #cornerTopLeft { top: 0; margin: 0; padding: 0; width:10px; height: 10px; border: 1px solid blue; } #leftContainer { float:left; width: 10px; height: 100%; border: 1px solid red; margin: 0; padding: 0; } #cornerBottomLeft { margin-top: 100%; padding: 0; width:10px; height: 10px; border: 1px solid blue; } #cornerTopRight { margin: 0; padding: 0; width:10px; height: 10px; border: 1px solid blue; } #rightContainer { float: right; width: 10px; border: 1px solid red; margin: 0; padding: 0; height: 100%; } #cornerBottomRight { margin-top: 100%; padding: 0; width:10px; height: 10px; border: 1px solid blue; } #headerContainer { border: 1px solid pink; margin: 0; padding: 0; width:100%; /* Eigentlich 780px wenn Border ausgeschaltet 768*/ height: 100px; /*margin-left: 10px;*/ /* == Höhe vom Footer! */ /*margin-bottom: 50px;*/ } #contentContainer { border: 1px solid yellow; margin: 0; padding: 0; width:100%; /* Eigentlich 780px wenn Border ausgeschaltet 768*/ /*margin-left: 10px;*/ /* == Höhe vom Footer! */ /*margin-bottom: 50px;*/ } #footerContainer { position: relative; margin-bottom: 0; border: 1px solid green; margin: 0; padding: 0; width:100%; /* Eigentlich 780px wenn Border ausgeschaltet 768*/ /*margin-left: 10px;*/ /* == Höhe vom Footer! */ } /* clearfix zum Aufheben der Floatumgebung */ .clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ </style> </head> <body> <div id="mainContainer" class="clearfix"> <div id="leftContainer"><div id="cornerTopLeft"></div>l<div id="cornerBottomLeft"></div></div> <div id="rightContainer"><div id="cornerTopRight"></div>r<div id="cornerBottomRight"></div></div> <div id="headerContainer"><p>HEADER</p>Fixe Höhe</div> <div id="contentContainer">Pink = Header mit fixer Höhe<br>Blau = abgerundete Grafiken<br>Rot = div mit Hintergrundfarbe der Ecken => benötigt 100% Höhe<br>Gelb = Dynamisch hoher Content-Bereich<br>Grün = Footer mit fixer Höhe, soll immer mit unterer Eck-Grafik bündig abschließen<p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p> Sollte dynamische Höhe haben</div> <div id="footerContainer"><p>FOOTER</p><p>FOOTER</p><p>FOOTER</p>Fixe Höhe, aber immer unten abschließen</div> </div> </body> </html> |
Sponsored Links |
|
|||
Erst einmal ein Hallo.
Da hilft, ganz ehrlich, ein Blick in die Faq: Immer 100% Höhe Dort ist genau das verwirklicht, was Du Dir vorstellst. Lies es Dir gut durch und du wirst verstehen. Ist nicht schwer wenn man es einmal verstanden hat.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
Die FAQs sind sehr gut,
allerdings gibt es zu meinem Beispiel einen Unterschied. In den Beispielen ist der Footer durchgängig. Bei mir soll er allerdings INNERHALB der umgebenden DIVS (= Rahmen und Eckgrafik) liegen. Vielleicht geht das ja aber auch garnicht. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Mitwachsender Content und Footer Problem | Bentham | CSS | 5 | 19.09.2010 12:49 |
fixed footer - problem mit absolut positioniertem div | AudioX | CSS | 2 | 02.03.2009 08:38 |
Kniffliges Problem mit prozentualer Höhe und pixelbasiertem Abstand | maikmuellers | CSS | 0 | 14.05.2007 17:28 |
Kleiner problem miut der höhe des div elements | Griborim | CSS | 0 | 15.10.2006 20:45 |
problem mit dem footer | johnpatcher | CSS | 4 | 30.11.2004 14:02 |