[CSS] Footer wil niet onderaan - Softwareontwikkeling

woensdag 17 september 2008 15:13

Acties:

Topicstarter

Na veel zoeken kom ik niet uit het volgende probleem. Ik heb een site die is opgebouwd uit een header, contentgedeelte en footer. De HTML is als volgt:

HTML:

<body>
    <div id="rondom">
        <div id="header">
            <div id="search">
            </div>
        </div>
        <div id="rondom_content">
            <div id="hoekje">
                <div id="left">
                    <div id="menu">
                    </div>
                </div>
                <div id="middle">
                    <div id="midden">
                    </div>
                    <div id="right">
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>

En de CSS:

Cascading Stylesheet:

body {
    font-family: Helvetica,Arial,sans-serif;
    margin: 0px 0px 0px 0px;
    font-size: 12px;
    background-color: #ffffff;
}

div#rondom {
    top: 10px;
    position: absolute;
    width: 959px;
    left: 50%;
    margin-left: -475px;
}

div#header{
    position: relative;
    width: 959px;
    height: 51px;
    background-image: url(../images/header.gif);
}

div#rondom_content {
    position: relative;
    background-color: #faf8f0;
    background-image: url(../images/right.gif);
    background-repeat: repeat-y;
    background-position: right; 
    width: 959px;
    
}

div#hoekje{
    position: relative;
    width: 959px;
    background-image: url(../images/topright.gif);
    background-repeat: no-repeat;
    background-position: top right;
}

div#left {
    position: relative; 
    float: left;
    width: 215px;
}

div#middle {
    position: relative; 
    width: 740px;
    float: right;
}

div#midden{
    position: relative;
    float: left;
    left: 0px;
    width: 408px;
    padding-left: 15px;
    padding-right: 15px;
    border-left: #dbd7c8 solid 1px;
    border-right: #dbd7c8 solid 1px;
}

div#menu {
    border-top: #dbd7c8 double 4px;
    margin-top: 35px;
    margin-left: 10px;
    margin-right: 19px;
}
div#right {
    position: relative;
    float: right;   
    right: 0px;
    width: 297px;
}

div#footer {
    position: relative;
    width: 959px;
    height: 59px;
    background-image: url(../images/footer.gif);
}

Omdat alle div's relative zijn zou volgens mij de footer onderaan komen te staan maar hij komt direct onder de header over het contentgedeelte heen te staan.

Heb het halve internet afgesurfd maar kan nergens een oplossing vinden.

Iemand een idee?

Voor het webvoorbeeld zie: http://joomla2.hendrikkappe.nl

woensdag 17 september 2008 15:14

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

code:

1	BODY,HTML { width: 100%; height: 100%; margin:0;padding:0}

wil nog wel eens wat uitmaken

vergeet de bovenste methode... dat is het niet

je content divs hebben een float (en dus werkt hun 'hoogte' niet mee in het opreken van de omvattende box) en voldoet een

code:

1	div#footer { clear:both }

(noteer, ik had Footer als id, dat moet natuurlijk footer met kleine f zijn)

[ Voor 70% gewijzigd door RM-rf op 17-09-2008 15:17 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 17 september 2008 15:16

Acties:

KappuhH

Topicstarter

RM-rf schreef op woensdag 17 september 2008 @ 15:14:
code:
1
BODY,HTML { width: 100%; height: 100%; margin:0;padding:0}
wil nog wel eens wat uitmaken

vergeet de bovenste methode... dat is het niet

vermoedelijk hebben je content div s een float en voldoet een
code:
1
#Footer { clear:both }

Helpt helaas niet.

woensdag 17 september 2008 15:22

Acties:

Kiphaas7

Er zijn verschillende topics hierover, even de zoekfunctie gebruiken?

[CSS] Div horizontaal centreren op de onderkant

Bijvoorbeeld, en dan vooral de eerste post van Bosmonster.

woensdag 17 september 2008 15:28

Acties:

KappuhH

Topicstarter

KappuhH schreef op woensdag 17 september 2008 @ 15:16:
[...]

Helpt helaas niet.

Sorry, dat clear: both; helpt wel. Maar nu zit ik met het volgende probleem dat mijn div rondom_content een hoogte van 0 heeft terwijl die met de tekst mee moet lopen...

woensdag 17 september 2008 15:30

Acties:

disjfa

be

KappuhH schreef op woensdag 17 september 2008 @ 15:28:
[...]
Sorry, dat clear: both; helpt wel. Maar nu zit ik met het volgende probleem dat mijn div rondom_content een hoogte van 0 heeft terwijl die met de tekst mee moet lopen...

je float al je inhoud erin. Dat betekend dat het uit je context van je opbouw gehaalt word waardoor je hoofdcontainer geen hoogte meer kent.

2 oplossingen. Een overflow van je container op auto of hidden zetten. En aan het eind van je container iets erin clearen zodat hij weet hoe hoog hij is.

Dit is echt heel erg basic.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 17 september 2008 15:36

Acties:

KappuhH

Topicstarter

Het is gelukt, bedankt!

woensdag 17 september 2008 15:40

Acties:

disjfa

be

Maak trouwens je scherm eens een keer kleiner dan de inhoud

99% van al je position in je css is overbodig. Zoek een keer een andere manier van je website horizontaal te centreren.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 17 september 2008 17:47

Acties:

RetroTycoon

disjfa schreef op woensdag 17 september 2008 @ 15:40:
Maak trouwens je scherm eens een keer kleiner dan de inhoud

99% van al je position in je css is overbodig. Zoek een keer een andere manier van je website horizontaal te centreren.

offtopic:
* RetroTycoon fluistert over less is more

woensdag 17 september 2008 23:56

Acties:

KappuhH

Topicstarter

disjfa schreef op woensdag 17 september 2008 @ 15:40:
Maak trouwens je scherm eens een keer kleiner dan de inhoud

Hoe bedoel je dit?

99% van al je position in je css is overbodig. Zoek een keer een andere manier van je website horizontaal te centreren.

Op welke manier is horizontaal centreren beter dan? Heb het namelijk zo ooit eens uit een boek gehaald.

donderdag 18 september 2008 09:41

Acties:

Bosmonster

*zucht*

KappuhH schreef op woensdag 17 september 2008 @ 23:56:
[...]

Hoe bedoel je dit?

[...]
Op welke manier is horizontaal centreren beter dan? Heb het namelijk zo ooit eens uit een boek gehaald.

Zoek eens op margin: 0 auto. Of bekijk het voorbeeld dat eerder in dit topic genoemd is (wat je blijkbaar niet gedaan hebt..)

donderdag 18 september 2008 11:12

Acties:

Redshark

Ik heb ooit deze eens g elezen en vond dat destijds erg verhelderend:
http://www.gigadesign.be/2006/07/layout-met-100-hoogte/

donderdag 18 september 2008 13:50

Acties:

Verwijderd

Ik heb het zelf opgelost met deze oplossing:

http://fortysevenmedia.co..._footer_stay_put_with_css

(ben er zelf ook mee bezig)