[CSS] 3-column layout; midden stretched - Softwareontwikkeling

zondag 23 december 2007 13:35

Acties:

Verwijderd

Topicstarter

Goedendag,

Al een aantal uur ben ik aan het puzzelen voor mijn [css] probleem. Wat ik wil hebben:

* een 3-column layout. Deze heb ik nu door links en rechts divs te defineren, absolute gepositioneerd. In het midden staat een div met margins (left en right) gelijk aan de breedte van de anderen kolommen.
* Onder de kolommen moet een footer komen. Deze staat visueel alleen onder midden en rechts (maar mag niet hoger dan de onderkant van links komen, dus ook onder links)
* Iedere kolom kan langer worden dan de andere.
* Indien links of rechts langer is dan het midden (of: langer dan dat de inhoud van het midden aan zou geven), dan moet het midden stretchen, zodat links of rechts altijd volledig tegen het midden blijven
* het midden heeft een eigen achtergrondkleur, links en rechts hebben elementen met een eigen kleur, maar daar tussen hebben ze dezelfde kleur als de achtergrond van de pagina.

Wat ik tot nu toe heb:

HTML:

<!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">
    
    html, body {
        height: 100%;
    }
    
    #left {
        position: absolute;
        left:20px;
        top:20px;
        width:185px;
        background:#e8e8f3;
        }
        
        
    #center {
        background:#fff;
        voice-family: "\"}\"";
        voice-family: inherit;
        margin-left: 205px;
        margin-right:205px;
        margin-top: 20px;
        background-color: #e8e8f3;
        height: 100%;
        }
        
    
    #centerContent {
        border-width: 0px 9px 0px 9px;
        border-color: #04378b;
        border-style: solid;
        margin-bottom: 6px;
        background-color: #FFFFFF;
        height: 100%;
    }
    
    #centerFooter {
        background-color: #04378b;
        height: 21px;
        margin-bottom: 20px;
        margin-right: -183px;
        color: white;
    }
    
        #centerFooterLeft {
            background-image: url('images/e_44.gif');
            background-repeat: no-repeat;
            background-color: #04378b;
            background-position: left;
            float: left;
            height: 21px;
        }
        
        #centerFooterRight {
            background-image: url('images/e_49.gif');
            background-repeat: no-repeat;
            background-color: #04378b;
            background-position: right;
            float: right;
            height: 21px;
            margin-top: -16px;
        }
    
    #right {
        position: absolute;
        right: 20px;
        top:20px;
        width:185px;
        background:#e8e8f3;
        height: 100%;
        }
    
            
</style>


</head>

<body>
<div id="left">
    linkerkolom 
</div>

<div id="center">
    [paar andere "straight-on" divs]
    <div id="centerContent">
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut leo libero, lobortis pretium, ornare eu, pretium ut, tortor. Cras volutpat justo sit amet eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam porta laoreet sapien. Praesent posuere. Cras dui. Phasellus sagittis risus. Aliquam egestas tristique nibh. Nunc ultricies sapien vel augue. Nulla sed ante. Donec aliquam. Suspendisse mauris est, sollicitudin placerat, egestas at, ultrices eget, nibh. Sed eget dui. Donec tempus tempor leo. Nam rhoncus odio viverra nisi. Duis sodales ultricies ipsum. Nam erat. Maecenas adipiscing, pede sit amet aliquet imperdiet, augue pede ullamcorper quam, a congue nisi massa a mi. Proin rutrum. Aliquam mi metus, sagittis non, imperdiet id, ultricies et, lectus.</p>
    </div>
    
    <div id="centerFooter">
     <div id="centerFooterLeft">&nbsp;</div>
     disclaimer 
     <div id="centerFooterRight">&nbsp;</div>
    </div>
</div>

<div id="right">
    rechterkolom    
</div>
</body>
</html>

Wat het effect is:
* het midden is te lang; het neemt 100% van de hele pagina, terwijl er nog dingen boven staan. Aangezien het onbekend is hoeveel er boven komt te staan, kunnen er geen andere percentages gebruikt worden.
* als de rechterkolom "te" lang is, gaat die alsnog over de footer heen, en wordt het midden niet opgerekt; wat dus eigenlijk de kern van het probleem is.

Het maakt niet veel uit of het midden tot de onderkant van de viewport (als rechts kort genoeg is) loopt, of tot de onderkant van de pagina; zolang hij maar minimaal zo lang is als rechts, en de footer er onder komt te staan.

Wie weet hoe ik dit op kan lossen?

zondag 23 december 2007 14:59

Acties:

Geert.H

Wat heb je zelf al geprobeerd? de 3 column lay-out is super veel gebruikt, en dus is er al veel over geschreven.

probeer google eens

http://www.google.nl/sear...q=3+column+layout&spell=1

(magic word: float)

zondag 23 december 2007 15:04

Acties:

imp4ct

pritty simple my friend, maar goed iedereen moet leren, 'k zal je eventjes helpen.

HTML:

<div id="container">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>

Cascading Stylesheet:

#container {
 background-color: #FFF;
 margin: 0px;
 padding: 0px;
 width: 800px;
}

#left {
 background-color: #FFF;
 margin: 0px;
 padding: 0px;
 width: 200px;
 float: left;
}

#center {
 background-color: #FFF;
 margin: 0px;
 padding: 0px;
 width: 400px;
 float: left;
}

#right {
 background-color: #FFF;
 margin: 0px;
 padding: 0px;
 width: 200px;
 float: left;
}

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

maandag 24 december 2007 10:25

Acties:

Verwijderd

Topicstarter

imp4ct schreef op zondag 23 december 2007 @ 15:04:
pritty simple my friend, maar goed iedereen moet leren, 'k zal je eventjes helpen.

Naast dat ik dit een behoorlijk denigerende opmerking vind, vraag ik mij af of je mijn post wel helemaal hebt gelezen. Als nu de rechterkolom erg lang wordt, moet de hele container, en de andere divs, ook mee "groeien". Jouw "oplossing" doet dit niet. In FF iig niet.

maandag 24 december 2007 10:36

Acties:

Rowanov

Kop eens wat anders...

Overflow: auto op #container zorgt dat iig de container mee rekt. De andere divs kunnen niet meegroeien, dat is onmogelijk met css alleen. De enige manier waarop je die illusie kan wekken is met een repeterende achtergrond op #container, ook wel faux-collumns genoemd.

Edit: dit gaat uit van de code van imp4ct

[ Voor 7% gewijzigd door Rowanov op 24-12-2007 10:37 ]