[CSS] Liquid layout - Softwareontwikkeling

dinsdag 5 december 2006 10:53

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

Ik ben bezig met een site waarbij we gebruik maken van een liquid layout. Nu wil ik zoekresultaten tonen in een aantal blokjes welke dus ook "liquid" zijn; ze dienen zoveel mogelijk op 1 regel te passen en dan te wrappen naar de volgende "regel".

Nu loop ik tegen een stom probleem op dat ik even niet weet op te lossen; wellicht heb ik er te lang naar gestaard en is het uber simpel, maar ik zie het even niet (meer).

Eerst even een test-case:

HTML:

<html>
<head>
    <title>Testcase</title>
    <style>
        #wrapper {
        }
        
        #somediv {
            border      : 1px solid red;
            width        : 200px;
            height      : 100px;
            float        : right;
            margin      : 2px 2px 10px 10px;
        }
        
        .result {
            border      : 1px solid #666666;
            width        : 150px;
            height      : 150px;
            float        : left;
            margin      : 3px;
            padding    : 3px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div id="somediv"></div>
        <div class="result">result 1</div>
        <div class="result">result 2</div>
        <div class="result">result 3</div>
        <div class="result">result 4</div>
        <div class="result">result 5</div>
        <div class="result">result 6</div>
        <div class="result">result 7</div>
        <div class="result">result 8</div>
        <div class="result">result 9</div>
        <div class="result">result 10</div>
        <div class="result">result 11</div>
        <div class="result">result 12</div>
        <div class="result">result 13</div>
        <div class="result">result 14</div>
    </div>
</body>
</html>

Dit produceert het volgende resultaat:

Afbeeldingslocatie: http://tweakers.net/ext/f/34b3deaa50842fa9b3b90468a62dbf28/full.png

Het blokje met de rode border is in principe "fixed" aan de rechterkant van de browser en dient gewoon te blijven staan. Zoals je ziet schuift resultaat 5 echter naar beneden toe i.p.v dat deze wrapped naar de volgende "regel". Ik wil dus het volgende bereiken:

Afbeeldingslocatie: http://tweakers.net/ext/f/f8e50333431cfda309072893bf8fb0d4/full.png

Afbeeldingslocatie: http://tweakers.net/ext/f/f8e50333431cfda309072893bf8fb0d4/full.png

Ik kan er wel een div/br/hr/whatever tussen knallen om de zoveel resultaten met een clear:left erop ofzo; maar dan is het niet meer "liquid". Ik wil namelijk dat gebruikers die een flinke resolutie draaien meer blokjes op een rij te zien krijgen (zolang dat past) maar het moet dus ten alle tijde wel netjes om het rode blokje heen "wrappen". Dat rode blokje kan overigens nog in hoogte variëren en kan dus meer dan 1 "regel" beslaan in een aantal gevallen.

Ik heb al wat zitten rommelen met wrappers e.d. maar ik kom er niet meer uit zonder allerlei hacks toe te gaan passen; iemand enig idee wat ik over het hoofd zie?

[ Voor 5% gewijzigd door RobIII op 05-12-2006 11:00 ]

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

dinsdag 5 december 2006 11:03

Acties:

0 Henk 'm!

OnTracK

Als je die somediv een margin-bottom van 60px geeft klopt het voor dit geval (maar dan moet je wel telkens rekening houden met de hoogte van die div). Dus als je een hoogte-onafhankelijke oplossing wil, weet ik het niet...

[ Voor 24% gewijzigd door OnTracK op 05-12-2006 11:04 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

dinsdag 5 december 2006 11:04

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

OnTracK schreef op dinsdag 05 december 2006 @ 11:03:
Als je die somediv een margin-bottom van 60px geeft klopt het (maar dan moet je wel telkens rekening houden met de hoogte van die div

Daar zit 'm net de kneep; ik weet nooit de hoogte van die Div omdat die (net als de rest overigens) dynamisch gegenereerd wordt en de content kan variëren van 1 regel tot (bij wijze van spreke) 4 pagina's tekst. En om nou dynamisch een style="margin-bottom:$regels*Xpx" er op te knallen vind ik ook waardeloos

Overigens de ellende is dat ik het vaker heb gezien; het kan volgens mij dus wel. Ik weet alleen niet meer waar

[ Voor 20% gewijzigd door RobIII op 05-12-2006 11:13 ]

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

dinsdag 5 december 2006 11:19

Acties:

0 Henk 'm!

Verwijderd

Zonder doctype werkt het zo wel in IE.

Cascading Stylesheet:

.result {
    border        : 1px solid #666666;
    width         : 150px;
    height        : 150px;
    margin        : 3px;
    padding       : 3px;
    display       : inline;
}

Maar dus nog geen juiste oplossing.

dinsdag 5 december 2006 11:31

Acties:

0 Henk 'm!

Verwijderd

Misschien een stomme hoor... maar dwing je hem niet "recht" te blijven door gebruik te maken van een <ul>, ik heb een keer een implementatie gezien van zo'n liquid foto-album, daar leken de elementen te allen tijde in ieder geval op dezelfde hoogte te blijven.

edit:
werkt niet

[ Voor 6% gewijzigd door Verwijderd op 05-12-2006 11:33 ]

dinsdag 5 december 2006 11:46

Acties:

0 Henk 'm!

TeeDee

CQB 241

Zit hier niks tussen? Ben even niet in de positie om een testje te bakken

[ Voor 26% gewijzigd door TeeDee op 05-12-2006 11:48 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 5 december 2006 12:29

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

Verwijderd schreef op dinsdag 05 december 2006 @ 11:19:
Zonder doctype werkt het zo wel in IE.

Maar dus nog geen juiste oplossing.

Ik werk met HTML 4 Strict

En zowieso dient het minimaal in IE, FF en Opera te werken.
Ik had overigens ook al met display inline e.d. zitten stoeien maar ook dat haalt geen kont uit.

TeeDee schreef op dinsdag 05 december 2006 @ 11:46:
Zit hier niks tussen? Ben even niet in de positie om een testje te bakken

Dat levert (voor zover ik kon zien/testen) hetzelfde probleem op; of ik doe iets verkeerd. Volgens mij is het dan ook een oplossing voor een heel ander probleem

[ Voor 61% gewijzigd door RobIII op 05-12-2006 12:30 ]

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

dinsdag 5 december 2006 12:36

Acties:

0 Henk 'm!

The_Ghost

To beer or not to beer........

En als je somediv nou eens een bottom margin geeft zodat ie net zo hoog wordt als de andere blokjes? is dat een optie?

iets met beter lezen

Als je de content van somediv in een ander element er inzet kun je 'somediv' een min-height geven (moet je alleen voor ie<7 wat oplossen)

grmbl.. ik denk echt te simpel vandaag; dat lost je probleem met meerdere regels niet op natuurlijk...

[ Voor 59% gewijzigd door The_Ghost op 05-12-2006 12:39 ]

Get your copy of the web: 'copy http://*.* a:'

dinsdag 5 december 2006 12:48

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

<snip>
Hier stonden allerlei testjes die me langzaam maar zeker tot dit resultaat hebben gebracht:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
<html>
<head>
    <title>Testcase</title>
    <style>
        #searchresults {
        }
        
        p {
            margin        : 0px;
        }
        
        #searchresults div {
            display       : -moz-inline-box;  /* Moz */
            display       : inline-block;     /* Op, Saf, IE */
            vertical-align: top;              /* IE Mac */
            height        : 150px;
            width         : 150px;
            border        : 1px solid #666666;
            margin        : 3px;
        }
        
        #somediv {
            border        : 1px solid red;
            width         : 200px;
            height        : 100px;
            float         : right;
            margin        : 2px 2px 10px 10px;
        }
        
    </style>

    <!--[if IE]><style>#searchresults div {display:inline;}</style><![endif]-->
</head>

<body>
    <div id="somediv"></div>
    <div id="searchresults">
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 1<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 2<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 3<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 4<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 5<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 6<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 7<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 8<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 9<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 10<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 11<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 12<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 13<br>Price &euro; 100,-</p></div>
        <div><p><img src="http://www.google.com/intl/en_ALL/images/logo.gif" width="150" height="100" alt=""><br>Result 14<br>Price &euro; 100,-</p></div>

    </div>
</body>
</html>

IE7 en FF2.0 in orde; ik ga nu even de andere browsers testen.
IE6, FF 1.5 en Opera 9 blijken ook te werken... en het is nog valid ook

[ Voor 103% gewijzigd door RobIII op 05-12-2006 14:28 ]

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

dinsdag 5 december 2006 14:33

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

div-alicious

Ik heb ooit zo'n oplossing gebouwd, maar zonder gebruik te maken van browser-specifieke CSS, ik moet alleen ff wat archieven doorspitten

Anyhoe: je hebt inmiddels ook al een werkende versie

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 5 december 2006 14:46

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

BtM909 schreef op dinsdag 05 december 2006 @ 14:33:
Anyhoe: je hebt inmiddels ook al een werkende versie

Mja, als jij een non-css-hacks versie ergens kunt vinden zou je me een groot plezier doen

Echter, er is nu geen haast meer bij, dus ga eerst maar lekker sinterklaas vieren

Zo, heb ik eindelijk die smiley eens gebruikt

[ Voor 22% gewijzigd door RobIII op 05-12-2006 14:47 ]

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

dinsdag 5 december 2006 14:58

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Ik zie niet echt hacks hoor

Ga jij maar

vieren

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 5 december 2006 23:29

Acties:

0 Henk 'm!

Blue-eagle

Hack? Die IE comment tag? Ik vind hem netjes hoor

woensdag 6 december 2006 20:30

Acties:

0 Henk 'm!

Verwijderd

maak er een list van. wel zo netjes.

en dan op de li item, display: block; float: left; tadaa

woensdag 6 december 2006 21:35

Acties:

0 Henk 'm!

Technicality

Vliegt rechtsom...

Verwijderd schreef op woensdag 06 december 2006 @ 20:30:
maak er een list van. wel zo netjes.

en dan op de li item, display: block; float: left; tadaa

Heb je het probleem wel doorgelezen?

woensdag 6 december 2006 22:45

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Topicstarter

Verwijderd schreef op woensdag 06 december 2006 @ 20:30:
maak er een list van. wel zo netjes.

en dan op de li item, display: block; float: left; tadaa

Ik zou je suggestie graag eens uitgewerkt zien, want ik krijg het niet voor elkaar met een ul

Ik ben het met je eens dat een list net(ter) zou zijn, maar ik zie dat nog niet gebeuren.

[ Voor 12% gewijzigd door RobIII op 06-12-2006 22:49 ]

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 7 december 2006 10:16

Acties:

0 Henk 'm!

BtM909

Watch out Guys...

Verwijderd schreef op woensdag 06 december 2006 @ 20:30:
maak er een list van. wel zo netjes.

en dan op de li item, display: block; float: left; tadaa

Ehm, lees het probleem eens door voordat je reageert

Een ol zou op zich nog wel kunnen, hence my div-alicious opmerking, maar dan blijf je toch bij een soortgelijke oplossing als RobIII al heeft bedacht

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.