Posted by Helmut_pdorf on 28 May 2012 07:26, last edited by Helmut_pdorf on 28 May 2012 07:43
: css3 div layout multi-column
There are some questions how to divide outcoming ListPages module output ibnto 2 or more columns automatically - this is more a questikon about print-layout like we all know it from the newspaper.
I will have a try here with the newest CCS3 layout commands ( as usual they will work only under Firefox m Chrome and Safari) but we never know when the other browser will show them correctly and not under standard text box.
The typical cccs commands are .
<!-- HTML --> <divid="content"> <p>LoremIpsum ......</p> <p>Someparagraphs</p> </div> Forthesetupofcolumncountnowuse "column-count": /*CSS*/ #content{width:600px; column-count:2; -moz-column-count:2; /*Firefox*/ -webkit-column-count:2; /*SafariandChrome*/ column-gap:40px; }Forthesetupofcolujmn-widhtuse "column-width" verwendet. /*CSS*/ #content{width:600px; column-width:280px; -moz-column-width:280px; -webkit-column-width:280px; column-gap:40px; -moz-column-gap:40px; /*Firefox*/ -webkit-column-gap:40px; /*SafariandChrome*/ }
Both has the same result . the division of the 600px width by 280px gives 2,14 - therefore the browser takes the digits before the decimal point only ( = 2 columns) !
At the moment:
http://www.w3schools.com/css3/css3_multiple_columns.asp says:
Internet Explorer does not yet support the multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
Examples
Let's take an example with following code:
[[div style="width: 600px;column-count: 2;-moz-column-count:2;-webkit-column-count:2;column-gap: 40px;-moz-column-gap:40px;-webkit-column-gap:40px;"]]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula.
[[/div]]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit.
Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a libero. Vestibulum adipiscing, felis ac faucibus imperdiet, erat lacus accumsan neque, vitae nonummy lorem pede ac elit. Maecenas in urna. Curabitur hendrerit risus vitae ligula.
It should work in FF (12) and perhaps in chrome & Safari…
Anogher use is in ListPages output ..
Related articles
Comments
Below works in FF, Chrome, Safari, Opera, IE:
Directly use CSS style code for a DIV to show multi-columns:
[[div_ style="-moz-column-count:2; -ms-column-count:2; -o-column-count:2; -webkit-column-count:2; column-count:2; width:100%; border:1px solid lightgrey;"]]
A line as example 1.
Another line as example 2.
Another line as example 3.
Another line as example 4.
[[/div]]Above code will result into:
Another line as example 2.
Another line as example 3.
Another line as example 4.
ANOTHER WAY TO USE MULTIPLE-COLUMNS, is to use CSS file, class & DIV:
Sub-domain/Sub-directory site's admin need to find+goto the used theme's CSS-file edit page, and add these CSS properties:
div.TwoColumns {
-moz-column-count:2; -ms-column-count:2; -o-column-count:2; -webkit-column-count:2; column-count:2;
}After adding above CSS properties in your-site's CSS file, use below code in your webpage:
[[div_ class="TwoColumns" style="width:60%; border:1px solid lightgrey;"]]
A line as example 5.
Another line as example 6.
Another line as example 7.
Another line as example 8.
[[/div]]Above code will result into:
Another line as example 6.
Another line as example 7.
Another line as example 8.