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)

[CSS] Div (footer) lijnt uit onder kortste kolom

Drewster
6 antwoorden
  • Ik ben bezig een website op te zetten met de volgende structuur:
    [list:a6762a5bf4]
    -Mainframe waar alles in hangt.
    -Header over de volle breedte
    -(Onder in de header) een horizontaal menu over de volle breedte
    -Linker kolom
    -Rechter kolom
    -Footer
    [/list:u:a6762a5bf4]
    Nu gaat het goed tot de footer.
    Wat ik ook probeer, de tekst in de footer lijnt uit onder de kortste kolom terwijl de achtergrond van de div op dezelfde hoogte als de beide kolommen wordt geplakt. Ik heb het met verschillende breedtes geprobeert (procenten en vaste waardes) en ik ben met overflows aan de gang geweest, maar niks helpt.
    In IE ziet het er welliswaar uit zoals ik wil, maar Firefox onthult het probleem genadeloos. Kortom: het zit dus ergens in mijn code.

    De footer in Internet Explorer:
    [img:a6762a5bf4]http://toine.ermens.net/stuff/footer_IE.jpg[/img:a6762a5bf4]

    De footer in Firefox
    [img:a6762a5bf4]http://toine.ermens.net/stuff/footer_FF.jpg[/img:a6762a5bf4]

    Grijs is de body
    Donkerblauw is de mainframe
    lichtblauw zijn de linker en rechter kolom
    groen is de footer

    Op een of andere manier heb ik het idee dat ik ergens heel basic CSS kennis mis :?
    [code:1:a6762a5bf4]
    <!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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!–
    body {
    font-family: Tahoma, Arial;
    font-size: 12px;
    color: #777777;
    background-color: #A5C4CF;
    text-align: center;
    margin: 0px;
    padding: 0px;
    }
    .mainframe {
    background-color: #6699CC;
    padding: 0px;
    width: 950px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    }
    .header {
    background-image: url(images/logo.jpg);
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    height: 240px;
    width: 100%;
    font-size: 14px;
    color: #FFFFFF;
    text-align: right;
    font-weight: 700;
    letter-spacing: 3px;
    background-color: #6699CC;
    }
    .padding8 {
    margin: 0px;
    padding: 8px;
    }
    .topmenu {
    padding: 0px;
    width: 100%;
    overflow: hidden;
    margin-top: 140px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    }
    .topmenuinleft {
    text-align: left;
    margin: 0px;
    padding: 0px;
    width: 50%;
    float: left;
    }
    .topmenuinright {
    text-align: right;
    margin: 0px;
    padding: 0px;
    width: 50%;
    float: right;
    }
    .leftrightcolumncontainer {
    background-color: #99FFCC;
    margin: 0px;
    padding: 0px;
    width: 100%;
    overflow: hidden;
    }
    .leftcolumn {
    margin: 0px;
    padding: 0px;
    width: 600px;
    float: left;
    }
    .leftcolumninside {
    background-color: #66CCFF;
    margin-top: 0px;
    margin-right: 4px;
    margin-bottom: 0px;
    margin-left: 8px;
    text-align: left;
    padding: 5px;
    }
    .rightcolumn {
    margin: 0px;
    padding: 0px;
    width: 350px;
    float: right;
    }
    .rightcolumninside {
    background-color: #66CCFF;
    margin-top: 0px;
    margin-right: 8px;
    margin-bottom: 0px;
    margin-left: 4px;
    padding: 5px;
    }
    .footer {
    background-color: #99FFCC;
    width: 950px;
    text-align: left;
    height: 25px;
    margin: 0px;
    padding: 0px;
    }
    –>
    </style>
    </head>

    <body>
    <div class="mainframe"><!– mainframe –>
    <div class="header"><!– header outside –>
    <div class="padding8"><!– header inside –>
    Hier komt de header

    <div class="topmenu"><!– Top menu –>
    <div class="topmenuinleft"><!– Top menu inside-left –>
    <img src="images/mireiziger1.png" alt="Reizen" />
    <img src="images/milinks1.png" alt="Links" width="64" height="64" />
    <img src="images/RSSbutton.gif" alt="RSS" width="24" height="24" />
    </div><!– End Top menu inside-left –>

    <div class="topmenuinright"><!– Top menu inside-left –>
    <form method="get" action="form.php">
    <input type="submit" value="Zoek" />
    <input name="s" type="text" id="s" size="10" maxlength="50" />
    <br />
    </form>
    </div><!– End Top menu inside-right –>
    </div><!– End Top menu –>

    </div><!– End header inside –>
    </div><!– End header outside –>

    <div><!– Left and right column container –>
    <div class="leftcolumn"><!– Left column –>
    <div class="leftcolumninside"><!– Left column inside–>
    <p>Linkerkolom</p>
    <p>Bladibla<br />
    blabla</p>
    </div>
    <!– End Left column inside–>
    </div><!– End Left column –>

    <div class="rightcolumn"><!– Right column –>
    <div class="rightcolumninside"><!– Left column inside–>
    <p>Rechterkolom</p>
    <p>Blabla </p>
    </div><!– End Left column inside–>
    </div><!– End Right column –>
    </div><!– End Left and right column container –>

    <div class="footer"><!–Footer –>
    <div class="padding8"><!– Footer inside –>
    Footertekst
    </div><!– End Footer inside –>
    </div><!–End Footer –>

    </div><!– End mainframe –>
    </body>
    </html>

    [/code:1:a6762a5bf4] :?
  • Blijkbaar een lastig probleem waar meer mensen mee worstelen.
    Dus voor wie al zoekende hier terecht komt:
    Ik heb het opgelost door de footer een float: left; mee te geven.
  • Dat werkt natuurlijk ook, maar de oplossing waar je denk ik naar op zoek was is deze: geef de footer div "clear: both;" mee. Dan hoef je hem niet te floaten als je dat niet wilt.
  • Dat is een hele nuttige toevoeging, tnx!
    Heeft het een nog een voordeel t.o.v. het ander?
  • Gooly, als ik je een constructieve tip mag meegeven: je gebruikt nu toch echt wel een overdaad aan divs, daar is weinig semantisch aan. Probeer veel meer met "echte" html-elementen te werken en divs alleen te gebruiken voor het groeperen van die elementen. Ook zijn namen van klassen/id's in je html alles behalve scheiding van structuur en opmaak, omdat je ze nog steeds gewoon namen geeft als "blabla-left", "blabla-top", enzovoorts. Pas daar mee op, voor je het weet ga je klassen gebruiken die "bottom-left-red-float" heten. Het is een grijs gebied, dat geef ik toe, maar ik weet uit ervaring dat je site na wat aanpassingen door de tijd heen dan compleet onbegrijpelijk kan worden, nog los van het feit dat het je waarschijnlijk extra tijd kost om alles aan te passen. Maar die divs zijn toch echt wel een punt waar je snel verbetering in kan brengen…

    Nogmaals: goed bedoeld! ;)

    - Bas
  • [quote:e9f8eabff3="BasHamar"]Gooly, als ik je een constructieve tip mag meegeven…[/quote:e9f8eabff3]
    Ik ben hartstikke blij met je commentaar want ik weet dat er op dat gebied nog heel wat voor me te leren is. Het is niet bepaald mijn sterkste punt. Met name op het gebied van semantiek heb ik nauwelijks kaas gegeten.
    CSS, het ging aanvankelijk in een sneltreinvaart, maar ik merk dat naar mate ik verder kom, het steeds lastiger voor me wordt. Dus ik kan alle tips goed gebruiken. Ook tips voor boeken, tutorials weet ik wat al niet meer.

Beantwoord deze vraag

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