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)

DIV-min-height probleem, het maximaliseren van DIV's

__uw_gebruikersnaam__
8 antwoorden
  • Beste mensen,

    Er zit ergens óf een fout of een bug in mijn CSS. Ik probeer namelijk al dagen, zonder succes twee content-DIV's en bijbehorende footer beeldvullend te maken, d.w.z;

    1. header (vaste hoogte)
    2. content links, content rechts (rekt zich automatisch uit tot boven de footer)
    3. footer (vaste positie; altijd onderin)

    Ik heb werkelijk van alles geprobeerd, van het opgeven van de juiste [i:1b35cf9965]overflow[/i:1b35cf9965], negatieve marges, min-height, max-height, het toevoegen van een extra 'padding'-div, tot de meest vreemde hacks, maar niks schijnt te werken.

    Dat terwijl het een fluitje van een cent zou moeten zijn *denkt stiekem even terug aan die goeie ouwe tabellen-spaghetti-tijd*. :P

    Mijn xHTML is te vinden op: http://www.xaxu.nl/melissa/

    of hierzo:

    [code:1:1b35cf9965]
    <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>"; ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Xaxu Melissa v1.0</title>
    <link href="http://www.xaxu.nl/melissa/components/global/templates/melissa/css/global.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="application_wrapper">
    <div id="wrapper_left"></div>
    <div id="wrapper_main">
    <div id="main_padding">
    <div id="wrapper_header">
    <div id="wrapper_identity">
    <div id="logo"><img src="components/global/templates/melissa/media/images/header_logo.png" alt="Xaxu Melissa" /></div>
    <div id="search">zoeken</div>
    </div>
    <div id="wrapper_navigation">NAVIGATION</div>
    </div>
    <div id="wrapper_primary">PRIMARY</div>
    <div id="wrapper_secondary">SECONDARY</div>
    <div id="wrapper_footer">FOOTER</div>
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
    </div>
    <div id="wrapper_right"></div>
    </div>
    </body>
    </html>
    [/code:1:1b35cf9965]

    En voor het gemak de CSS-definities:


    [code:1:1b35cf9965]
    /*– Page Layout ————————————————————————————*/

    html, body {
    border: 1px #FF0000 solid;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    }

    body {
    background: url(../media/images/bg.jpg) top left repeat-x;
    background-color: #787588;
    text-align: center;
    }

    #application_wrapper {
    width: 1032px;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: left;
    border: 1px #336060 solid;
    }

    #wrapper_main {
    height:100%;
    background-color: #ffffff;
    border: 1px #cccccc solid;
    padding: 0;
    margin: 0 14px;
    position: relative;
    }

    #wrapper_left {
    width: 14px;
    height: 100%;
    background: url(../media/images/wrapper_border_left.png) top left repeat-y;
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    }

    #wrapper_right {
    width: 14px;
    height: 100%;
    background: url(../media/images/wrapper_border_right.png) top left repeat-y;
    position: absolute;
    padding: 0;
    top: 0;
    right: 0;
    }

    #main_padding {
    height: 100%;
    /*border: 1px #00FF00 solid;*/
    margin-top: 14px;
    margin-bottom: 0px;
    margin-left: 14px;
    margin-right: 14px;
    padding: 0;
    position: relative;
    }

    #wrapper_header {
    width: 100%;
    height: 108px;
    min-height: 108px;
    background-color: #ffffff;
    padding: 0;
    margin: 0;
    }

    #wrapper_primary {
    float: left;
    width: 643px;
    height: 100%;
    background-color: #ffff00;
    padding-right: 15px;
    margin: 15px 0 -165px 0;
    border: 1px #f01100 solid;
    }

    #wrapper_secondary {
    float: right;
    width: 312px;
    height: 100%;
    background-color: #ececec;
    padding: 0;
    margin: 15px 0 -165px; 0;
    border: 1px #0022F0 solid;
    }

    #wrapper_footer {
    width: 100%;
    height: 30px;
    background-color: #000000;
    color: #ffffff;
    }

    #wrapper_identity {
    float: left;
    heigth: 62px;
    background: url(../media/images/header_bg.png) top left repeat-x;
    }

    #logo {
    float: left;
    width: 660px;
    }

    #search {
    float: right;
    width: 299px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    color: #ffffff;
    }

    #wrapper_navigation {
    clear: both;
    height: 44px;
    margin-top: 1px;
    background-color: #0382C2;
    }

    .clear {
    clear: both;
    height: 0;
    overflow: hidden;
    }

    [/code:1:1b35cf9965]

    Bedankt alvast!
  • kijk eens hier http://stijlstek.nl/demo/aleppo/ of je daar je antwoord kan vinden.
  • Bedankt Marientje,

    Ik heb een aantal van je definities overgenomen, maar het schijnt allemaal niet te helpen. Ik begrijp er eerlijk gezegd geen zak van. :o

    Kan jij, of iemand anders, mij misschien uitleggen waarom zowel de content-div's en footer niet binnen de grenzen van <wrapper_main> danwel <main_padding> blijven? De inhoud is verdorie relatief en zelfs bij het expliciet opgeven van positiebepalingen loopt nog alles - zowel in IE als Firefox - in de soep. Het is bijna om te huilen *pinkt traantje weg*. Arme __uw_gebruikersnaam__! :cry:

    Wat dat betreft zou mijn code toch gewoon moeten werken?

    Thnx.
  • Overigens, voorlopig mik ik qua compatibiliteit nog even op Firefox 2.0.0.7 en IE7. Het is in deze situatie nog niet echt belangrijk om oudere browsers te ondersteunen - helaas, maar toch.

    Dat even ter informatie :wink:
  • Als css niet werkt zoals is bedoeld, dan altijd valideren bv hier
    Dan kun je zien dat de regel met
    [code:1:5d9eae5dd0] margin: 15px 0 -165px; 0;[/code:1:5d9eae5dd0] een foutje heeft.
    Of dat iets te maken heeft met het probleem weet ik niet, maar een foutloze css helpt beslist.
    wimb
  • Ah, kijk! Dat is dus nog een overblijfsel van een van de vele voorstellen/oplossingen die ik her en der tegenkwam.

    Thanks WimB, ik ga het i.i.g. even rechtzetten.

    Ai, helaas ondanks alle goede hulp nog geen oplossing voor het <div>-mysterie :o
  • eerlijk gezegd snap ik het probleem nog niet helemaal…
  • Goed, ik zal het nog wat duidelijker proberen uit te leggen;

    De bedoeling is:

    een gecentreerde div-container, met aan weerszijden voor het oog een leuk dropshadow-effect. Deze container moet een marge van 15px rondom hebben.

    Vervolgens wordt hier de verdere layout in geladen;
    - een header met de navigatiebalk
    - een contentvlak opgedeeld in 3 div's: [i:cde9718875]primary[/i:cde9718875], [i:cde9718875]secondary[/i:cde9718875] en [i:cde9718875]footer[/i:cde9718875]

    Het idee is dat ongeacht de inhoud/hoogte van het contentvlak altijd BINNEN de algemene wrapper moet blijven en de marges hiervan respecteert. Daaarnaast is het belangrijk dat de div's [i:cde9718875]primary [/i:cde9718875]en [i:cde9718875]secondary [/i:cde9718875] netjes worden uitgevuld tot over de gehele hoogte van je beeldscherm.

    Verder dient ook de footer ten alle tijde onderaan (dus tegen de onderste rand/marge van de wrapper) staan.

    Voor de wrapper is het tevens belangrijk dat de dropshadow-div's netjes met de content/body meeloopt.

    Het probleem is dat ik dit niet voor elkaar krijg. De primary en secondary div's lopen gewoon vrolijk door en over de omliggende wrapper(s) heen. Het vast aan de [i:cde9718875]float[/i:cde9718875]-regels liggen - ik zou het nl. anders niet meer weten. Pff, ik word er af en toe zo moe van :-?

    Check anders het betreffende bestandje (nog) eens a.u.b.

    Ik ben er steeds mee bezig, dus het kan zijn dat er af en toe veranderingen zijn. Ik zal even kijken of ik er een screenshot van kan maken - die volgt dan straks nog.

    Ik hoop dat het zo wat duidelijker is? Bedankt alvast.

Beantwoord deze vraag

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