12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)
  • Q:
    Bijdrager
    tomperd

    Footer div onder main div?

    Hey mensen,

    Heb een probleempje in Dreamweaver CS3… Ik zou namelijk mijn footer div onder de main div willen krijgen (NIET FIXED > vastgeplakt aan bodem scherm :)).

    Structuur is namelijk zo:

    Head

    Main

    Footer

    *Moet ik dan de main div relative maken? En wat moet ik dan met de footer doen om deze onder de main te krijgen?

    Alvast bedankt!

    Groetjes,

    Tom.

    Bijdrager
    Jeordy

    http://www.youtube.com/results?search_type=&search_query=div+layouts

    Kijk eens, complete video tutorials om het je van voor tot achter te leren.

    Bijdrager
    iMaurits

    Tomperd,

    voor mijn websites gebruik ik altijd een zogenaamde wrapper die het hele zooitje bij elkaar pakt! Ik zal even een voorbeeld geven.

    Beginnend bij de body:

    [code:1:5fac04650d]<body>

    <div id="wrapper">
    <div id="head"> …. </div>
    <div id="main"> …. </div>
    <div id="footer"> …. </div>
    </div>
    </body>[/code:1:5fac04650d]

    In het css gaat het dan als volgt:

    In de body tag definieer ik enkel de background, fonts.

    [code:1:5fac04650d]body {
    background:
    font-family:
    font-size:
    color:
    }

    #wrapper {
    margin: 0 auto; // door deze lijn er in te bakken is standaard jou pagina gecentreerd, ook als je je browser verkleind scrolled de rest mee
    width: 780px;
    }

    #header {
    height: 80px;
    width: 780px;
    margin: 20px 0 0 0;
    }

    #main {
    zelfde liedje
    }

    #footer {
    width: 780px;
    float: left;
    text-align: center;
    }[/code:1:5fac04650d]

    En nog even een tip, standaard bak ik deze regel ook altijd bovenaan in, in me css file:

    [code:1:5fac04650d]* { padding: 0; margin: 0; border:none; }[/code:1:5fac04650d]

    Hierdoor heeft niets standaart een padding, margin en een border tenzij je het aangeeft. Ik hoop dat je der wat aan hebt gehad en suc6 der mee!

    Bijdrager
    tomperd

    Posts hierboven, bedankt!

    @iMaurits:

    Erg bedankt voor de uitleg!;) maar dit had ik al…

    De footer blijft steeds over mijn main content zweven.

    Echt bizar… :/ En op youtube vind ik geen fatsoenlijke tutorials eerlijk gezegd, en op google vind ik enkel tutorials die je uitleggen hoe je je footer fixed kan maken – maar dat wil ik dus niet.

    Dus als er iemand weet hoe je je footer onder je main kan krijgen – let me know!:)

    Bijdrager
    F_Vervoort

    @tomperd

    Misschien moet je even ons je code tonen, dan zien we wellicht meteen wat er mis is…

    Bijdrager
    tomperd

    @F_Vervoort: das nog niet zo’n slecht idee.;)

    HTML:

    [code:1:9f1a07816b]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <link href="css/layout.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div id="container">
    <div id="head">
    <img src="img/head/header01.png" alt="head_01">
    </div>
    <div id="main">
    <div id="main_text">
    </div>
    <div id="main_img">
    </div>
    </div>
    <div id="foot">
    </div>
    </div>
    </body>
    </html>[/code:1:9f1a07816b]

    CSS:

    [code:1:9f1a07816b]@charset "UTF-8";

    * {
    padding:0;
    margin:0;
    }

    #html, body {
    }

    #container {
    background-color: #666666;
    height: 600px;
    width: 900px;
    margin-top: -300px;
    margin-left: -450px;
    position: absolute;
    left: 50%;
    top: 50%;
    }
    #head {
    position: absolute;
    height: 165px;
    width: 900px;
    }
    #main {
    background-color: #33FFFF;
    position: absolute;
    height: 349px;
    width: 900px;
    top: 165px;

    }
    #main_text {
    position: absolute;
    height: 279px;
    width: 500px;
    left: 35px;
    top: 35px;
    background-color: #99FF00;

    }
    #main_img {
    position: absolute;
    height: 279px;
    width: 280px;
    left: 585px;
    top: 35px;
    background-color: #009900;
    right: 35px;
    }
    #foot {
    background-color: #66FF99;
    position: absolute;
    height: 86px;
    width: 900px;
    top: 514px;
    }
    [/code:1:9f1a07816b]

    Bijdrager
    F_Vervoort

    Hoi,

    ik mis nog een regeltje in je code

    [code:1:c99738ad2b]<style type="text/css" media="screen"><!–[/code:1:c99738ad2b]

    … met de eindcode.

    Verder zou ik de footer zo omschrijven:

    [code:1:c99738ad2b]#foot {
    background-color: #66FF99;
    position: absolute;
    height: 86px;
    width: 900px;
    bottom: 0px;
    }[/code:1:c99738ad2b]

    Bijdrager
    tomperd

    Bedankt iedereen, maar het is dus blijkbaar zo dat de container absoluut is en de inhoud ervan relatief.:)

    Ben nog steeds aan het sukkelen, het is echt trial and error prutswerk…

    Toch bedankt.;)

    Bijdrager
    Japsuh

    clear: both; toevoegen aan de footer (in de CSS natuurlijk).

    Bijdrager
    FastMac

    Misschien afstappen van de position: absolute;
    en meer float: gebruiken in css?

    Of zeg ik nu gekke dingen? Alleen IE6 en lager heeft er een beetje problemen mee.
    Maar als we die browsers boycotten! Dan is er niks meer aan de hand.

    Bijdrager
    Rub3n

    iMaurits moet in een restaurant gaan werken. Met zijn bakken hehe;)

    Bijdrager
    Pivni Pes

    position: absolute; er uit gooien, dat zou ik dan doen.

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

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