Tekst in kolom doorlopen in andere kolom

Door Mich op 02-09-2015 17:22 gewijzigd op 02-09-2015 17:25

1.238 views

Hallo,

Graag zou ik een kolom (div) met gegevens over willen laten lopen in een andere kolom.
Ik heb nu een lijst met jarigen.


januari februari maart
a       g        j
b       h        k
c       i        l
d                m
e         
f

Deze lijsten zijn te lang om op 1 pagina (a4) te krijgen en kun je dus nooit mooi uitprinten.
Nou zou ik dit graag als volgt willen zien


januari e        i
a       f        maart
b       februari j
c       g        k
d       h        l

<page-break>

m
april
n
o
p

Hoor het graag.

Dit is even in de Javascript categorie geplaatst, maar als het in CSS kan zou nog mooier zijn.

DavY -

02-09-2015 19:58

Je kunt toch aantal div's aanmaken en rows tellen, waarmee je jarigen ophaalt uit je database en afhankelijk van aantal jarigen, plaats je het dan weer in een ander div, mits ik je vraag goed begrepen hebt dan?

Eddy E

02-09-2015 20:39 gewijzigd op 02-09-2015 20:56

Kijk eens naar de mogelijkheden van CSS.

p { columns: 33%; column-count: 3; }

Een stuk leesvoer wat je echt zal helpen: http://alistapart.com/article/goingtoprint

Mijn voorbeeldje, speciaal voor jou: http://codepen.io/anon/pen/NGPKMR

Mich

02-09-2015 20:54

@Davy, dat klopt wel maar je weet niet precies hoe hoog een div wordt. De maanden hebben een groter lettertype en margin dus een kolom met maand is groter dan een kolom zonder en kleiner dan een kolom waar toevallig 2 maanden (titels) in vallen.

@Eddy, ik wist eerlijk gezegd niet dat css een 'columns' optie had. Ik zal dit eens opzoeken en uitproberen.

Eddy E

02-09-2015 20:58

Dat is echt wat je zoekt.
Je 'maanden' zijn uiteraard gewoon <h2>maart</h2>.
De rest staat in een <p>.

Mich

03-09-2015 21:02

Eddy, super voorbeeld! Alleen ik krijg het niet werkend.
Uit frustratie heb ik je hele code even exact overgenomen.
Maar zoals je hier ziet wordt het gewoon onder elkaar geplaatst.
Zie ik iets over het hoofd?

Eddy E

03-09-2015 21:13

Prefixer aangezet? Wellicht ondersteund je browser het niet (dus waarschijnlijk geen Chrome/Opera etc).

Mich

03-09-2015 21:17

Prefixer aangezet??
Ik gebruik chrome inderdaad en je voorbeeld op codepen geeft t wel in 3 kolommen weer.

[size=xsmall]Toevoeging op 03/09/2015 21:20:52:[/size]

Als ik 'columns: 3' vervang door het volgende werkt het wel!

    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;

[size=xsmall]Toevoeging op 03/09/2015 21:26:59:[/size]

Dan heb ik nog één ding. 12 maanden passen natuurlijk nooit op één bladzijde.
Hoe krijg ik het nou verdeelt over meerder pagina's? Wat doe ie page-break-inside: auto; dan eigenlijk?
Als ik trouwens een print-voorbeeld opvraag valt alles weer uit elkaar dus is nog niet printbaar, maar daar kijk ik nog wel even naar.

Eddy E

03-09-2015 21:33

Page-break zet dat het element halverwege een volgende pagina gebroken mag worden.
Wat gebeurt er als je div.a4 verwijderd? Maar wel de inhoud laat staan?
(makkelijkste is dus even de class="a4" verwijderen)

Mich

04-09-2015 15:38

De a4 class had ik uiteraard al verwijdert. Ik heb het nu zo goed als voor mekaar alleen ik kan het niet printen, maar dit is bekend.

It seems like the developer of columns in Webkit (Dave Hyatt) disabled columns when printing, because he couldn't implement page breaking properly: https://www.webkit.org/blog/88/css3-multi-column-support/#comment-16854

I'm surprised that in more than 5 years, no solution has been found...

Een 'oplossing' hiervoor is IE gebruiken om te printen, maar ik ga er sowieso nog een PDF versie van maken.

Bedankt voor je antwoorden, voorbeeld en geduld!

Reageren

Inloggen om te reageren