Ik ben bezig om een uiterst simpele template te ontwikkelen in pure HTML (strict) en CSS. Ik heb het resultaat bijna af. Wat zoek c.q. maak ik? Een template die qua hoogte beeldvullend is en datzelfde template moet een header, midden gedeelte (content) en een footer hebben. Waarbij de header en de footer een gefixeerde hoogte hebben.
Ik heb met behulp van deze tutorial een bijna correct resultaat, echter loop ik tegen een klein probleem aan.
Wat heb ik?
Zie hier mijn resultaat, waarbij ik twee voorbeeldjes online heb gezet die precies het probleem tonen: het eerste linkje toont de template met veel vulling, waarbij dus naar onderen gescrolled moet worden om de footer te bekijken. Het tweede linkje toont hetzelfde template zonder vulling (slecht een regel ter verduidelijking) waarbij de CSS er voor zorgt dat de pagina uitgerekt is naar de hoogte van het totale browserscherm (de body).
Het probleem
Wat gaat er fout? Op het eerste gezicht niets. Echter, het volgende.
Als je het [voorbeeld met vulling] opent in Internet Explorer, dan is alles perfect. Als je helemaal naar onderen scrolt, dan zie je dat de footer in verhouding met de content perfect geplaatst is - alles werkt naar behoren, je ziet als laatste regel netjes de tekst `laatste regel` staan. Hetzelfde geldt voor het [voorbeeld zonder vulling] - als je je browserscherm verkleint en je gaat met je cursor op het hoekje van je browserscherm (rechtsonder) staan, je klikt vervolgens om het browserscherm handmatig te verkleinen/vergroten en je maakt een slepende beweging naar boven (waardoor je dus de footer tegen de enkele regel aan laat komen (kortom, je verkleint het browserscherm net zolang - in de hoogte - totdat de footer tegen de content aankomt)) dan zul je zien dat de footer uiteindelijk netjes tegen de content `aanbotst`. Precies zoals je het wilt.
Maar dan, Firefox.
Als je bovenstaande stappen, vanaf de subheader `het probleem`, herhaalt in Firefox, zie je een ander resultaat. Als je namelijk de pagina met het [voorbeeld met vulling] opent in FF, dan zie je dat er na de content een padding te zien is van 100 pixels (de hoogte van de footer) en dan pas de footer zelf. Dat komt, de class .main heeft een padding-bottom van 100px die er voor zorgt dat het er goed uitziet in IE (als je deze padding weglaat, dan zal de content bij veel vulling achter de footer schuiven, en dus niet zichtbaar zijn. Probeer dit maar eens.)
Tevens gaat het mis bij weinig vulling, de footer zal bij het verkleinen van het browserscherm `tegen de padding van 100px opbotsen`, probeer ook dat maar eens.
Wat is de oplossing? Wel, zoals gezegd heeft de .main class een padding-bottom van 100px. Als je deze padding weghaalt, draait het probleem zich om: alles wordt perfect getoond in FF, maar juist weer niet in IE. Voor de resultaten daarvan verzoek ik je vriendelijk om het zelf gewoon even te testen door de padding-bottom uit de .main class te verwijderen.
Op dit moment kan ik dus kiezen: goede weergave in IE, of goede weergave in FF.
Je snapt mijn punt - ik wil graag een correct resultaat in beide browsers - waarbij de enige browser waar de CSS niet compatible mee hoeft te zijn IE op de MAC is.
Heeft iemand een idee waar ik de oplossing moet zoeken?
Ik heb het gevoel dat ik erg dichtbij ben. Als iemand simpelweg een andere template heeft die exact hetzelfde bereikt (100% hoogte met een header, content-gedeelte dat uitrekt en een footer) dan stel ik me daar graag voor open.
Ik heb met behulp van deze tutorial een bijna correct resultaat, echter loop ik tegen een klein probleem aan.
Wat heb ik?
Zie hier mijn resultaat, waarbij ik twee voorbeeldjes online heb gezet die precies het probleem tonen: het eerste linkje toont de template met veel vulling, waarbij dus naar onderen gescrolled moet worden om de footer te bekijken. Het tweede linkje toont hetzelfde template zonder vulling (slecht een regel ter verduidelijking) waarbij de CSS er voor zorgt dat de pagina uitgerekt is naar de hoogte van het totale browserscherm (de body).
Het probleem
Wat gaat er fout? Op het eerste gezicht niets. Echter, het volgende.
Als je het [voorbeeld met vulling] opent in Internet Explorer, dan is alles perfect. Als je helemaal naar onderen scrolt, dan zie je dat de footer in verhouding met de content perfect geplaatst is - alles werkt naar behoren, je ziet als laatste regel netjes de tekst `laatste regel` staan. Hetzelfde geldt voor het [voorbeeld zonder vulling] - als je je browserscherm verkleint en je gaat met je cursor op het hoekje van je browserscherm (rechtsonder) staan, je klikt vervolgens om het browserscherm handmatig te verkleinen/vergroten en je maakt een slepende beweging naar boven (waardoor je dus de footer tegen de enkele regel aan laat komen (kortom, je verkleint het browserscherm net zolang - in de hoogte - totdat de footer tegen de content aankomt)) dan zul je zien dat de footer uiteindelijk netjes tegen de content `aanbotst`. Precies zoals je het wilt.
Maar dan, Firefox.
Als je bovenstaande stappen, vanaf de subheader `het probleem`, herhaalt in Firefox, zie je een ander resultaat. Als je namelijk de pagina met het [voorbeeld met vulling] opent in FF, dan zie je dat er na de content een padding te zien is van 100 pixels (de hoogte van de footer) en dan pas de footer zelf. Dat komt, de class .main heeft een padding-bottom van 100px die er voor zorgt dat het er goed uitziet in IE (als je deze padding weglaat, dan zal de content bij veel vulling achter de footer schuiven, en dus niet zichtbaar zijn. Probeer dit maar eens.)
Tevens gaat het mis bij weinig vulling, de footer zal bij het verkleinen van het browserscherm `tegen de padding van 100px opbotsen`, probeer ook dat maar eens.
Wat is de oplossing? Wel, zoals gezegd heeft de .main class een padding-bottom van 100px. Als je deze padding weghaalt, draait het probleem zich om: alles wordt perfect getoond in FF, maar juist weer niet in IE. Voor de resultaten daarvan verzoek ik je vriendelijk om het zelf gewoon even te testen door de padding-bottom uit de .main class te verwijderen.
Op dit moment kan ik dus kiezen: goede weergave in IE, of goede weergave in FF.
Je snapt mijn punt - ik wil graag een correct resultaat in beide browsers - waarbij de enige browser waar de CSS niet compatible mee hoeft te zijn IE op de MAC is.
Heeft iemand een idee waar ik de oplossing moet zoeken?
Ik heb het gevoel dat ik erg dichtbij ben. Als iemand simpelweg een andere template heeft die exact hetzelfde bereikt (100% hoogte met een header, content-gedeelte dat uitrekt en een footer) dan stel ik me daar graag voor open.
/u/129382/crop5f6f24af0ae5d.png?f=community)