Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Footer op bodem van pagina..

Anoniem
Oompa
5 antwoorden
  • Ik ben aan het proberen mijn footer voor een website op de bodem van de pagina te krijgen, als ik nu een tekst heb die langer wordt dan de footer, dan gaat hij over de footer heen.. De footer blijft vaststaan op zijn plek en schuift niet mee naar beneden..

    de css code :

    [code:1:301b4148da]
    #apDiv4 {
    position:inherit;
    width:799px;
    height:20px;
    z-index:0;
    left: 2px;
    top: 603px;
    background-color: #99cc66;
    text-align: center;
    }
    [/code:1:301b4148da]
  • Zonder HTML code wordt het lastig omdat ik zo de context niet kan zien.
    Als de footer een child is van een parent div, dan zit het probleem 'm waarschijnlijk in de parent. Ik heb ooit zoiets gehad en toen was 't de overflow van de parent. Overigens; postitioneren is niet altijd handig, dus wellicht heb je dat helemaal niet nodig?
    maar nogmaals, zonder context (lees: code) wordt het lastig.
  • Code van de pagina:

    [code:1:2fc1456ae6]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Adres? Telefoon nummer? Hier vindt u het.</title>
    <link href="flg.css" rel="stylesheet" type="text/css" />
    <style type="text/css" media="screen">
    @import url("Menu/Menu.css");

    @import url("Menu/Menu.css");

    @import url("Menu/Menu.css");

    @import url("Menu/Menu.css");

    @import url("Menu/Menu.css");

    @import url("Menu/Menu.css");

    @import url("Menu/Menu.css");

    @import url("Menu/Menu.css");


    #apDiv1 {
    position:absolute;
    width:437px;
    height:auto;
    z-index:0;
    left: 114px;
    top: 289px;
    background-color: #99cc66;
    visibility: visible;
    font-size: 14px;
    }
    #apDiv2 {
    position:absolute;
    width:346px;
    height:386px;
    z-index:3;
    left: 1px;
    top: 289px;
    visibility: visible;
    }
    .style1 {
    font-size: 14px
    }
    #apDiv3 {
    position:absolute;
    width:232px;
    height:149px;
    z-index:2;
    left: 569px;
    top: 289px;
    background-color: #99CC66;
    text-align: Center;
    }
    #apDiv4 {
    position:absolute;
    width:799px;
    height:20px;
    z-index:0;
    left: 2px;
    top: 603px;
    background-color: #99cc66;
    text-align: center;
    }
    #apDiv5 {
    position:absolute;
    width:232px;
    height:152px;
    z-index:1;
    left: 569px;
    top: 438px;
    }
    #apDiv6 {
    position:absolute;
    width:232px;
    height:152px;
    z-index:1;
    left: 569px;
    top: 438px;
    }
    #apDiv7 {
    position:absolute;
    width:232px;
    height:152px;
    z-index:4;
    left: 569px;
    top: 438px;
    }




    #apDiv8 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:4;
    left: 146px;
    top: 308px;
    }
    #apDiv9 {
    position:absolute;
    width:230px;
    height:301px;
    z-index:4;
    left: 570px;
    top: 289px;
    }
    </style>
    <script language="JavaScript1.2" type="text/javascript" src="Menu/mm_css_menu.js"></script>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

    <style type="text/css">
    <!–
    .style2 {
    color: #FFFFFF;
    font-size: 16px;
    }
    a:link {
    color: #000000;
    }
    a:visited {
    color: #000000;
    }
    a:hover {
    color: #333333;
    }
    –>
    </style>
    </head>

    <body>
    <div id="apDiv2">
    <div id="FWTableContainer1524995003">
    <table border="0" cellpadding="0" cellspacing="0" width="100">
    <!– fwtable fwsrc="Menu.png" fwpage="Page 1" fwbase="Menu.gif" fwstyle="Dreamweaver" fwdocid = "1524995003" fwnested="0" –>
    <tr>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="100" height="1" border="0" id="undefined_2" /></td>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
    </tr>
    <tr>
    <td><a href="index.html"><img name="Menu_r1_c1" src="Menu/Menu_r1_c1.gif" width="100" height="47" border="0" id="Menu_r1_c1" alt="" /></a></td>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="1" height="47" border="0" id="undefined_2" /></td>
    </tr>
    <tr>
    <td rowspan="2"><a href="javascript:;" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer1020203829_0', 'MMMenu1020203829_0',100,0,'Menu_r2_c1');"><img name="Menu_r2_c1" src="Menu/Menu_r2_c1.gif" width="100" height="52" border="0" id="Menu_r2_c1" alt="" /></a></td>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="1" height="2" border="0" id="undefined_2" /></td>
    </tr>
    <tr>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="1" height="50" border="0" id="undefined_2" /></td>
    </tr>
    <tr>
    <td><a href="javascript:;" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer1020203829_1', 'MMMenu1020203829_1',100,0,'Menu_r4_c1');"><img name="Menu_r4_c1" src="Menu/Menu_r4_c1.gif" width="100" height="52" border="0" id="Menu_r4_c1" alt="" /></a></td>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="1" height="52" border="0" id="undefined_2" /></td>
    </tr>
    <tr>
    <td><a href="javascript:;" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer1020203829_2', 'MMMenu1020203829_2',100,0,'Menu_r5_c1');"><img name="Menu_r5_c1" src="Menu/Menu_r5_c1.gif" width="100" height="48" border="0" id="Menu_r5_c1" alt="" /></a></td>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="1" height="48" border="0" id="undefined_2" /></td>
    </tr>
    <tr>
    <td><a href="javascript:;" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer1020203829_3', 'MMMenu1020203829_3',100,0,'Menu_r6_c1');"><img name="Menu_r6_c1" src="Menu/Menu_r6_c1.gif" width="100" height="52" border="0" id="Menu_r6_c1" alt="" /></a></td>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="1" height="52" border="0" id="undefined_2" /></td>
    </tr>
    <tr>
    <td><a href="javascript:;" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuShowMenu('MMMenuContainer1020203829_4', 'MMMenu1020203829_4',100,0,'Menu_r7_c1');"><img name="Menu_r7_c1" src="Menu/Menu_r7_c1.gif" width="100" height="49" border="0" id="Menu_r7_c1" alt="" /></a></td>
    <td><img src="Menu/spacer.gif" alt="" name="undefined_2" width="1" height="49" border="0" id="undefined_2" /></td>
    </tr>
    </table>
    <div id="MMMenuContainer1020203829_0">
    <div id="MMMenu1020203829_0" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="contact.html" id="MMMenu1020203829_0_Item_0" class="MMMIFVStyleMMMenu1020203829_0" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0');"> Contact </a> <a href="javascript:;" id="MMMenu1020203829_0_Item_1" class="MMMIVStyleMMMenu1020203829_0" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0','1');"> <span class="MMMenuItemSpanMMMenu1020203829_0">De&nbsp;Groep</span> <img src="Menu/arrows.gif" alt="" name="undefined_2" width="8" height="8" class="MMArrowStyleMMMenu1020203829_0" id="undefined_2" /> </a> <a href="javascript:;" id="MMMenu1020203829_0_Item_2" class="MMMIVStyleMMMenu1020203829_0" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0','2');"> <span class="MMMenuItemSpanMMMenu1020203829_0">Lid&nbsp;worden?</span> <img src="Menu/arrows.gif" alt="" name="undefined_2" width="8" height="8" class="MMArrowStyleMMMenu1020203829_0" id="undefined_2" /> </a> <a href="stichting.html" id="MMMenu1020203829_0_Item_3" class="MMMIVStyleMMMenu1020203829_0" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0');"> De&nbsp;stichting </a> </div>
    <div id="MMMenu1020203829_0_1" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="activiteiten.html" id="MMMenu1020203829_0_1_Item_0" class="MMMIFVStyleMMMenu1020203829_0_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0_1');"> Activiteiten </a> <a href="geschiedenis.html" id="MMMenu1020203829_0_1_Item_1" class="MMMIVStyleMMMenu1020203829_0_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0_1');"> Geschiedenis </a> </div>
    <div id="MMMenu1020203829_0_2" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="leeftijden.html" id="MMMenu1020203829_0_2_Item_0" class="MMMIFVStyleMMMenu1020203829_0_2" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0_2');"> Leeftijden </a> <a href="contributies.html" id="MMMenu1020203829_0_2_Item_1" class="MMMIVStyleMMMenu1020203829_0_2" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0_2');"> Contributies </a> <a href="uniformen.html" id="MMMenu1020203829_0_2_Item_2" class="MMMIVStyleMMMenu1020203829_0_2" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_0_2');"> Uniformen </a> </div>
    </div>
    <div id="MMMenuContainer1020203829_1">
    <div id="MMMenu1020203829_1" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="bevers.html" id="MMMenu1020203829_1_Item_0" class="MMMIFVStyleMMMenu1020203829_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_1');"> Kinderen&nbsp;van&nbsp;4&nbsp;-&nbsp;7&nbsp;jaar </a> <a href="welpen.html" id="MMMenu1020203829_1_Item_1" class="MMMIVStyleMMMenu1020203829_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_1');"> Jongens&nbsp;van&nbsp;7&nbsp;-&nbsp;10&nbsp;jaar </a> <a href="kabouters.html" id="MMMenu1020203829_1_Item_2" class="MMMIVStyleMMMenu1020203829_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_1');"> Meisjes&nbsp;van&nbsp;7&nbsp;-&nbsp;10&nbsp;jaar </a> <a href="verkenners.html" id="MMMenu1020203829_1_Item_3" class="MMMIVStyleMMMenu1020203829_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_1');"> Jongens&nbsp;van&nbsp;10&nbsp;-&nbsp;14&nbsp;jaar </a> <a href="padvinsters.html" id="MMMenu1020203829_1_Item_4" class="MMMIVStyleMMMenu1020203829_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_1');"> Meisjes&nbsp;van&nbsp;10&nbsp;-&nbsp;14&nbsp;jaar </a> <a href="explorers.html" id="MMMenu1020203829_1_Item_5" class="MMMIVStyleMMMenu1020203829_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_1');"> Jongeren&nbsp;van&nbsp;14&nbsp;-&nbsp;17&nbsp;jaar </a> <a href="stam.html" id="MMMenu1020203829_1_Item_6" class="MMMIVStyleMMMenu1020203829_1" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_1');"> Jongeren&nbsp;van&nbsp;17&nbsp;-&nbsp;21&nbsp;jaar </a> </div>
    </div>
    <div id="MMMenuContainer1020203829_2">
    <div id="MMMenu1020203829_2" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="nieuws.html" id="MMMenu1020203829_2_Item_0" class="MMMIFVStyleMMMenu1020203829_2" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_2');"> Het&nbsp;laatste&nbsp;nieuws </a> <a href="archief.html" id="MMMenu1020203829_2_Item_1" class="MMMIVStyleMMMenu1020203829_2" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_2');"> Ouder&nbsp;nieuws </a> </div>
    </div>
    <div id="MMMenuContainer1020203829_3">
    <div id="MMMenu1020203829_3" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="fotos/bevers.html" id="MMMenu1020203829_3_Item_0" class="MMMIFVStyleMMMenu1020203829_3" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_3');"> Bevers </a> <a href="fotos/welpen.html" id="MMMenu1020203829_3_Item_1" class="MMMIVStyleMMMenu1020203829_3" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_3');"> Welpen </a> <a href="fotos/kabouters.html" id="MMMenu1020203829_3_Item_2" class="MMMIVStyleMMMenu1020203829_3" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_3');"> Kabouters </a> <a href="fotos/verkenners.html" id="MMMenu1020203829_3_Item_3" class="MMMIVStyleMMMenu1020203829_3" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_3');"> Verkenners </a> <a href="fotos/padvindsters.html" id="MMMenu1020203829_3_Item_4" class="MMMIVStyleMMMenu1020203829_3" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_3');"> Padvindsters </a> <a href="fotos/explorers.html" id="MMMenu1020203829_3_Item_5" class="MMMIVStyleMMMenu1020203829_3" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_3');"> Rowans&nbsp;&amp;&nbsp;Sherpa's </a> <a href="fotos/stam.html" id="MMMenu1020203829_3_Item_6" class="MMMIVStyleMMMenu1020203829_3" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_3');"> De&nbsp;Stam </a> <a href="fotos/divers.html" id="MMMenu1020203829_3_Item_7" class="MMMIVStyleMMMenu1020203829_3" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_3');"> Divers </a> </div>
    </div>
    <div id="MMMenuContainer1020203829_4">
    <div id="MMMenu1020203829_4" onmouseout="MM_menuStartTimeout(100);" onmouseover="MM_menuResetTimeout();"> <a href="groeneblad.html" id="MMMenu1020203829_4_Item_0" class="MMMIFVStyleMMMenu1020203829_4" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_4');"> Groene&nbsp;Blad </a> <a href="formulieren.html" id="MMMenu1020203829_4_Item_1" class="MMMIVStyleMMMenu1020203829_4" onmouseover="MM_menuOverMenuItem('MMMenu1020203829_4');"> Formulieren </a> </div>
    </div>
    </div>
    </div>
    <div><img src="Plaatjes/GroepweekendWEB.gif" width="801" height="276" /></div>
    <div id="apDiv4"><strong>Franciscus Lodewijk Groep te Schiedam</strong></div>
    <div class="style1" id="apDiv1">
    <p> <strong>Reacties</strong> </p>
    <p> Wij kunnen het ons voorstellen dat er bij u al surfend over onze homepage enkele vragen opgekomen zijn. Deze kunnen wij vast wel beantwoorden als u contact met ons opneemt. <br/>
    <strong><br/>
    </strong> <strong>E-mail </strong> </p>
    <p> <a href="mailto:flg@scoutnet.nl">flg@scoutnet.nl</a><br />
    </p>
    <p> <strong>Schrijven</strong> <br />
    </p>
    <p> Secretaris<br />
    Scouting Franciscus - Lodewijkgroep,<br />
    p/a Lange Haven 11, 3111 CA Schiedam. <br />
    </p>
    <p><strong> Bellen </strong> </p>
    <p> Groepshuis: 010 - 4267048<br />
    (meestal tijdens opkomsten op woensdag- donderdag- en vrijdagavond tussen 18:30 en 21:30 en zaterdagochtend tussen 09:30 en 12:30) </p>
    <p> Of u kunt ook bellen naar: </p>
    <p> <strong>Cora de Bruin</strong>: 010 4730805<br />
    <strong>Patrick Heuchemer</strong>: 010 4719937 </p>
    <p><strong>E-mail speltakken </strong> </p>
    <p> <strong> Bevers:<br />
    </strong><a href="mailto:bevers@patrickboek.nl">bevers@patrickboek.nl</a><br />
    <strong>Welpen: </strong> <br />
    <a href="mailto:welpen-flg@hotmail.com">welpen-flg@hotmail.com</a><br />
    <strong>Kabouters: </strong> <br />
    <a href="mailto:kabouters-flg@hotmail.com ">kabouters-flg@hotmail.com </a><br />
    <strong> Verkenners:<br />
    </strong><a href="mailto:verkenners_flg@hotmail.com">verkenners_flg@hotmail.com</a><br />
    <strong> Padvindsters:<br />
    </strong><a href="mailto:padvindsters_flg@hotmail.com">padvindsters_flg@hotmail.com</a></p>
    </div>
    <div id="apDiv9"><img src="Plaatjes/gebouw.jpg" width="231" height="303" /></div>
    </body>
    </html>
    [/code:1:2fc1456ae6]

    De pagina in werking..

    http://www.scoutnet.nl/~flg/test/contact.html
  • [quote:70f4a707e2="Oompa"]Code van de pagina…
    http://www.scoutnet.nl/~flg/test/contact.html[/quote:70f4a707e2]
    Ik ook met mijn grote mond ;-)
    Jeutje wat een lap.
    Maar zo te zien gaat het in feite om drie divs naast elkaar zonder parent. Ik neem aan dat je de footer hier hebt proberen te plaatsen (?)

    <div id="apDiv9"><img src="Plaatjes/gebouw.jpg" width="231" height="303" /></div>
    [b:70f4a707e2]FOOTER[/b:70f4a707e2]
    </body>
    </html>

    Je kunt het op verschillende manieren aanpakken.
    Je kunt b.v. de drie 'content divs' ('Linker menu div', 'middenkolom div' en 'rechterkolom div') in een parent div gooien die je een overflow meegeeft zodat hij altijd meegroeit met de langste kolom. Als je daarachter dan de footer plaatst dan wordt die er gewoon onder gezet.

    Maar er hangen hier ook mensen rond die er net effe wat meer verstand van hebben dan ik, dus wellicht heeft iemand anders een betere optie.
  • Kijk eens naar de code van deze site. Daar staat de footer onderaan tenzij de inhoud langer is dan de grootte van de browser venster.
    Als je de footer vast wil zetten aan de onderzijde van het browser venster dan kan je dat met een absolute positie doen.

    Als je niet helemaal duidelijk is hoor ik het wel.

Beantwoord deze vraag

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

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