[CSS] 3 col Divs, gelijke hoogte, faux geen oplossing? - Softwareontwikkeling

dinsdag 9 december 2008 10:51

Acties:

0 Henk 'm!

Topicstarter

Allereerst het voorbeeld.... Update: niet meer beschikbaar, zie onderaan voor oplossing

Wat is het probleem: de divs moeten gelijke lengtes krijgen

Wat lukt niet / wat geprobeerd:
- Faux columns, waarom? Omdat die een backgroundimage gebruiken en dat kan hier niet op de overkoepelende div. Dit is maar een voorbeeld, maar in de werkelijke website worden het achtergrondsafbeeldingen + breedtes enzo die kunnen gaan varieren (ik heb diverse dingen geprobeerd met faux, maar of ik doe het fout, of 't werkt niet zoals ik het hier wil). Met faux gebruik je een vaste achtergrond en dat kan hier niet.

- Gespeeld met heights, min-heights, divs met clear:both etc...
- Google gezocht, maar 99% komt met faux terug... dus misschien mis ik daar iets, maar die oplossing lukt niet

Nu denken jullie inderdaad: weer zo 1tje!
Yups

, maar ... na tig topics doorgegekeken te hebben en die oplossingen geprobeerd (9/10 faux), lukt het nog niet. Ik wil eigenlijk geen javascript gebruiken, alleen css.

De kolommen zijn variabel in hoogte, wat het nog makkelijker maakt.

Iemand ideeën?

[ Voor 13% gewijzigd door reddevil op 09-12-2008 14:08 ]

dinsdag 9 december 2008 11:08

Acties:

0 Henk 'm!

Verwijderd

Waarom kijk je niet eens naar YAML

dinsdag 9 december 2008 11:15

Acties:

0 Henk 'm!

Verwijderd

Als de kolommen een egale achtergrondkleur hebben kun je dat effect bereiken door de middelste kolom links en rechts een border te geven met de kleur en breedte van de zij-kolommen.

dinsdag 9 december 2008 11:22

Acties:

0 Henk 'm!

reddevil

Topicstarter

Verwijderd schreef op dinsdag 09 december 2008 @ 11:08:
Waarom kijk je niet eens naar YAML

Thx, ff kijken

Update: kijk ik bijv bij http://www.yaml.de/filead...outs_3col/3col_1-2-3.html dan zie ik juist dat ze zelf dat probleem ook hebben als ik aan 1 van de kolommen een stuk tekst toegevoeg.... mis ik iets hiero wat je bedoelt ?

Verwijderd schreef op dinsdag 09 december 2008 @ 11:15:
Als de kolommen een egale achtergrondkleur hebben kun je dat effect bereiken door de middelste kolom links en rechts een border te geven met de kleur en breedte van de zij-kolommen.

Nopes, helaas... achtergrondsplaatje met een verloop erin. Onderaan is het verloop gelijk aan de achtergrondskleur, dus uitrekken is niet zo'n probleem, maar een border gaat dus niet lukken. Daarnaast staan de 'zij-kolommen' los van de middelste, dus een border gaat daarbij niet werken!?

[ Voor 20% gewijzigd door reddevil op 09-12-2008 11:25 ]

dinsdag 9 december 2008 12:34

Acties:

0 Henk 'm!

Michali

Waarom kun je geen achtergrond afbeelding gebruiken? Lijkt me goed te doen hoor. Gewoon 3 container elementen maken die om je kolommen zitten. Per container geef je dan als achtergrond een afbeelding die 1 van de kolommen vormt.

Noushka's Magnificent Dream | Unity

dinsdag 9 december 2008 13:01

Acties:

0 Henk 'm!

reddevil

Topicstarter

Michali schreef op dinsdag 09 december 2008 @ 12:34:
Waarom kun je geen achtergrond afbeelding gebruiken? Lijkt me goed te doen hoor. Gewoon 3 container elementen maken die om je kolommen zitten. Per container geef je dan als achtergrond een afbeelding die 1 van de kolommen vormt.

Bedoel je zoiets:
Update: test ook niet meer beschikbaar, zie onderaan voor oplossing
Hoe krijg ik ze dan even lang ?

[ Voor 9% gewijzigd door reddevil op 09-12-2008 14:09 ]

dinsdag 9 december 2008 13:07

Acties:

0 Henk 'm!

Xelle

Ik kwam laatste hetzelfde probleem tegen, ook naar faux columns gekeken, maar bij mij werkt dat niet echt omdat de middelste kolom steeds geschaald wordt naar de schermbreedte.

Na een tijdje vond ik deze site: klikje hier. Werkte bij mij prima, enkel online gaf IE ineens problemen, denk alleen dat het wel kwam doordat ik de CSS nog wat had aangepast en dergelijke waardoor het niet helemaal meer werkte. Maar als je je gewoon aan de code houdt gaat het uitstekend!

dinsdag 9 december 2008 13:13

Acties:

0 Henk 'm!

Verwijderd

Dit probleem los ik altijd op door de "container" een background-image mee te geven die ingedeeld is naar hand van de kolommen.

Voorbeeld: http://www.kubica.nl/tweakers/

dinsdag 9 december 2008 13:35

Acties:

0 Henk 'm!

Michali

Ik zat aan zoiets te denken:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Equal Height Columns</title>
    <style type="text/css">
        div#container1
        {
            width: 1221px;
        }
    
        #container1, #container2, #container3 {
            background-image: url(http://www.brightside.nl/test/test.jpg);
            background-repeat: repeat-y;
        }
        
        #container1
        {
            background-position: top left;
        }
        
        #container2
        {
            background-position: top right;
        }
        
        #container3
        {
            background-position: top center;
        }
        
        #column1,
        #column2,
        #column3
        {
            width: 405px;
            border: 1px solid black;
        }
        
        #column1 {
            float: left;
        }

        #column3 {
            float: right;
        }
        
        #column2
        {
            margin: 0 407px;
        }

        #column1header {
            height: 39px;
        }

        #column1body {
            padding: 13px 0px 0px 13px;
        }

        #column2 {
            height: 350px;
        }

        #column2header {
            height: 30px;
            padding: 9px 0px 0px 21px;
        }

        #column2body {
            padding: 20px;
        }

        #column3header {
            height: 16px;
            width: 19px;
        }

    </style>
</head>

<body>
    <div id="container1">
    <div id="container2">
    <div id="container3">
        <div id="column1">
            <div id="column1header">&nbsp;</div>
            <div id="column1body">
                test body 1
            </div>
        </div>
        <div id="column3">
            <div id="column3header">&nbsp;</div>
            <div id="column3body">Meer tekst meer tekst Meer tekst meer tekst Meer tekst meer tekst Meer tekst meer tekst
            </div>
        </div>
        <div id="column2">
            <div id="column2header">test col2 header</div>
            <div id="column2body">test body 2
            </div>
        </div>
    </div>
    </div>
    </div>
</body>

</html>

Nu is het 3 keer dezelfde afbeelding, daarom zijn de kolommen ook even breed, maar dat kun je dus zelf aanpassen.

Noushka's Magnificent Dream | Unity

dinsdag 9 december 2008 14:05

Acties:

0 Henk 'm!

reddevil

Topicstarter

@Michali: Dit werkt wel, maar ivm de website gaat het lastiger dan de oplossing die Xelle geeft.

Voor de mensen die willen weten wat ik aangepast heb (ik gooi de test.html eraf namelijk) even een korte schets van de oplossing:

1 'container' div met 3 subdivs die naast elkaar moeten:
div1, div2, div3

container div krijgt: "overflow: hidden"

div1 krijgt float: left
div2 krijgt float: left
div3 krijgt float: right
div1,div2,div3 krijgen:
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;

Getest op:

Windows: IE6, IE7, FF2, FF3, Safari, Google Chrome
Mac: FF3 en Safari

Merci beaucoup everyone

dinsdag 9 december 2008 14:27

Acties:

0 Henk 'm!

Michali

Ik zou persoonlijk zoiets nooit doen, maar als het voor jou werkt, dan kun je dat natuurlijk gewoon gebruiken. Negatieve margins is, zeker in IE, vaak spelen met vuur. Ik zie ik ook wat opmerkingen in dat artikel, die zou ik zeker eens goed doornemen.

Noushka's Magnificent Dream | Unity

dinsdag 9 december 2008 14:43

Acties:

0 Henk 'm!

reddevil

Topicstarter

Michali schreef op dinsdag 09 december 2008 @ 14:27:
Ik zou persoonlijk zoiets nooit doen, maar als het voor jou werkt, dan kun je dat natuurlijk gewoon gebruiken. Negatieve margins is, zeker in IE, vaak spelen met vuur. Ik zie ik ook wat opmerkingen in dat artikel, die zou ik zeker eens goed doornemen.

Had ik al gezien, maar 't werkt

Helaas is er geen "standard-out-of-the-box" oplossing hiervoor zeker niet omdat ik met diverse dynamische elementen in m'n website zit

dinsdag 9 december 2008 14:53

Acties:

0 Henk 'm!

Michali

Met CSS3 kun je meerdere achtergrond afbeeldingen per element toevoegen, dus dan zou het wel wat gemakkelijker gaan. Maar goed, dat wordt nog niet zo veel ondersteund.

Noushka's Magnificent Dream | Unity