"Tetris" med CSS-bokse

[Jonathan Stein]

Hejsa.

Jeg har en side med bokse, der alle er lige brede, men har forskellig
h�jde. Dem vil jeg gerne have pakket s� t�t som muligt, samtidig med at
jeg gerne vil udnytte hele sidebredden.

Jeg har lavet boksene som <div> med width og "display: inline-box". S�
f�r jeg det antal bokse, der er plads til i bredden, men den nye r�kke
starter f�rst efter bunden p� den l�ngste boks.

Haves:

aaa bbb ccc
aaa bbb ccc
bbb ccc
bbb

ddd eee fff
ddd eee fff

�nskes:

aaa bbb ccc
aaa bbb ccc
bbb ccc
ddd bbb
ddd fff
eee fff
eee

Kan det l�ses i ren CSS?

M.v.h.

Jonathan

[Karl Erik Christensen]

Ja, med nogle class'er der floater, samt floatstop (clear) p�
strategiske steder.

Karl Erik.

--
http://dmwebdesign.dk/karlerik/

[Jonathan Stein]

Den 25-03-2013 17:15, Karl Erik Christensen skrev:

> Ja, med nogle class'er der floater, samt floatstop (clear) p�
> strategiske steder.

Med float og clear kan jeg f� boksene til at "flyde" i samme kolonne, s�
l�nge indholdet ikke er l�ngere end forrige kolonne, men jeg kan f.eks.
ikke slippe for et tomt omr�de under f�rste boks, hvis anden boks er
l�ngere end den f�rste.

Alts� f.eks.:

aaa bbb ccc
aaa bbb ccc
bbb

bbb ddd
ddd

eee fff
eee fff

- jeg savner en lodret float...

M.v.h.

Jonathan

[Bertel Lund Hansen]

Jonathan Stein skrev:

> Med float og clear kan jeg f� boksene til at "flyde" i samme kolonne, s�
> l�nge indholdet ikke er l�ngere end forrige kolonne, men jeg kan f.eks.
> ikke slippe for et tomt omr�de under f�rste boks, hvis anden boks er
> l�ngere end den f�rste.

M�ske kan du lave tre lodrette div'er ved siden af hinanden og s�
floate elementerne inden i dem, men s� er elementerne bundet
indeni den div hvor de er anbragt.

--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/

[Karl Erik Christensen]

Kombinationer med float Left/right og clear both/left/right, b�r kunne
opfylde dine �nsker.

Du kan jo have b�de float left og right class'er p� samme r�kke.
S� er det bare om at clear'e de rigtige steder.

Har du for �vrigt t�nkt p� mobiler og tabletter (width)?
Responsive design b�r indg� i overvejelserne.

[Jonathan Stein]

Den 26-03-2013 13:34, Bertel Lund Hansen skrev:

> M�ske kan du lave tre lodrette div'er ved siden af hinanden og s�
> floate elementerne inden i dem, men s� er elementerne bundet
> indeni den div hvor de er anbragt.

Hvis jeg l�ser mig fast p� et bestemt antal kolonner, er det ikke noget
problem. Udfordringen er, at jeg gerne vil have s� mange kolonner, som
der er plads til.

M.v.h.

Jonathan

[Jonathan Stein]

Den 26-03-2013 13:34, Karl Erik Christensen skrev:

> Du kan jo have b�de float left og right class'er p� samme r�kke.
> S� er det bare om at clear'e de rigtige steder.

Hvis jeg ved hvilke bokse, der skal i hvilken kolonne, kan jeg sagtens
f� det til at st� rigtigt med float, men det kr�ver, at jeg l�ser mig
fast p� et bestemt antal kolonner (og s� kan det l�ses nemmere end med
float).

> Har du for �vrigt t�nkt p� mobiler og tabletter (width)?
> Responsive design b�r indg� i overvejelserne.

Ja, det er s�dan set det, der er hele humlen.

Jeg bruger max-width, s� boksene bliver smallere, hvis sk�rmbredden er
mindre end min �nskede boks-bredde (og i s� fald er der jo kun plads til
�n kolonne, og s� k�rer det hele fint).
Det sjove kommer f�rst, n�r der er plads til mindst to bokse i bredden.

M.v.h.

Jonathan

[Karl Erik Christensen]

Vil du give et link til siden, s� vi kan f� et indtryk af hvad det er du
laver?

Jeg har ikke helt forst�et hvordan du �nsker at floate.

Mht. responsive - bruger du f.eks. "viewport"?
Hvordan definerer du "width"? px. em eller %?

[Kim Ludvigsen]

Jonathan Stein skrev:

> Jeg har lavet boksene som <div> med width og "display:
> inline-box". S� f�r jeg det antal bokse, der er plads til i
> bredden, men den nye r�kke starter f�rst efter bunden p� den
> l�ngste boks.
>

> Kan det l�ses i ren CSS?

Nej. Det n�rmeste du kommer er, hvad Bertel Lund Hansen
foreslog tidligere i tr�den. Han var hurtigere til at
gennemskue problemet end mig, dit tegnefors�g gjorde det
sv�rere at forst�, fordi jeg ikke bruger fast bredde i min
usenetl�ser.

Jeg har rent faktisk lavet en s�dan side, hvor jeg benytter
det Bertel foresl�r sammen med float. Og p� samme side har
jeg en l�sning, som jeg bruger for nogle andre bokse, hvor
de placeres p�nt med CSS, fordi jeg laver boksene lige store
med scroll. Men jeg ved ikke, om scroll er en mulighed i dit
tilf�lde.

Siden med brug af begge metoder:
http://kimludvigsen.dk/sammenligning/antivirus/index.php

--
Mvh. Kim Ludvigsen
Hold din dr�mmeferie i Thailand. Find tips og info p�:
http://rejse-til-thailand.dk

[Jonathan Stein]

Den 26-03-2013 15:03, Karl Erik Christensen skrev:

> Vil du give et link til siden, s� vi kan f� et indtryk af hvad det er du
> laver?

Det ligger p.t. lokalt, men Kims side viser egentlig problemet:
http://kimludvigsen.dk/sammenligning/antivirus/index.php

Hvis man resizer browseren, s� der er plads til to kolonner i bredden,
kommer der et hul mellem kassen "Om denne side" og "Om sikkerhed p� Mac".

> Mht. responsive - bruger du f.eks. "viewport"?
> Hvordan definerer du "width"? px. em eller %?

Jeg har ikke sat viewport og boksene har en fast bredde (i px).

M.v.h.

Jonathan

[Kim Ludvigsen]

Jonathan Stein skrev:

> Jeg har ikke sat viewport og boksene har en fast bredde (i px).

Du har ikke mulighed for at bruge scroll i boksene, så de
bliver lige høje?

Uanset, så må det være muligt at flikke noget sammen med
JavaScript, hvor du finder bokshøjden og så laver en
udregning, der placerer boksene alt efter deres højde. Men
så bliver det jo ikke med ren CSS, som du efterlyste.

--
Mvh. Kim Ludvigsen
Hold din drømmeferie i Thailand. Find tips og info på:
http://rejse-til-thailand.dk

[Karl Erik Christensen]

Hvis Kim floater boksen med "Om sikkerhed p� smartphones m.m." right, og
boksen med "Om sikkerhed p� Mac" left, tror jeg den flyder op og d�kker
det tomme rum.

Egentlig kan man n�jes med at floate alle bokse left.

For at opn� responsive design, skal viewport detekteres, og boksens
width skal s�ttes til 100%, under den viewport st�rrelse man v�lger.

Eks:

.boks {
width: 100%;
}
@media only screen and (min-width: 768px){
.boks {
width: 50%;
float: left;
}
}

S� vil boks fylde hele sk�rmen ved vindue under 768px, og flyde left ved
viewport over 768px. Der bliver alts� plads til 2 bokse side om side.

P� samme m�de kan udbygges med flere bokse side om side, ved st�rre
viewport.

[Karl Erik Christensen]

Den 27-03-2013 17:27, Karl Erik Christensen skrev:
> S� vil boks fylde hele sk�rmen ved vindue under 768px, og flyde left ved
> viewport over 768px. Der bliver alts� plads til 2 bokse side om side.
>
> P� samme m�de kan udbygges med flere bokse side om side, ved st�rre
> viewport.

Hvis boksene ikke er lige h�je, floates right. Men s� skal man v�re
opm�rksom p�, at sidste .boks i html'en, vises f�rst - alts� fra venstre.

[Kim Ludvigsen]

Karl Erik Christensen skrev:

> Den 27-03-2013 13:43, Jonathan Stein skrev:
>>
>> Det ligger p.t. lokalt, men Kims side viser egentlig
>> problemet:
>> http://kimludvigsen.dk/sammenligning/antivirus/index.php
>>
>

> Hvis Kim floater boksen med "Om sikkerhed på smartphones
> m.m." right, og boksen med "Om sikkerhed på Mac" left, tror
> jeg den flyder op og dækker det tomme rum.

Du kan ikke opnå det ønskede med ren CSS. Jeg kæmpede,
ligesom Jonathan Stein, før jeg opgav og blot bandt et par
stykker sammen for at undgå alt for store huller på grund af
en høj boks.

Problemet ved float er, at det kun virker vandret, så du vil
altid hoppe ned på en ny linje, og hvis boksen før er meget
højere end dem endnu tidligere på linjen, så bliver der huller.

--
Mvh. Kim Ludvigsen
Undgå faldgruberne, sådan vælger du det rette webhotel:
http://kimludvigsen.dk/tips-internet-websnedker-webhotel.php

[Jonathan Stein]

Den 27-03-2013 16:02, Kim Ludvigsen skrev:

> Du har ikke mulighed for at bruge scroll i boksene, s� de bliver lige h�je?

Tjo, jeg har vel muligheden, men s� vil jeg hellere kaste mig ud i noget
Javascript eller finde en anden l�sning...

M.v.h.

Jonathan

[Jonathan Stein]

Den 27-03-2013 17:27, Karl Erik Christensen skrev:

> Hvis Kim floater boksen med "Om sikkerhed p� smartphones m.m." right, og
> boksen med "Om sikkerhed p� Mac" left, tror jeg den flyder op og d�kker
> det tomme rum.

Jo, - men hvis man s� har en bredere eller smallere sk�rm, skal boksene
floate p� en anden m�de for at st� rigtigt...

> Egentlig kan man n�jes med at floate alle bokse left.

Nej, s� "h�nger" boksene som vist i mit indl�g fra 26-03-2013 13:17
(skal vises med en skrifttype med fast bredde - ellers giver figuren
ikke mening!)

M.v.h.

Jonathan

[Karl Erik Christensen]

Den 27-03-2013 18:11, Kim Ludvigsen skrev:
> Karl Erik Christensen skrev:
>> Den 27-03-2013 13:43, Jonathan Stein skrev:
>>>
>>> Det ligger p.t. lokalt, men Kims side viser egentlig
>>> problemet:
>>> http://kimludvigsen.dk/sammenligning/antivirus/index.php
>>>
>>
>> Hvis Kim floater boksen med "Om sikkerhed på smartphones
>> m.m." right, og boksen med "Om sikkerhed på Mac" left, tror
>> jeg den flyder op og dækker det tomme rum.
>
> Du kan ikke opnå det ønskede med ren CSS. Jeg kæmpede, ligesom Jonathan
> Stein, før jeg opgav og blot bandt et par stykker sammen for at undgå
> alt for store huller på grund af en høj boks.
>
> Problemet ved float er, at det kun virker vandret, så du vil altid hoppe
> ned på en ny linje, og hvis boksen før er meget højere end dem endnu
> tidligere på linjen, så bliver der huller.
>

Jeg vil vædde "en stegt rødspætte" at det lader sig lave med css.

Nu har jeg godt nok lige fået nyt tv - men når jeg har fået styret min
lyst med det, skal jeg vise hvordan :-)

Så begynd bare at tænke på, hvornår du kan invitere på rødspætte :-)

[runeof...@hotmail.com]

On 27 Mar., 22:30, Karl Erik Christensen <n...@none.invalid> wrote:
> Den 27-03-2013 18:11, Kim Ludvigsen skrev:
>
>
>
>
>
>
>
>
>
> > Karl Erik Christensen skrev:
> >> Den 27-03-2013 13:43, Jonathan Stein skrev:
>
> >>> Det ligger p.t. lokalt, men Kims side viser egentlig
> >>> problemet:
> >>>http://kimludvigsen.dk/sammenligning/antivirus/index.php
>
> >> Hvis Kim floater boksen med "Om sikkerhed på smartphones
> >> m.m." right, og boksen med "Om sikkerhed på Mac" left, tror
> >> jeg den flyder op og dækker det tomme rum.
>
> > Du kan ikke opnå det ønskede med ren CSS. Jeg kæmpede, ligesom Jonathan
> > Stein, før jeg opgav og blot bandt et par stykker sammen for at undgå
> > alt for store huller på grund af en høj boks.
>
> > Problemet ved float er, at det kun virker vandret, så du vil altid hoppe
> > ned på en ny linje, og hvis boksen før er meget højere end dem endnu
> > tidligere på linjen, så bliver der huller.
>
> Jeg vil vædde "en stegt rødspætte" at det lader sig lave med css.

Det kan ikke laves med CSS2.1.

Jeg tror det nærmeste du kommer er flex-box
http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox


MVH
Rune Jensen

[Karl Erik Christensen]

Den 02-04-2013 20:12, runeof...@hotmail.com skrev:
>> Jeg vil v�dde "en stegt r�dsp�tte" at det lader sig lave med css.

> Det kan ikke laves med CSS2.1.

Det kan da godt v�re at jeg skal pudse mine briller, og spise noget mere
salat.
Som jeg ser det, er det et sp�rgsm�l om at lade kasserne "flyde" op p�
ledige pladser. Hvis kasserne ikke skal flyde op, skal der inds�ttes en
"flydesp�rre".

Men det er ikke hverken f�rste eller sidste gang, jeg har misforst�et noget.
Jeg mindes med gru 26. marts 1984 - sidst jeg tog fejl :-)

[Benny Nissen]

Den 02-04-2013 21:03, Karl Erik Christensen skrev:

> Men det er ikke hverken første eller sidste gang, jeg har misforstået

> noget.
> Jeg mindes med gru 26. marts 1984 - sidst jeg tog fejl :-)

Jamen, så tillykke med bryllupsdagen for nylig :-)

--
Benny

[Jonathan Stein]

Den 25-03-2013 16:38, Jonathan Stein skrev:

> Jeg har en side med bokse, der alle er lige brede, men har forskellig

> h�ｿｽjde. Dem vil jeg gerne have pakket s�ｿｽ t�ｿｽt som muligt, samtidig med at

> jeg gerne vil udnytte hele sidebredden.

Jeg spytter gerne i kassen til en r�ｿｽdsp�ｿｽtte, hvis Karl Erik kommer med
en CSS-l�ｿｽsning, men indtil videre har jeg l�ｿｽst det med et lille script
(baseret p�ｿｽ jQuery):

var firstTop = 0;
var columns = new Array();

function position() {
firstTop = $(".box:first").offset().top; // Find top of first box
$(".box").each(function(i) {
box = $(this);
if (box.offset().top <= firstTop) {
// Box is on top row - make a new column
columns[i] = { top: firstTop + box.outerHeight(true), left:
box.offset().left };
} else {
// Box is not on top row - place it in shortest column
shortestColumn = 0;
for (j = 0; j < columns.length; j++)
if (columns[j].top < columns[shortestColumn].top)
shortestColumn = j;
box.offset(columns[shortestColumn]);
columns[shortestColumn].top += box.outerHeight(true);
}
});
}

$(document).ready(position());

$(window).resize(function() {
// Reset position when window is resized
$(".box").css("position", "inherit");
position();
});

- kan ses i funktion p�ｿｽ http://jonathanstein.dk/demos/boxdemo.html

M.v.h.

Jonathan

[Karl Erik Christensen]

Den 05-04-2013 11:54, Jonathan Stein skrev:
> Jeg spytter gerne i kassen til en rødspætte, hvis Karl Erik kommer med
> en CSS-løsning, men indtil videre har jeg løst det med et lille script
> (baseret på jQuery):

Er layoutet som du gerne vil ha det?

Jeg ser om tiden tillader her i den kommende weekend.

Mit løsningsforslag indebærer at:

bbb og ccc floates right, og aaa, ddd og eee floates left.

Sådan mener jeg det kan løses.
Vil i hvert fald give noget der ligner din side.

Men hvis du ønsker Responsive design, kommer det sikkert til at se
anderledes ud - afhængig af viewport.

[Jonathan Stein]

Den 05-04-2013 13:37, Karl Erik Christensen skrev:

> Er layoutet som du gerne vil ha det?

Ja.

> Mit løsningsforslag indebærer at:
>
> bbb og ccc floates right, og aaa, ddd og eee floates left.

Husk, at de aktuelle bokse kun er et eksempel. Det væsentlige er, at
designet holder, selv om man ændrer:
- Antallet af bokse
- Boksenes længde
- Skærmens bredde

M.v.h.

Jonathan

[Karl Erik Christensen]

Skærmens bredde (viewport) er jo netop det springende punkt.

Det giver ikke megen mening, at have 3 bokse side om side, på små mobil
skærme.

33,3% af fx. 180 pixel er jo så godt som ingenting.

Men lad os se på resultatet, når det foreligger.

[Karl Erik Christensen]

Den 05-04-2013 21:51, Karl Erik Christensen skrev:
> Skærmens bredde (viewport) er jo netop det springende punkt.
>
> Det giver ikke megen mening, at have 3 bokse side om side, på små mobil
> skærme.
>
> 33,3% af fx. 180 pixel er jo så godt som ingenting.
>
> Men lad os se på resultatet, når det foreligger.
>
> Karl Erik.

Løsningsforslag på:
http://dmwebdesign.dk/karlerik/test/tetris/tetris.html

Bemærk et par forbehold:
Hvis 2 a-boxe er mindre end 1 c-box, skal der cleares efter hver 2'den
a-boks.
Ved viewport under ca. 325 pixel går det galt, fordi designet _ikke_ er
Responsive. Men det kan nemt blive det ($$$).

Glæder mig til dejlig stegt rødspætte :-)

[Jonathan Stein]

Den 06-04-2013 03:54, Karl Erik Christensen skrev:

> Løsningsforslag på:
> http://dmwebdesign.dk/karlerik/test/tetris/tetris.html

Jeg har ikke kigget på alle detaljerne, men funktionelt er effekten
nogenlunde den samme, som hvis man bare laver 3 kolonner med 33% bredde...

Prøv at kigge på mit eksempel med forskellig bredde på browser-vinduet.
Idéen er, at boksene skal have en fast bredde(*), og så skal der være så
mange kolonner, som skærmen giver plads til.

(*) Eller mere præcist en fast maksimal bredde - hvis vinduet er
smallere, skal boksene ikke være bredere end vinduet.

M.v.h.

Jonathan

[Karl Erik Christensen]

Du er ude i "Mission impossible".

Hvordan vil du undersøge hvor mange bokse der er plads til?
Det kan du ikke uden at detektere viewport.

Hvis boksene skal have en "fast" bredde, skal du lave en style for hver
eneste pixel.

Du opnår heller ikke Responsive Design når du definerer i absolutte enheder.

Du bliver nødt til at sætte nogle "områder", hvor du indenfor hvert
område, bestemmer dit design i css-filen.

Hvis du netop prøver at ændre dit browservindue, ser du hvordan dit
design hopper og danser, når vinduet ændrer størrelse.

F.eks. op til 300 px viewport: 1 kolonne.
Mellem 300 og 480 pixel: 2 kolonner.
Mellem 480 og 600 pixel: 3 kolonner.
OSV.
De nævnte områder er blot eksempler

Hvor vil du sætte grænsen for boksenes bredde?
De mindste mobiltelefoner har en viewport på 160 pixel. Dem får du kun
med ved at sætte bredder i procent.

Hvis du vælger bredde på 300 px, vil 2 bokse ved siden af hinanden,
fylde min. 600 px. Normal viewport på en Smartphone er 480 px.

Det går altså ikke at placere "et ben i hver lejr".
Man må vælge - enten Responsive Design, eller traditionelt.
Og hvis du vælger det traditionelle, kan du vinke farvel til mobiler og
håndholdte enheder.

[Jonathan Stein]

Den 06-04-2013 18:44, Karl Erik Christensen skrev:

> Du er ude i "Mission impossible".

Med CSS er det nok impossible - det var jo det, mit oprindelige indlæg
gik på.

> Hvordan vil du undersøge hvor mange bokse der er plads til?

Jeg sætter en bredde på boksen - så renderer browseren det antal bokse,
der er plads til i bredden.

> Hvis boksene skal have en "fast" bredde, skal du lave en style for hver
> eneste pixel.

Det kan jeg ikke lige følge dig i?

> Du opnår heller ikke Responsive Design når du definerer i absolutte
> enheder.

Den kan jeg heller ikke helt følge dig i. Husk, at en CSS "px" ikke
nødvendigvis er det samme som en pixel på skærmen
(http://www.w3.org/TR/css3-values/#reference-pixel).

Tværtimod vil en boks, der altid er 30% af skærmbredden være ubrugelig
på meget små eller meget store skærme, mens en boks på 300px som regel
er en meget god spaltebredde.

> Hvis du netop prøver at ændre dit browservindue, ser du hvordan dit
> design hopper og danser, når vinduet ændrer størrelse.

Ja - jeg vil jo netop gerne have, at layoutet altid tilpasser sig den
aktuelle vinduesbredde. (Måske kunne resize laves lidt mere elegant).

> Hvor vil du sætte grænsen for boksenes bredde?

max-width

> De mindste mobiltelefoner har en viewport på 160 pixel. Dem får du kun
> med ved at sætte bredder i procent.

Det fungerer fint - jeg får én boks med en bredde på 160 pixel. På så
små skærme skal jeg ikke have flere kolonner.

> Det går altså ikke at placere "et ben i hver lejr".
> Man må vælge - enten Responsive Design, eller traditionelt.
> Og hvis du vælger det traditionelle, kan du vinke farvel til mobiler og
> håndholdte enheder.

Jeg forstår ikke helt din kommentar. Jeg har kigget på min egen demo på
både en lille mobil og en stor stationær skærm, og synes resultatet er
fint i begge tilfælde.

M.v.h.

Jonathan

[Karl Erik Christensen]

Den 07-04-2013 11:30, Jonathan Stein skrev:
> Med CSS er det nok impossible - det var jo det, mit oprindelige indl�g
> gik p�.

Jeg har vist dig hvordan.

Hvad sker der, hvis din bl� bbb boks bliver kortere, s� den ikke
"d�kker" de sm� bokse i venstre side?

[Jonathan Stein]

Den 07-04-2013 12:46, Karl Erik Christensen skrev:

>> Med CSS er det nok impossible - det var jo det, mit oprindelige indl�g
>> gik p�.
>
> Jeg har vist dig hvordan.

�h, du skrev: "Du er ude i "Mission impossible".". - Og nu skriver du,
at du har vist mig hvordan?

> Hvad sker der, hvis din bl� bbb boks bliver kortere, s� den ikke
> "d�kker" de sm� bokse i venstre side?

Hvis b bliver kortere end a, s� vil der blive placeret en boks under b
f�r der evt. bliver placeret en under a.
(Det kan let pr�ves med Firebug eller lignende v�rkt�j - eller ved at
gemme siden lokalt og �ndre koden).

M.v.h.

Jonathan

[Karl Erik Christensen]

Du er ude i "Mission Impossible" fordi du blander Responsive og
Traditionelt design.

Mit design er "pre-responsive", fordi det grundl�ggende er forberedt for
Responsive - det mangler blot de n�vnte viewport-gr�nser.

Mit design fungerer ned til ca. 325px viewport. Derunder g�r det galt.
Men med en smule ekstra styling, vil det fungere 100% ved alle viewport
st�rrelser.

[Jonathan Stein]

Den 07-04-2013 18:13, Karl Erik Christensen skrev:

> Mit design fungerer ned til ca. 325px viewport. Derunder g�r det galt.

Tja, for en passende definition af "fungerer".

Opgaven gik p� bokse med fast bredde, der skulle placeres t�ttest muligt
i s� mange kolonner, som der er plads til p� sk�rmen.

Du valgte tre kolonner med variabel bredde. Der er ikke mange ligheder
med det oprindelige �nske.

Min f�rste prioritet er bokse i en l�sevenlig bredde. Derfor vil jeg
hellere have �n bred boks end tre smalle p� en lille sk�rm. Omvendt vil
jeg have flere bokse i bredden, hvis sk�rmen er meget bred - ellers
bliver linjerne for lange.

Kald det "responsive" eller noget andet. Det vigtige er, at det er
l�sevenligt p� alle sk�rmst�rrelser.

M.v.h.

Jonathan

[Karl Erik Christensen]

Den 07-04-2013 19:06, Jonathan Stein skrev:
> Du valgte tre kolonner med variabel bredde. Der er ikke mange ligheder
> med det oprindelige �nske.

Jeg tror jeg stopper her.
Enten kan eller vil du ikke forst�, hvad jeg skriver.

Jeg skrev at mit design blot mangler styles, for de forskellige Viewports.
Din side skal unders�ge hvor stor viewporten er - hvordan skal den
ellers vide, hvor mange "kolonner eller bokse" der skal vises side om side.

Du m� forst� hvordan dit script virker.

[Jonathan Stein]

Den 07-04-2013 19:14, Karl Erik Christensen skrev:

> Enten kan eller vil du ikke forstå, hvad jeg skriver.

Jeg har i hvert fald temmelig svært ved at se pointen i det...

Hvis du vil lave et design for ethvert muligt antal bokse i bredden,
forstår jeg slet ikke hvad du vil med "float" - så kan du jo bare lave
det givne antal kolonner.

- Men det bliver et helvede at vedligeholde (og umuligt hvis boksenes
højde ikke er kendt på forhånd).

> Du må forstå hvordan dit script virker.

Ja - og opgaven er så at opnå samme funktionalitet i en ren CSS-løsning
(boksenes rækkefølge er ikke afgørende - hvis boksene kan pakkes tæt i
en anden rækkefølge med ren CSS, er det også ok).

M.v.h.

Jonathan