Menu onderaan pagina (bottom, footer)

[Verwijderd]

Ik ben al een poosje bezig met een stukje css code. Nu ben ik wel wat gewend, maar deze keer lukt het niet. Ook niet na veel ge-google. Wellicht komt dat omdat ik verschillende divs in elkaar geschoven heb. Hoe dan ook, het probleem is als volgt:

Probleem
Het menu, met daarin allerlei divs moet naar de onderkant van de pagina. In principe heb ik dat al. Echter als de pagina minder tekst bevat gaat het menu (footer, bottom, met daarin de verschillende "submenu's" mee naar boven.

Het menu moet in dat geval naar de onderkant van het scherm, i.v.m. de layout.

Code

Cascading Stylesheet:

/* Knip */

CSS code
Pagina waar het om gaat

Hopelijk kan iemand me even op weg helpen, want ik zie het even niet meer

Alvast bedankt!

[ Voor 84% gewijzigd door Verwijderd op 25-10-2010 13:19 ]

[MoietyMe]

Wat heb je zelf al geprobeerd? Heb je een testcase?

[NMe]

Ik heb je code weggehaald. We hebben meer dan genoeg aan alleen het relevante stukje, daar hebben we geen 300+ regels voor nodig. Zoek dus uit wat het relevante stukje code is en post dat maar opnieuw in je topicstart. En inderdaad, een testcase zou handig zijn.

[Verwijderd]

NMe schreef op maandag 25 oktober 2010 @ 12:44:
Ik heb je code weggehaald. We hebben meer dan genoeg aan alleen het relevante stukje, daar hebben we geen 300+ regels voor nodig. Zoek dus uit wat het relevante stukje code is en post dat maar opnieuw in je topicstart. En inderdaad, een testcase zou handig zijn.

Ik heb het aangepast door de betreffende urls te plaatsen. Wellicht verduidelijkt dat een en ander.

[Ssander]

Je hebt het aangepast door nogmaals de 300 regels aan CSS te posten, en daarbij ook nog eens 200 regels aan HTML. Handig.

Voordat dit topic waarschijnlijk gesloten wordt: google eens naar CSS 100% height.

[Bosmonster]

Je zet netjes de woorden "bottom" en "footer" in je topic title. Maar als je daar op zoekt in dit forum krijg je bergen oplossing.

[NMe]

Post nou eens gewoon alleen de relevante CSS. We hebben niks aan alle CSS, dan moeten we eerst nog eens gaan uitzoeken wat relevant is en waarom. Dus nogmaals: doe even alleen die CSS die relevant is voor je probleem, anders gaan we je niet kunnen helpen.

[Verwijderd]

NMe schreef op maandag 25 oktober 2010 @ 13:54:
Post nou eens gewoon alleen de relevante CSS. We hebben niks aan alle CSS, dan moeten we eerst nog eens gaan uitzoeken wat relevant is en waarom. Dus nogmaals: doe even alleen die CSS die relevant is voor je probleem, anders gaan we je niet kunnen helpen.

Het gaat vooral om dit gedeelte:

Cascading Stylesheet:

#footer {
    position: relative;
    width: 100%;
    bottom: 0xp;
    clear: both;
    margin: 0 auto;
    padding: 0;
}

#bottom {
    width: 800px;
    height: 192px;
    margin: 0 auto;
    color: #FFFFFF;
    z-index: 101;
}

als ik bottom op 0px zet bij #bottom, dan staat ie ineens onder de header.

De header heb ik position absolute staan.
content position op relative, in content zit menu (float left) en tekst (float right)
footer en bottom (zoals hierboven)

[Ssander]

Heb je ook gekeken naar Bosmonster zijn post en die van mij? We komen beide met een oplossing.

[Verwijderd]

Ssander schreef op maandag 25 oktober 2010 @ 14:26:
Heb je ook gekeken naar Bosmonster zijn post en die van mij? We komen beide met een oplossing.

Ik stel hier geen vraag voordat ik gezocht heb. Zowel op dit forum aangedragen oplossingen heb ik diverse van geprobeerd. Evenals ge-googlede oplossingen (zie mijn beginpost).

[Tjeemp]

er staat sowieso "bottom: 0xp" ipv "bottom: 0px"...

Volgens mij heb ik in bij een soortgelijk probleem een afzonderlijke clear div toegevoegd aan het eind van mijn content container. (height = hoogte van je footer)

Cascading Stylesheet:

height: 100px;
clear: both;

De container had hier ook een negatieve marge die even hoog is als de footer. De footer had ik buiten de container div geplaatst.

Moet wel zeggen dat ik dit toen wel heb kunnen uitvogelen met wat Google werk... Waarschijnlijk is het probleem nog niet helemaal opgelost met mijn input, maar hopelijk lost het een punt op wat je misschien over het hoofd zag. Verder verwijs ik je toch naar Google of je moet even in de code kijken van www.beerntea.com (de website waarin het zit) lekker mijn website pluggen hier moet wel zeggen dat de css een beetje een rommeltje is geworden in de loop der tijd, maar misschien haal je er toch iets nuttigs uit.

[Verwijderd]

Tjeemp schreef op maandag 25 oktober 2010 @ 14:42:
er staat sowieso "bottom: 0xp" ipv "bottom: 0px"...

opgelost, komt doordat ik daar een paar keer mee gespeeld heb...

Volgens mij heb ik in bij een soortgelijk probleem een afzonderlijke clear div toegevoegd aan het eind van mijn content container. (height = hoogte van je footer)

Cascading Stylesheet:

height: 100px;
clear: both;

De container had hier ook een negatieve marge die even hoog is als de footer. De footer had ik buiten de container div geplaatst.

Zojuist weer geprobeerd, maar komt niet goed uit bij mij. Dan komt de blauwe lijn helemaal onder het scherm uit.

Moet wel zeggen dat ik dit toen wel heb kunnen uitvogelen met wat Google werk... Waarschijnlijk is het probleem nog niet helemaal opgelost met mijn input, maar hopelijk lost het een punt op wat je misschien over het hoofd zag. Verder verwijs ik je toch naar Google of je moet even in de code kijken van www.beerntea.com (de website waarin het zit) lekker mijn website pluggen hier moet wel zeggen dat de css een beetje een rommeltje is geworden in de loop der tijd, maar misschien haal je er toch iets nuttigs uit.

Ik zal es kijken op je website.

[Verwijderd]

Ik heb het opgelost.

Oplossing
#footer buiten container gezet, wat ik ook al meerdere malen geprobeerd had. Echter gebruikt ik per abuis padding-bottom en dan hoogte in px, terwijl ik margin-bottom moest gebruiken.
Nu is het gelukt en alles werkt nu prima.

Iedereen bedank voor het meedenken.

Greetzz.

[reshi]

Geen idee of het van belang is voor jgpost, maar je site werkt niet goed in IE6 en IE7. De opmaak laat dan nogal te wensen over. Nou kan je ondersteuning voor IE6 laten vallen... maar IE7 lijkt me toch redelijk belangrijk?

[Realityweb]

In Google Chrome op Mac is hij in ieder geval ook niet goed, de tekst in de content gaat over de footer heen, de footer wordt dus niet naar onderen 'gedrukt'.

[Verwijderd]

reshi schreef op woensdag 27 oktober 2010 @ 16:20:
Geen idee of het van belang is voor jgpost, maar je site werkt niet goed in IE6 en IE7. De opmaak laat dan nogal te wensen over. Nou kan je ondersteuning voor IE6 laten vallen... maar IE7 lijkt me toch redelijk belangrijk?

Klopt in IE7, op de windhoos *dat OS heet Windows* machine werkt het niet. Het gaat ook niet helemaal goed in Safari op de Macs.

In FireFox werkt het wel goed.

Weet iemand voor mij een negative margin fix ?? Ik zoek me suf, en heb al allerlei fixes geprobeerd, echter zonder resultaat.

Een andere, mogelijke oplossing, is ook van harte welkom!

N.B. Ik heb eerst de rest maar afgewerkt, vandaar dat de vraag ook wat later komt.

Iedereen alvast bedankt voor het meedenken

[ Voor 5% gewijzigd door RobIII op 05-11-2010 12:02 ]

[Verwijderd]

Het gaat vooral om deze code:

Cascading Stylesheet:

#container {
    min-height: 100%;
    height: auto !important; 
    height: 100%; 
    position: relative;
    width: 100%;
    margin-bottom: -140px;  
}

Met name de margin-bottom met zijn negatieve waarde.

In FireFox werkt het prima. In andere browsers werkt het niet altijd naar behoren.

Weet iemand een bepaalde oplossing?

[NMe]

Je overschrijft je eigen height en gebruikt negatieve margins. Vooral dat laatste is vragen om problemen als je niet goed weet wat je aan het doen bent.

[Verwijderd]

NMe schreef op vrijdag 05 november 2010 @ 12:35:
Je overschrijft je eigen height en gebruikt negatieve margins. Vooral dat laatste is vragen om problemen als je niet goed weet wat je aan het doen bent.

Wat bedoel je met "overschrijf je eigen height"?
de height 100% en auto is bedoeld voor IE en FF die daar verschillend mee omgaan.

Weet je misschien een oplossing?