#1 24. März 2011 Zuletzt von einem Moderator bearbeitet: 15. April 2017 Frage zum Footer und Boxes Hey, bin grad dabei css zu lernen, komme aber bei einigen sachen nicht weiter. das design ist hässlich - soll aber nur dem übungszweck dienen das sieht so aus: Screen1: {img-src: //www.abload.de/thumb/page1w9et.jpg} Frage 1: Wie bekomme ich es hin, dass die drei Spalten automatisch bis zum Footer gehen? Frage 2: Zwischen der linken roten und der mittleren grünen Spalte ist ein schwarzer Strich. Wie bekomme ich den weg? Dann habe ich noch ein Problem. Verkleiner ich vertikal das Browserfenster, überlappen die drei Spalten meinen Footer (siehe Screen 2). Screen 2: {img-src: //www.abload.de/thumb/page2pyop.jpg} Frage 3: Was muss ich coden, um das Überlappen zu verhindern bzw. das der Footer automatisch mit nach unten "scrollt"? HTML: <html> <head> <title></title> <style type="text/css"> html, body { height: 100%; } body { margin: 0; padding: 0; } #container { min-height: 100%; width: 970px; border: 0px; background: orange; } * html #container {height: 100%;} /* IE Hack für 100 % Höhe */ #header { float: left; height: 100px; width: 960px; border: 0px; background: blue; } #left { float: left; height: 400px; width: 250px; border: 0px; background: red; } #content { float: left; margin-bottom: 1.5em; height: 400px; width: 460px; border: 0px; background: green; } #right { float: left; height: 400px; width: 250px; border: 0px; background: red; } #footer { position: absolute; float: left; bottom: 0; height: 100px; width: 960px; border: 0px; background: blue; } </style> </head> <body> <div id="container"> <div id="left">Links</div> <div id="content">Inhalt</div> <div id="right">Rechts</div> <div id="footer">Unten</div> </div> </body> </html> Vielen Dank Grüße + Multi-Zitat Zitieren
#2 24. März 2011 AW: Frage zum Footer und Boxes du kannst min-height verwenden und bei deinem footer postion: relativ ... dann werden die spalten je nach inhalt vergrößert und der footer nach unten verschoben ... um alle 3 gleich groß zu halten musst du javascript verwerden (mir ist nichts anderes bekannt) der schwarze strich ist bei mir nicht vorhanden wenn ich den quellcode bei mir teste ... + Multi-Zitat Zitieren
#3 25. März 2011 Zuletzt von einem Moderator bearbeitet: 14. April 2017 AW: Frage zum Footer und Boxes WTF? Und da ist nichts mit Javascript gemacht. Wie wäre es nochmal mit einem CSS Kurs? ^^ @ TE du musst aber anders vorgehen wenn du die drei Div's auf gleicher höhe haben willst. Du setzt den Footer ins Div "container" mit rein aber auf absolute. Setzt du jetzt alle drei Divs auf die volle Höhe, verbirgt sich ein Stück hinter dem Footer. (Teil zwei deiner Frage 2 erklärt sich hiermit) Um das zu umgehen setzt du entweder den Footer aus dem Div "container" raus oder du setzt die drei Divs in ein neues Div und beschränkst die Höhe. Footer raus (saubere Variante): Dann hast du allerdings den Footer nicht mehr im sichtfeld, musst also runterscrollen. Ist aber machbar, dass man den Footer "hochschiebt". Ist mir nur jetzt auf die Zeit zu viel arbeit. ^^ Spoiler HTML: <html> <head> <title></title> <style type="text/css"> html, body { height: 100%; } body { margin: 0; padding: 0; } #container { min-height: 100%; width: 970px; border: 0px; background: orange; } * html #container {height: 100%;} /* IE Hack für 100 % Höhe */ #header { float: left; height: 100px; width: 960px; border: 0px; background: blue; } #left { float: left; height: 100%; width: 250px; border: 0px; background: red; } #content { float: left; margin-bottom: 1.5em; height: 100%; width: 460px; border: 0px; background: green; } #right { float: left; height: 100%; width: 250px; border: 0px; background: red; } #footer { position: relative; bottom: 0; height: 100px; width: 970px; border: 0px; background: blue; } </style> </head> <body> <div id="container"> <div id="left">Links</div> <div id="content">Inhalt</div> <div id="right">Rechts</div> </div> <div id="footer">Unten</div> </body> </html> Neues Div setzen und höhe beschränken (beim Einzoomen unsauber) Spoiler HTML: <html> <head> <title></title> <style type="text/css"> html, body { height: 100%; } body { margin: 0; padding: 0; } #container { min-height: 100%; width: 970px; border: 0px; background: orange; } * html #container {height: 100%;} /* IE Hack für 100 % Höhe */ #header { float: left; height: 100px; width: 960px; border: 0px; background: blue; } #left { float: left; height: 100%; width: 250px; border: 0px; background: red; } #content { float: left; margin-bottom: 1.5em; height: 100%; width: 460px; border: 0px; background: green; } #right { float: left; height: 100%; width: 250px; border: 0px; background: red; } #footer { position: absolute; float: left; bottom: 0; height: 100px; width: 960px; border: 0px; background: blue; } #main {height:95%;} </style> </head> <body> <div id="container"> <div id="main"> <div id="left">Links</div> <div id="content">Inhalt</div> <div id="right">Rechts</div> </div> <div id="footer">Unten</div> </div> </body> </html> + Multi-Zitat Zitieren
#4 25. März 2011 Zuletzt von einem Moderator bearbeitet: 14. April 2017 AW: Frage zum Footer und Boxes lern lieber css3 - kein float left/right - kein height 100% gewurschtel - in verbindung mit box-flex ohne probleme an viewport anpassbar. läuft in neuen safaris/chrome und in mozilla ab gecko 2.0 opera und internet explorer ziehen sicher bald nach (zumindest opera, da display:box und box-flex vorallem in mobilen anwendungen sinnvoll ist) leider macht ms mit dem ie wieder ihr eigenes ding und implementieren css3 wie es ihnen gerade passt. schade eigl., obwohl die versprechungen einem echt hoffnungen gemacht haben. display:box HTML: <!DOCTYPE html> <html lang="de" dir="ltr"> <head> <title>Spalten Layout mit CSS3</title> <style type="text/css"> body { margin: 0; padding: 0; } #main { width: 980px; margin: 20px auto; } #header { padding: 1px; height: 100px; background: yellow; } #body { display: -moz-box; display: -webkit-box; display: -ms-box; /* pffft, geht (noch) nicht */ display: -o-box; /* kommt sicher noch */ display: box; } #left, #right { background: red; width: 180px; } #content { width: 620px; height: 400px; background: green; } #footer { padding: 1px; background: blue; } p { font-family: verdana; text-align: center; } </style> </head> <body> <div id="main"> <div id="header"> <p>Hallo Welt</p> </div> <div id="body"> <div id="left"> <p>Links</p> </div> <div id="content"> <p>Mitte</p> </div> <div id="right"> <p>Rechts</p> </div> </div> <div id="footer"> <p>Copyright 2011 Murdoc @ RR =)</p> </div> </div> </body> </html> ergebnis: + Multi-Zitat Zitieren
#5 25. März 2011 AW: Frage zum Footer und Boxes erstmal vielen vielen dank euch allen ihr habt mir sehr weitergeholfen. @murdoc hab nun auch einiges gelesen zu css3, vorallem die vorteile liegen auch deutlich auf der hand, nur würdest du eine webseite mit css3 coden, wenn die zukünftigen besucher eher "allerwelts-pc-user" sind, die nun eher hauptsächlich den ie benutzen? grüße + Multi-Zitat Zitieren
#6 25. März 2011 AW: Frage zum Footer und Boxes Der IE wird auch kurz über lang CSS3 implentieren. Da führt kein wirklicher Weg dran vorbei wenn man mit seinem Browser mithalten willt. Sollte der IE jedenfalls den Weg öffentlich einschlagen, dann lohnt es sich aufjedenfall. Man kann nicht mehr großartig auf die Benutzer rücksicht nehmen, die in der heutigen Zeit mit ihren alten Browsern rumgurken und nicht updaten. Natürlich kann man Browserweichen bauen, aber ob man da die Lust drauf hat ist die andere Frage. 90% der Arbeit besteht dann sicherlich aus Debugging der verschiedenen IE Versionen. + Multi-Zitat Zitieren
#7 26. März 2011 AW: Frage zum Footer und Boxes klar kann ich die boxen alle gleichgroß machen manuell ... aber sobald ich die mit inhalt füll und dynamisch vergrößern lass ... d.h. box 1 ist zb die längste und die andern 2 kürzer dann ... dann muss ich doch javascript nutzen oder nicht?! + Multi-Zitat Zitieren
#8 28. März 2011 AW: Frage zum Footer und Boxes das kommt ganz auf dein design und deine umsetzung an. wenn du ein drei-spalten layout hast kann man probieren mit einem hintergrund zu arbeiten, ansonsten muss man wohl oder übel mit javascript nachhelfen wenn es in allen browsern gleich aussehen soll. + Multi-Zitat Zitieren
#9 29. März 2011 AW: Frage zum Footer und Boxes nicht zwangsläufig wenn ich das richtig verstehe willst du das deine box sich dem inhalt (text) anpasst? oder? bei mir hat dies hier funktioniert ... .box{ margin-bottom: -32767px; padding:0px 0px 32767px 0px; } hab aber auch lange an dem problem gehangen ;-) greetz + Multi-Zitat Zitieren