Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Footer staat niet op de juiste plek

rolla
3 antwoorden
  • Ik ben bezig mijn site geheel op nieuw te maken met behulp van div's en css aangezien de oude site m.b.v. tabellen is gemaakt.

    Nu heb ik een opzetje gemaakt:

    [img:512167713b]http://www.kuijt-schulte.nl/site/nieuw/layout.JPG[/img:512167713b]

    Nu heb ik e.e.a. uitgewerkt en ik krijg mijn footer niet onder aan. Ik had gegoogled en gevonden dat ik mijn footer absolute moest maken. Dat heb ik dus gedaan, maar mijn footer verschijnt nu naast mijn container div.

    Om te zien wat ik bedoel: http://www.kuijt-schulte.nl/site/nieuw

    [code:1:512167713b]
    <?php
    if(!isset($_GET['page']))
    {
    $page='home';
    }
    elseif(strtolower($_GET['page']) == "index")
    {
    $page='home';
    }
    elseif(!file_exists($_GET['page'] .".php"))
    {
    $page='home';
    }
    else
    {
    $page=$_GET['page'];
    }

    ?>


    <html>
    <head>
    <title>Hier komt de titel</title>

    <META HTTP-EQUIV="imagetoolbar" CONTENT="no">

    <link href="stylesheets/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header"><img src="images/header.jpg"</div>

    <div id="nav_container">
    <div id="menu">
    <ul>
    <li><a class="menu" href="index.php?page=0">Home</a></li>
    <li><a class="menu" href="index.php?page=1">Bedrijfsprofiel</a></li>
    <li><a class="menu" href="index.php?page=2">Grondverzet</a></li>
    <li><a class="menu" href="index.php?page=3">Transport</a></li>
    <li><a class="menu" href="index.php?page=4">Verhuur</a></li>
    <li><a class="menu" href="index.php?page=5">Links</a></li>
    <li><a class="menu" href="index.php?page=6">Contact</a></li>
    </ul>
    </div>
    </div>

    <div id="content">
    <?php include($page.".php"); ?>
    </div>

    <div id="footer"><center>Copyright by me</center></div>

    </div>

    </body>
    </html>

    [/code:1:512167713b]

    [code:1:512167713b]
    html, body {
    height: 100%; /* héél belangrijk */
    }

    #container {
    min-height: 100%;
    height:auto !important; /* voor moderne browsers */
    height:100%; /* voor IE */
    width: 790px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #336699;
    }

    #header {
    position: relative;
    margin: 0;
    float: top;
    width: 790px;
    background-color: none;
    }

    #nav_container {
    position: relative;
    float: left;
    width: 150px;
    height: 100%;
    background-color: #63A062;
    }

    #menu {
    position: absolute;
    float: left;
    width: 150px;
    height: 300px;
    background-color: #BCC9D7;
    }

    a.menu:diplay:block {width: 150px;}
    a.menu:link { color: blue; background-color: #BCC9D7}
    a.menu:visited { color: yellow; background-color: #BCC9D7 }
    a.menu:hover { color: lime; background-color: #336699}
    a.menu:active { color: green; background-color: #BCC9D7}

    #content {
    position: relative;
    float: right;
    width: 640px;
    background-color: #FFFFFFF;
    }

    #footer {
    position: absolute;
    bottom: 0px;
    width: 790px;
    height: 20px;
    background-color: #006699;
    color: #FFFFFF;
    [/code:1:512167713b]
  • Ik kom snel voorbij gefietst dus ik heb je hele code niet bekeken. Maar zo op het eerste oog zou ik zeggen: Gooi die absolute positionering uit je footer, clear hem left en float hem left.
    (En haal die <center> weg en voeg een doctype toe :wink: )
  • Kijk eens hier naar voor een "zoals het hoort" voorbeeld/template.

    Je gebruikt html en xhtml door elkaar (> en />;), je gebruikt geen doctype, je gebruikt deprecated html, en zoek hier de fout:[code:1:48b28be782]<img src="images/header.jpg"</div>[/code:1:48b28be782]

    Ook; als je height; 100% gebruikt kan je er eigenlijk geen border bijdoen want die komt boven op je 100%, dus 100% + 2pixels in jouw geval. Dit is dus groter dan het browser venster en krijg je dus altijd een scroll-bar. Dat het hier goed gaat, doordat je geen doctype hebt en die important ervoor hebt staat doet er dan niet veel meer toe, omdat je [i:48b28be782]wel[/i:48b28be782] een doctype behoord te gebruiken. Sowieso ontgaat de logica van deze constructie me een beetje.

    Heel goed dat je wat meer standards compliant wilt gaan code maar dan wel meteen alles :p

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.