Content loopt uit div bij een "sticky" footer

[nkamp]

Hallo,

Ik ben bezig met website waarbij ik page altijd binnen de "vieuwport" van de browser wil houden onafhankelijk van de schermresolutie. Dus ik een sticky footer er aangemaakt maar nu loopt de content "uit" div onder de sticky footer door. http://test.nicovandekamp.nl.

Heeft iemand een idee hoe je dit kunt oplossen.

Ik voeg ook nog mijn HTML+CSS file toe.

alvast bedankt,

Nico

 

[Goeroeboeroe]

Ik ga maar 'ns heel brutaal zijn en je iets van mezelf aanraden in plaats hiervan.
Ik neem aan dat je dit ergens op internet hebt gevonden. 't Is ook best redelijk, maar behoorlijk verouderd. Zo staat er bijvoorbeeld
<!--[if IE]>
wat wil zeggen: als het Internet Explorer is. Maar er staat geen versie bij en dit soort speciale dingen zijn meestal alleen voor Internet Explorer 6, heel soms 7 nodig. Daaruit leid ik af, en uit bijvoorbeeld die fix voor Opera, dat 't hartstikke oud is.
Met de nodige moeite zou je 't wel in orde kunnen krijgen. Maar toevallig heb ik zelf 'n lay-out gemaakt die zo te zien precies is wat jij nodig hebt. Denk ik, als ik 't mis heb hoor ik 't wel. Dat is 'n stuk simpeler.
't Voorbeeld staat hier: http://css-voorbeelden.nl/lay-out/gecentreerd/vaste-header/lay-out-002.html
Je kunt uitleg en code downloaden. Als je geen zin hebt de hele uitleg te lezen (ik weet niet hoe veel of hoe weinig je van html/css weet), kun je in de download natuurlijk ook gewoon de broncode bekijken.

 

[nkamp]

Hallo Goeroeboeroe,

Brutaal of niet het helpt mij wel weer een stuk verder. MAAR... Elke keer denk ik dat ik er ben maar dan treedt er weer iets op waar ik niet opgerekend had.

Ik heb inderdaad links en rechts zaken bij elkaar gezocht, en dan via trial&error aangepast. Ik heb wel wat met css+js+HTML+PHP en zo gedaan maar ik wil mij nu css meer eigen maken. Maar van dat float, position, z-index etc. is mij nog niet allemaal duidelijk. Ik ga dat dan van jou ook zeker nog doorlezen vandaag (ik moet nu eerst even weg). Maar als je kijkt op mijn http://test.nicovandekamp.nl, dan schuift het menu -vereniging | prestatie | ..- nog onder het content deel. Ik ben al met Z-index bezig geweest, althans ik denk dat ik daar de oplossing moet zoeken, maar dat is mij nog niet gelukt. OF moet ik van dat jQuery menu afstappen? Aan de andere kant moet dat toch gewoon willen werken of niet, ik bedoel dat het menu uitschuift over het content deel!

Ik hoop dat je mij nog even duwtje in de juiste richting kunt geven.

Nico

 

[Goeroeboeroe]

En als je er dan eindelijk bent en 'alles' weet, dan is er wel weer iemand zo vriendelijk iets nieuws te ontwikkelen
Mooi dat 't geschikt is. Op die z-index kom ik zo, eerst even iets anders.

Goed, eerst maar even koffiegedronken. Zit ik 'n heel verhaal te typen over dat dit menu niet zo geschikt is omdat je zonder JavaScript geen links ziet, blijkt dat je er nog geen links in hebt zitten. Inmiddels dus wel enigszins wakker, geloof ik, grinnik. Ik was al verbaasd omdat jQuery goed bekend staat op dit gebied.

float, position, z-index en zo is even lastig in de vingers te krijgen, maar als je 't eenmaal 'n beetje door hebt is 't ongelooflijk flexibel en handig.
Dat 't menu verdwijnt heeft inderdaad met z-index te maken. De html wordt op het scherm gezet in de volgorde zoals die in de code staat. En div#content komt na div#header, dus wordt div#content over div#header gezet.
Daar komt nog bij dat ze beide 'n fixed positie hebben, wat o.a. inhoudt dat ze volkomen asociaal zijn en elkaar straal negeren. Oftewel: je menu verdwijnt vrolijk achter div#content, want die vertikt het om even ruimte te maken.

Als je nou aan div#header 'n z-index geeft van bijvoorbeeld 10, dan is het menu wel zichtbaar. Dus aan de css voor div#header toevoegen:

z-index: 10;;

Je moet die z-index aan div#header toevoegen, omdat die op hetzelfde 'niveau' staat als div#content. Jouw code springt heel netjes in, daardoor kun je dat ook goed zien. Als je de z-index ergens aan 't menu toevoegt, werkt die alleen binnen div#header en niet ten opzichte van div#content. 'n z-index werkt altijd alleen maar ten opzichte van z'n broertjes en zusjes, om 't zomaar te zeggen.
Je kunt voor z-index elke waarde nemen, net hoe 't uitkomt. div#content heeft automatisch (dat is altijd zo) 'n z-index van 1, dus als 't maar hoger is dan 1, dan is 't goed.

 

[nkamp]

Hallo Goeroeboeroe,

Ik ben je ontzettend dankbaar. Ik ben al op je site aan het lezen ik heb al even naar een horizontaal menu zitten kijken. Maar goed dit werkt nu dus laat ik dit zo. Ik heb de menu al wel met links erin aan het werk maar ik heb het er even uitgehaald om op het 'echte' probleem te concentreren. Dus nu ga ik dit op mijn te ontwikkelen site weer verder gebruiken.

Maar ik begrijp dat jQuery menu geen slechte keuze is?

Goed nu verder verdiepen in photoshop.

Ik zal de vraag nu op opgelost zetten.

Nogmaals hartstikke bedankt en ik ga op de site lezen/kijken wat er nog verder van mooie voorbeelden zijn. Verder ben ik mij aan het verdiepen in jQuery/Ajax + PHP/MySQL.

Gr.

Nico