[CSS] Alles meegroeien, niet 1 DIV - Softwareontwikkeling

donderdag 30 juli 2009 12:19

Acties:

0 Henk 'm!

Allround Nerd

Topicstarter

Ik ben bezig om een website te maken die uit drie kolommen bestaat, daarboven een header en geen footer. De drie kolommen (20%, 60%, 20%) moeten beeldvullend zijn (in de hoogte), de breedte is 90%.

Nu heb ik de drie kolommen een hoogte van 100% meegegeven en een achtergrondkleur, dit is prima in orde, maar als er één van de kolommen een vulling heeft van meer dan 100% groeit alles door, maar niet de achtergrondkleur.

Ik heb hier geprobeerd met height: 100% auto; maar dit werkt niet omdat hij de div anders inkort tot het einde van de content. Ik kon niet echt iets vinden dat mij goed op weg kon helpen, of ik moet verkeerd hebben gezocht.

Voorbeeld: KLIK

🃏 TCG Codex - Je volledige TCG verzameling in je broekzak ::: 🍏 TCG Codex for iOS ::: 🤖 TCG Codex for Android

donderdag 30 juli 2009 12:20

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Kijk eens naar (liquid) faux columns.
En waarom is je header absolute gepositioneerd?

[ Voor 77% gewijzigd door RobIII op 30-07-2009 12:33 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 30 juli 2009 12:20

Acties:

0 Henk 'm!

Ypho

Allround Nerd

Topicstarter

Hier de code van het document. Let even niet op de CSS die in de HTML zit, dit is alleen om te testen. De divjes content heb ik alleen geplaatst zodat ik hierin de marge van 250px kon geven vanaf de top.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

    html, body{
        height: 100%;
        margin: 0;
    }
    
    body{   
        background-color: #c0c0c0;
    }
    
    #wrapper{
        height:100%;
        width:90%;
        margin-left:5%;
        background-color: #c0c0c0;
    }
    
    #header{
        background-color: #000000;
        height:250px;
        width: 90%;
        margin-left:5%;
        float:right;
        position:absolute;
    }
    
    #contentwrapper{
        height:100%;    
    }
    
    #container_content{
        height: 100%;
        background-color: #00ff00;
        width: 59.9%;
        margin: 0 auto;
        float: left;
    }
    
    #container_right{
        height: 100%;
        background-color: #ff0000;
        width: 20%;
        margin: 0 auto; 
        float:right;
    }
    
    #container_left{
        height: 100%;
        background-color: #0000ff;
        width: 20%;
        margin: 0 auto; 
        float: left;
    }
    
    .content{
        margin-top:250px;
    }

</style>
</head>
<body>
<div id="header">d</div>
<div id="wrapper">
    <div id="contentwrapper">
        <div id="container_left">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada tempor ligula vel ultrices. Quisque diam mi, sagittis vehicula aliquam nec, suscipit pharetra erat. Mauris tristique, ipsum ut vehicula tempus, libero urna tempus ipsum, nec malesuada enim sapien non nibh. Curabitur commodo feugiat adipiscing. Nulla condimentum porttitor nunc, ac cursus ante aliquet ac. Proin elit diam, rutrum nec pulvinar eleifend, bibendum sed nulla. Nulla tempor rhoncus risus, id scelerisque tortor suscipit tempor. Aenean tincidunt turpis eget ipsum fermentum laoreet. Proin sed arcu at orci luctus dapibus nec sed erat. Phasellus vestibulum quam in mi faucibus commodo.</p> 
            </div>
        </div>
        <div id="container_content">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada tempor ligula vel ultrices. Quisque diam mi, sagittis vehicula aliquam nec, suscipit pharetra erat. Mauris tristique, ipsum ut vehicula tempus, libero urna tempus ipsum, nec malesuada enim sapien non nibh. Curabitur commodo feugiat adipiscing. Nulla condimentum porttitor nunc, ac cursus ante aliquet ac. Proin elit diam, rutrum nec pulvinar eleifend, bibendum sed nulla. Nulla tempor rhoncus risus, id scelerisque tortor suscipit tempor. Aenean tincidunt turpis eget ipsum fermentum laoreet. Proin sed arcu at orci luctus dapibus nec sed erat. Phasellus vestibulum quam in mi faucibus commodo.</p> 
            </div>
        </div>
        <div id="container_right">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada tempor ligula vel ultrices. Quisque diam mi, sagittis vehicula aliquam nec, suscipit pharetra erat. Mauris tristique, ipsum ut vehicula tempus, libero urna tempus ipsum, nec malesuada enim sapien non nibh. Curabitur commodo feugiat adipiscing. Nulla condimentum porttitor nunc, ac cursus ante aliquet ac. Proin elit diam, rutrum nec pulvinar eleifend, bibendum sed nulla. Nulla tempor rhoncus risus, id scelerisque tortor suscipit tempor. Aenean tincidunt turpis eget ipsum fermentum laoreet. Proin sed arcu at orci luctus dapibus nec sed erat. Phasellus vestibulum quam in mi faucibus commodo.</p> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada tempor ligula vel ultrices. Quisque diam mi, sagittis vehicula aliquam nec, suscipit pharetra erat. Mauris tristique, ipsum ut vehicula tempus, libero urna tempus ipsum, nec malesuada enim sapien non nibh. Curabitur commodo feugiat adipiscing. Nulla condimentum porttitor nunc, ac cursus ante aliquet ac. Proin elit diam, rutrum nec pulvinar eleifend, bibendum sed nulla. Nulla tempor rhoncus risus, id scelerisque tortor suscipit tempor. Aenean tincidunt turpis eget ipsum fermentum laoreet. Proin sed arcu at orci luctus dapibus nec sed erat. Phasellus vestibulum quam in mi faucibus commodo.</p> 
            </div>
        </div>
    </div>
</div>
</body>
</html>

🃏 TCG Codex - Je volledige TCG verzameling in je broekzak ::: 🍏 TCG Codex for iOS ::: 🤖 TCG Codex for Android

donderdag 30 juli 2009 13:21

Acties:

0 Henk 'm!

Ypho

Allround Nerd

Topicstarter

RobIII schreef op donderdag 30 juli 2009 @ 12:20:
Kijk eens naar (liquid) faux columns.
En waarom is je header absolute gepositioneerd?

Header is nu puur en alleen absolute omdat ie "bovenop" de kolommen liggen, als alles goed werkt is dit straks dan uiteraard niet meer nodig.

Ik zit wat te lezen over faux columns...maar als ik dus een variabele breedte heb (%), moet ik dus meerdere faux plaatjes maken. Begrijp ik dat goed?

🃏 TCG Codex - Je volledige TCG verzameling in je broekzak ::: 🍏 TCG Codex for iOS ::: 🤖 TCG Codex for Android

donderdag 30 juli 2009 13:44

Acties:

0 Henk 'm!

moozzuzz

Kan je geen footer maken met hoogte 0px? Ik geloof dat zo'n footer dan met een clear:both; je al een heel eind op weg helpt.

donderdag 30 juli 2009 14:11

Acties:

0 Henk 'm!

Ypho

Allround Nerd

Topicstarter

moozzuzz schreef op donderdag 30 juli 2009 @ 13:44:
Kan je geen footer maken met hoogte 0px? Ik geloof dat zo'n footer dan met een clear:both; je al een heel eind op weg helpt.

Heb een klasse .clear {clear:both; height:1px;} gemaakt, hij is zichtbaar, maar nog geen meetrekkende kolommen.

Ik heb gekeken naar faux plaatjes, maar dit wil ook niet echt lukken. Ik heb onder andere deze pagina gehad, was nog het duidelijkste, maar lukt niet....erg frustrerend, want het zal iets kleins zijn.

🃏 TCG Codex - Je volledige TCG verzameling in je broekzak ::: 🍏 TCG Codex for iOS ::: 🤖 TCG Codex for Android

donderdag 30 juli 2009 15:30

Acties:

0 Henk 'm!

Da Weef

Je kan met floatende elementen geen niet-floatende elementen uitrekken. De clearing-div is hiervoor een oplossing. Echter doordat je nu weer een floatende content wrapper in een niet-floatende wrapper stopt gaat het mis.

Zoiets moet wel werken:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

    html, body{
        height: 100%;
        margin: 0;
    }
    
    body{   
        background-color: #c0c0c0;
    }
    
    #wrapper{
        width:90%;
        margin-left:5%;
        background: url(blue.gif) 0% 0% repeat-y;
    }
    
    #wrapper2{
        width:100%;
        background: url(green.gif) 20% 0% repeat-y;
    }
    
    #wrapper3{
        width:100%;
        background: url(red.gif) 80% 0% repeat-y;
    }
    
    #header{
        background-color: #000000;
        height:250px;
        width: 100%;
    }
    
    #container_content{
        height: 100%;
        width: 59.9%;
        margin: 0 auto;
        float: left;
    }
    
    #container_right{
        height: 100%;
        width: 20%;
        margin: 0 auto; 
        float:right;
    }
    
    #container_left{
        height: 100%;
        width: 20%;
        margin: 0 auto; 
        float: left;
    }
    
    #clear{
        clear:both;
        width:1005;}
    
    .content{
        margin-top:20px;
    }

</style>
</head>
<body>
<div id="wrapper"><div id="wrapper2"><div id="wrapper3">
        <div id="header"></div>
        <div id="container_left">
            <div class="content">
            </div>
        </div>
        <div id="container_content">
            <div class="content">
            </div>
        </div>
        <div id="container_right">
            <div class="content">
            </div>
        </div>
        <div id="clear"></div>
</div></div></div>
</body>
</html>

Met red.gif etc. als een rood plaatje van 2000px breed en 4px hoog oid

Pagina: 1

Reageer