10 berichten aan het bekijken - 1 tot 10 (van in totaal 10)
  • Q:
    Bijdrager
    EL Mystica

    [CSS] Footer wil niet zakken :(

    Hoi,

    Ik heb een probleempje met een site.

    http://www.broodjeliefde.be/clients/coc/site/index.php
    (never mind the content, is maar dummy)

    Zoals je ziet gaat die footer te hoog. bij een langere dummytext zit ie laag genoeg, maar als mijn rechter content kleiner wordt, dan komt de footer hoger.

    Kan iemand vertellen wat er fout is, en vooral: kan iemand me vertellen waar ik de fundamentele fout maak in mijn redenering bij de opbouw van de css? Want het zijn dergelijke problemen die me vaak te lang bezig houden.

    Dank bij voorbaat,
    EL

    Bijdrager
    LittleJohnny

    [code:1:8d5b7881d9]#footer {
    display:block;
    position:relative;
    margin: 20px 0px 0px 0px;
    padding-top: 12px;
    font-size: 10px;
    text-align: center;
    color: white;
    background-image: url(../assets/footer_bg.png);
    background-repeat: repeat-x;
    height: 68px;
    background-color: #006DDA;
    width: 100%;
    }[/code:1:8d5b7881d9]

    probeer

    [code:1:8d5b7881d9]#footer {
    display:block;
    position:relative;
    margin: 20px 0px 0px 0px;
    padding-top: 12px;
    font-size: 10px;
    text-align: center;
    color: white;
    background-image: url(../assets/footer_bg.png);
    background-repeat: repeat-x;
    height: 68px;
    background-color: #006DDA;
    width: 100%;
    clear:both;
    }[/code:1:8d5b7881d9]

    en het zou moeten werken

    Bijdrager
    EL Mystica

    Nee, toch niet :oops:

    Bijdrager
    iPod Jimmy

    Heb je hier al naar gekeken?

    A List Apart – Exploring Footers

    Geblokkeerd
    Anoniem

    Even een paar vraagjes, en misschien een mogelijke oplossing;)

    Waarom doe je dit:
    [code:1:d3818a1eb2]<a href=’?pageID=1&amp;sectionID=7′>sociaal tolken en vertalen</a><br />
    <a href=’?pageID=1&amp;sectionID=8′>kwaliteitskring STVD</a><br />
    <a href=’?pageID=1&amp;sectionID=9′>links</a><br /> [/code:1:d3818a1eb2]
    In plaats van er een list van te maken zoals:
    [code:1:d3818a1eb2]<ul>
    <li><a href=’?pageID=1&amp;sectionID=7′>sociaal tolken en vertalen</a></li>
    <li><a href=’?pageID=1&amp;sectionID=8′>kwaliteitskring STVD</a></li>
    <li><a href=’?pageID=1&amp;sectionID=9′>links</a></li>
    </ul>[/code:1:d3818a1eb2]

    En ik zie dat je heel netjes div’s gebruikt, maar dan ineens tabellen voor de content… van wat ik kan zien zit daar ook je probleem. Je footer heb je nu als het ware onder je tabellen (je content) geplakt. Als je tussen je footer en je content een clear:both gebruikt, zou je van het probleem af moeten zijn.

    Maar is het niet makkelijker (in dit geval zeker) om je content gewoon netjes op te maken met “p” en headertags (h1, h2, h3)? Dat maakt het een stuk overzichtelijker, waardoor je dit soort euvel veel makkelijker zelf kan vinden:)

    Bijdrager
    EL Mystica

    De table is voor het tonen van data op bepaalde pagina’s, waarvoor tables ook gemaakt zijn. Dus ook in dat geval moeten ze werken.

    normaal gaan ze ook gebruik maken van headertags en p’s, maar er moeten veel data in tables kunnen getoond worden.

    Maar ik krijg met die clear nog altijd geen goed resultaat:|

    De lists in de navigatie komen er nog;)

    Bijdrager
    aerosoul

    Je moet de opbouw van je Html ffies aan herstructureren. Wat een stuk handiger werkt is zowizo een container d’r omheen dus iets als dit:

    [code:1:c4e9c73225]
    <container>

    <header>
    hier je headerdingen
    </header>

    <wrapper>
    <left></left>
    <content></content>
    </wrapper>

    </container>
    [/code:1:c4e9c73225]

    En omdat je toch niks in je footer hebt staan zou je in je css dit mee kunnen geven:

    [code:1:c4e9c73225]
    body,html {
    height:100%;
    }

    #container {
    background:url(image.jpg) repeat-x bottom;
    height:100%;
    }

    #wrapper {
    margin-bottom: <de hoogte van je footer>px;
    }

    [/code:1:c4e9c73225]

    Bijdrager
    aerosoul

    Mocht je er wel dingen in willen zetten kan je ook nog je Footer div postition:absolute; bottom:0px mee kunnen geven en je wrapper evengoed die margin meegeven.

    Bijdrager
    EL Mystica

    Het is heel vreemd.
    Ik heb nu die wrapper es een opvallende kleur gegeven en het probleem ligt blijkbaar bij het “partners”-block. Die wordt niet mee opgenomen in die wrapper.

    En ik heb geen idee hoe dat komt:(

    Bijdrager
    hansenonline

    ik zou zeggen begin overnieuw en hou de structuur simpel, geen div’s om div’s in te stoppen die het zelfde zijn en als je een tabel of list hebt geef je deze de id of class aan die nu de div er omheen heeft.

    verder kijk eens naar fauxcollomns ik denk dat je met deze techniek het probleem van je footer oplost.http://alistapart.com/articles/fauxcolumns/

10 berichten aan het bekijken - 1 tot 10 (van in totaal 10)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.