Footer onderaan

[The Lion93]

Hallo,
Ik maak een website voor informatica op school maar ik krijg het maar niet voor elkaar om de footer onafhankelijk van de inhoud onder de andere divs te krijgen

http://www.theyellowarmy.nl/Test/

Zo moet het worden:

 

[Spina]

Maak in css onder footer van
postition: relative;

postion: absolute;

 

[The Lion93]

Geen verschil...in IE klopt er trouwens helemaal niks van

 

[Goeroeboeroe]

Hallo,
Ja, IE, breek me de bek niet open :evil:

Allereerst zou ik bij #content de margin-left weghalen en die gewoon ook naar links floaten. Dan kun je eventueel 'n kleine marge links erin laten voor wat afstand.
Het voordeel hiervan is dat de footer nu (na nog wat dingetjes die zo komen) altijd onder de langste kolom komt te staan, ongeacht of dit de linker- of rechter is.

Nu zijn beide kolommen gefloat. Dat wil zeggen dat volgende elementen, zoals de footer, zich niets meer van de kolommen aantrekken maar er min of meer vrolijk bovenop gaan staan. Zoals je al gemerkt hebt.

Als je nu aan #footer toevoegt:

clear: both;

Dan dwing je #footer om ónder gefloate elementen (hier de kolommen) te gaan staan, en niet eroverheen of ertussen of wat dan ook.
Ik vermoed dat dit wel werkt, en anders horen we 't wel.

 

[andriesf]

waarschijnlijk werkt dat van goeroeboeroe wel, maar als dat niet werkt kun je ook nog een div om de 'sidebar' en de content zetten, zonder achtergrondafbeelding en die ook floaten.

Dan komt de footer automatisch onder de div die om de sidebar en contentte staan.

 

[The Lion93]

Bedankt, ik heb die laatste suggestie ook nog gebruikt zodat ik de margin tussen de Footer en Middle weer kon herstellen.

Ik zit nu alleen nog met één probleempje. De breedte van de Content div lijnt net niet helemaal uit met de Header en de Footer. Maar als ik de width van de Content div iets groter maak dan verplaatst de Content div naar onder de Menu div.

Hoe kan ik dit nog oplossen?

Ow en nog een laatste vraag.
Ik wil dat als er op de W3C buttons wordt geklikt dat de validatie in een nieuw tabblad wordt geopend. Dus ik voegde target="_blank" toe maar juist hierop geeft de W3C validator een error (ironisch). Hoe kan ik dit oplossen zonder het attribuut "target"?

 

[Goeroeboeroe]

Je header en footer zijn geen 1000 px breed, maar 1006, want links en rechts komt er nog 'n border van 3 px bij.
Je moet div#page en div#middle dus ook 1006 px breed maken. (Omdat overflow standaard op visible staat, wordt het te brede deel van footer en header gewoon getoond.)
Vervolgens moet je #menu en/of #content ook 6 px breder maken. Je kunt #content ook naar rechts floaten, staat-ie ook gelijk.
(Terzijde: ik zie dat je voor 'n id Content gebruikt. Is geen goed idee. Voor hoofd- en kleine letters in css zijn geen regels, dat wil zeggen dat browsers dat verschillend uitleggen. Waardoor 'n fout met 'n hoofd/kleine letter bij testen makkelijk onopgemerkt kan blijven, maar wel problemen kan gaan geven in 'n niet geteste browser, omdat die juist wel of juist geen verschil maakt tussen content en Content.)

Open in 'n nieuw tabblad e.d.: het gebruik van target wordt al zo'n tien jaar afgeraden. In de komende (en deels al werkende) html5 is het gewoon helemaal verboden (behalve in beperkte mate voor iframes, meer beperkt dan nu). Het was bedoeld voor frames, en frames hebben echt gigantische nadelen (zijn ook verboden in html5). Tegenwoordig heb je veel betere technieken.
Je kunt het nog wel gebruiken als je 'n transitional doctype gebruikt in plaats van strict, maar daarmee blokkeer je dan gelijk het overschakelen naar html5 in de toekomst. transitional is bedoeld voor bestaande pagina's, waarbij het ombouwen te veel werk is. strict voor nieuwe.

Tegenwoordig wordt er (terecht) vanuit gegaan dat je als sitebouwer niets te maken hebt met hoe mensen nieuwe vensters of tabs of wat dan ook beheren. (Vrijwel) elke browser heeft inmiddels de mogelijkheid om de gebruiker zelf te laten kiezen of ze 'n nieuw venster, tab huidige tab, ... willen gebruiken.
Je kunt 't wel met JavaScript gaan simuleren. Dan is 't valid en kun je toch target gebruiken. Maar ook dat werkt niet altijd. Ik heb Firefox zo ingesteld dat jij, al ga je bloot op je hoofd staan, geen nieuw venster bij mij kunt openen
Oftewel: ik zou het gewoon niet gebruiken.

 

[The Lion93]

Ja precies, ik probeerde mijn site al helemaal volgens HTML 4.01 strict te schrijven.

Ok, je raad me dus aan om alle namen van divs met kleine letters te schrijven? Maar het is nu zo dat in het css bestand én in het html bestand de eerste letter een hoofdletter is. Toch maar veranderen naar kleine letters?

 

[Goeroeboeroe]

Ik zou alles in kleine letters doen. Als je namelijk 'n fout maakt, kan 't zijn - ik roep maar even wat - dat IE 6, 7, 8, Firefox, Safari en Google Chrome 't gewoon accepteren, maar dat Opera de id opeens niet meer herkent. Of een of andere obscure browser, of Opera voor mobiel, of...
Omdat er geen echte regels voor bestaan, controleert de validator hier ook niet op. Als je echt 100% zeker weet dat je nóóóóit 'n hoofdletter vergeet.... Maar als ik dat over mezelf zou denken zou ik de neiging hebben naar 'n cursus zelfoverschatting te gaan
Ik zou 't dus even veranderen.

 

[The Lion93]

Ok, bedankt voor alle informatie!