|
||||
Fixer "Footer"-Div an dynamische "Content-Höh
Hi Liebe Members,
Hier meine Herausforderung (erst einmal ein bischen Erklärung, da ich zwei Code-Varianten habe...) Ihr könnt auch gleich erstmal auf die Page sehen, dann fällt die Erklärung verdaulicher aus: http://method5.de/bailer/public/index.php4 Der Header-DIV geht über die gesamte Breite des "Viewports" und hat eine fixe Höhe für die Inhalte sowie das Visual..dieses geht soweit noch gut. DANACH, also optisch umgebrochen, fängt der Sub-Navi-Bereich an. Dieser hat eine fixe Breite und ist per Float links gefloatet , rechts davon, d.h. mit einigem Abstand fängt der dunkelgrau hinterlegte Content-Bereich an; dort ist der Text und die nötigen Grafiken....dieser hat immer eine Breite von 50%. DARUNTER ist das eigentliche Problemkind (!): der Footer-Div. Dieser soll eigentlich "nur" folgende Features erfüllen: Er soll IMMER direkt am unteren Browserrand "kleben" d.h. im Falle von wenig Content (also wenn man nicht scrollen muss) soll er unmittelbar direkt am unteren sichtbaren Browserrand "kleben" und im Falle wenn man scrollen muss - auch - Nur eben nicht FIX! also nicht Permanent sichtbar und womöglich noch über dem Content! Das sage ich deshalb doppelt, weil man ja mit dieser Anforderung schonmal das Ding nicht aus dem Dokumentenfluss nehmen und absolut positionieren kann, ich habe es zuerst mit absoluter Positionierung versucht, was im Grunde ja funktioniert...aber hier besteht wie gesagt die Gefahr, dass der Footer (fixe Höhe sowie 100% Breite) über den Content läuft...deshalb muss man wohl mit floats arbeiten. Sehe ich das soweit richtig oder gibt es noch einen anderen Ansatz? Ich habe das jetzt auf diese zwei Arten versucht (absolute Positionierung sowie Floating/Liquid)...beides erfüllt die Anforderungen NICHT...bzw. ich hab es nicht richtig gemacht! Anbei jetzt endlich mal drei Links um die Sachen verständlicher zumachen. - http://method5.de/bailer/public/index.php4 ("ursprüngliche" Page so wie es sein soll (bei ausreichender Browsergrösse): - http://method5.de/bailer/public/absicherung.php4 (hier ist das Problem sichtbar (bitte entsprechend Browserfenster umskalieren, hier sieht man dass man mit absoluter Positionierung leider nicht weit kommt) - http://method5.de/bailer/public/test.html (hier mein neuer Ansatz mit floatings nur mit dem Sch***, dass ich das Ding nie ganz an den unteren rand bekomme) CSS für die test.html: http://method5.de/bailer/public/bailer_test.css die wichtigsten elemente sind hier: Zitat:
sowie für die anderen Links!: http://method5.de/bailer/public/bailer.css Zitat:
Falls nötig geb ich hier noch Screenshots mit rein, ich weiss ja jetzt nicht 100% ob ihr es so sieht wie ich...ich habe es auf IE, Opera sowie Firefox (alles Win) gleichermaßen hinbekommen, eigentlich sogar Pixelgenau... lg timo |
Sponsored Links |
|
|||
ist recht einfach möglich. du musst dazu alles in nen div packen welches min-height: 100% und width: 100% UND position: relative; hat.
Das FooterDiv kannste dann innerhalb des "rahmens" position: absolute; positionieren, und in der regel sollte das dann so funktionieren. hab ich unter www.kneipengui.de ebenfalls so gemacht. |
|
||||
hi hoppelchen
du meinst Footer-Div? Also dieses Snipe: Code:
#footer { clear : both; /* left : 0px;left : 0px; */ width : 100%; background-color : #ffffff; } Code:
#footer { clear : both; position : relative; /* left : 0px;left : 0px; */ width : 100%; background-color : #ffffff; } Code:
#footer { position : relative; /* left : 0px;left : 0px; */ width : 100%; background-color : #ffffff; } |
|
|||
Also ich hab hier was, das funktioniert im FF (min-height) aber nicht im IE. Den Content anklicken, dann wird der weiter gefüllt.
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="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #aaa; } #head { height: 100px; background-color: #bbb; } #wrapper { position: absolute; min-height: 100%; left: 50%; width: 760px; margin-left: -380px; background-color: #daa; margin-bottom: 100px; } #content { background-color: #ccc; margin-bottom: 100px; } #footer { position: absolute; bottom: 0; height: 100px; width: 760px; background-color: #ddd; } </style> <body> <div id="wrapper"> <div id="head"><h1>Kopf</h1></div> <div id="content" onClick="con(450)"> <script type="text/javascript"> function con(c) { var td = document.getElementById("content"); var text = td.innerHTML; for (var i = 0; i < c; i++) text += "Lorem ipsum. "; td.innerHTML = text; } con(50); </script> </div> <div id="footer">Footer</div> </div> </body> </html> Gruß, Stephan |
|
||||
hi beviz
danke erstmal! also das sieht jetzt schon etwas besser aus. ich verwende min-height übrigens auch für die body und html-angaben. sehe ich das korrekt? und dann noch eben für den umgebenen "container"-div. das css sieht jetzt so aus: Code:
#container { position : relative; min-height : 100%; height : 100%; width : 100%; background : url( pix/dummy.gif ) repeat-y; } #footer { margin-top: 10px; position : absolute; bottom : 0px; left : 0px; width : 100%; background-color : #ffffff; } #content { float : left; margin: 65px 0px 50px 37px; width : 50%; background-color : #707070; padding : 18px 22px 40px 13px; } Link 1: http://method5.de/bailer/public/test.html Link 2: http://method5.de/bailer/public/test2.html |
|
||||
GESCHAFFT (?)
UI! Hurra! ja das beispiel war super..ich habe es stellenweise integriert. vor allem der min-height-wert ist wichtig UND das die reine height-angabe darf nur dem IE gezeigt werden: ich nehme da jetzt mal testhalber den ]-Hack..später bau ich das um, damit das CSS auch noch valide ist..ich glaube die validatoren erlauben diesen hack im css-dok nicht, aber es geht jetzt auf jeden fall! hurra gerettet! aber bitte nochmal - ich hab keinen mac hier. geht es denn soweit auch am mac oder muss ich da noch für ie am mac noch etwas anderes beachten - wie siehts im safari und ff aufm mäc aus, bin zutiefstem dank verpflichtet!!!
Code:
#content { float : left; margin: 65px 0px 50px 37px; width : 50%; background-color : #707070; padding : 18px 22px 40px 13px; } #footer { position : absolute; bottom : 0; clear : left; width : 100%; background-color : #ffffff; } #container { position : absolute; min-height : 100%; ]height : 100%; /* ONLY FOR IE */ width : 100%; background : url( pix/dummy.gif ) repeat-y; } |
Sponsored Links |
|
||||
NACHTRAG
hi leutz
also ich hab grad am telefon erfahren dass es am mac (os x) ff sehr gut aussieht und funzt nur dass der (denke neueste) safari macken macht..und im alten ie zerhauts...der ist nicht gar so wichtig der kunde könnte auf den verzichten (hurra raus mit billy) aber im safari muss ich es noch hinbekommen...vielleicht leg ich mir echt nochmal nen mac zu! aber danke für weitere tipps! lg timo |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |