Sponsored Links |
|
||||
Mein Code ist ja erstmal egal.
Mir geht es darum, daß ich bei footerstickalt einfach die Liste auf der rechten Seite, also das Menü, verlängert hab’. Die Liste ragte dann unten raus. Und wenn ich den footer nicht absolut positioniere, hat sich das erledigt, oder wie? Dann klebt er doch aber nicht immer ganz unten, oder? EDIT: Ich seh’ grad, der footer ist bei footerstickalt relativ positioniert. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Home</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="The Man in Blue" /> <meta name="robots" content="all" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css" media="all"> @import "css/main.css"; @import "css/product_features.css"; /* The CSS that's required to position the footer */ html { height: 100%; } body { height: 100%; } #nonFooter { position: relative; min-height: 100%; } * html #nonFooter { height: 100%; } #footer { position: relative; margin: -7.5em auto 0 auto; } /* A CSS hack that only applies to IE -- specifies a different height for the footer */ * html #footer { margin-top: -7.4em; } </style> </head> <body> <p class="hidden">Skip to content</p> <div id="page"> <div id="nonFooter"> <div id="header"> <p id="logo"> <a href="#"> <span class="linkText">XXXX</span> </a> </p> </div> <div id="content"> <div id="contentMain"> <h1>Product X</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante. </p> </div> <div id="contentSub"> <ul id="quickLinks"> <li class="first on"> <span>Feature</span> tour [*] <span>Try</span> a demo [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [*] <span>Buy</span> online [/list] </div> <div class="clearer"></div> </div> </div> </div> <div id="footer"> <ul id="bottomLinks"> <li class="first"> Support [*] Employment [*] Contact Us [/list] © 2005 XXXX. All rights reserved.</p> </div> </body> </html> |
|
||||
Zitat:
Zitat:
Zitat:
edit: Aha, doch mit Code. Zitat:
Ich glaube, du hast das Prinzip noch nicht verstanden. Die ganze Kunst liegt darin, den footer um seine eigene Höhe mit negativem margin nach oben zu verschieben. Zusätzliche Elemente brauchst du nicht. |
|
||||
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Startseite</title> </head> <body id="blog-front"> <div id="hauptkasten"> <div id="floater"> <h1 id="seitentitel">Startseite</h1> <div id="wobinich"> <span>zum Menü | </span> Startseite </div> <div id="inhalt"> <h2 class="center">Keine Einträge vorhanden</h2> <p class="center"> Es gibt derzeit keine Einträge, die hier angezeigt werden könnten. Entweder gibt es momentan gar keine Einträge, oder alle Einträge sind älter, als die normalerweise hier angezeigten. </p> </div> </div> <div id="menuekasten"> <h2 class="menueweg">Menü</h2> zum Inhalt <ul class="navlist">[*]Startseite [*]Audio|HiFi [*]Webkrauts [*]Das Ü[*]Links[*]Sitemap[/list] </div> <div id="fuszzeile"> nach oben E|H::Homepage, Generation 4.2, erstellt mit WordPress </div> </div> </body> </html> Ich könnte jetzt #floater rausschmeißen (ein div weniger), #hauptkasten relativ positionieren, min-height:100%; #footer absolut mit bottom:0;. Wenn das Menü zu lang wird, steht es unten raus. Das Konzept von footerstickalt hab’ ich anscheinend absolut nicht geblickt … EDIT: Ich habe oben bei meiner Vereinfachung keinen Code hinzugefügt, #nonfooter und #page waren beide schon drin. Ich mach das Menü dort nochmal so kurz wie es ursprünglich war, da funktionierte es nämlich noch. |
|
|||
Aha, wieder ein völlig anderer Quelltext - ohne CSS. Was willst du damit jetzt sagen?
Zitat:
Der footer muss außerhalb des "Hauptcontainers" liegen (wie auch immer der heißt), das clear aber innerhalb des Elements, in dem gefloatet wird! |
|
||||
Dieser neue Code ist der von meiner Seite.
Der, den ich davor gepostet hab’, ist footerstickalt, bzw. was ich daraus gemacht hab’ (zum Experimentieren). Ich hab’ da nur etliche "replacement"-spans rausgeworfen. Es hat mir schon nicht sonderlich getaugt, bei mir ein #floater einzufügen, aber ein clear-div ist mir der absolute Graus. Ich hab’ mir footerstickalt schon angeschaut. Aber wenn ich da das Menü wachsen lasse, dann steht es unten raus. Wenn ich das richtig kapier’, dann setzt footerstickalt alles bis auf den footer auf 100% und zieht dann den footer, der außen/unten dranhängt, genau um seine Höhe hoch. Was aber, wenn das Menü mehr als 100% hoch ist? |
|
|||
Zitat:
Vorausgesetzt, das Menü ist nicht absolut positioniert. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Mein Footer verschwindet in der Tablet und Mobile-Ansicht | leverkusenerjung | CSS | 3 | 16.05.2016 11:11 |
Problem mit Footer am unteren Seitenrand | scar | CSS | 3 | 21.04.2013 21:34 |
Footer Stick Alt - funktioniert nicht wirklich | HaraldMenza | CSS | 1 | 03.12.2007 23:47 |
footer stick alt -> unerwünschter Spalt in FF | fidel | CSS | 34 | 16.08.2006 14:35 |
Footer - aber auch wirklich immer am Fuß der Seite | burzum | CSS | 2 | 28.06.2006 19:44 |