Tekst i 3 dynamiske kolonner

<ole>

- ja, det er absolut en kæmpe opgave ... men hvad er så den 'lille opgave', du ønsker hjælp til?

/mvh
</bole>

Lidt guide/CSS/HTML til hvordan opgaven løses.

Teksten som bliver leveret til browseren ser ud som følgende eksempel:

<div id="textcolumns">
<p class="bodytext">Iste quidem veteres inter ponetur honeste, qui vel mense brevi el toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.<br />
<br />
Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare idetur, quo promissa cadant et omnia Pythagorea.Naevius in manibus non est et entibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.<br />
</div>

Den tekst skulle så gerne blive præsenteret i 3 kolonner - hvis det kan lade sig gøre... :)

//Anders

Ja, det er bestemt ikke ligetil. =)

Nej, så langt er jeg også kommet. Jeg havde måske lidt håbet at der var en Expert med den fornødne viden.... :)

//Anders

Det er der sandelig også, men det kan ikke løses med dagens CSS  =)

Okay. Så konklusionen er at det ikke sådan "nemt" kan lade sig gøre? Hvis det gør nogen forskel (og der er kendskab til det), så bruger jeg TYPO3 som CMS. Der er MANGE muligheder med TYPO3, men jeg kan ikke lige komme i tanke om noget deri der kan løse opgaven.... :-|

//Anders

Jeg fandt lige et gammelt eksempel, jeg har siddet og leget med. Jeg kom dog ikke så langt, før jeg mistede interessen. Jeg havde dengang også troet, at det ville være lettere.

Nedenstående eksempel kan _kun_ håndtere ren tekst, dvs. ikke engang "<br>" i teksten. Og derudover bryder den nogle gange midt i et ord, men det kunne nu nok forbedres.

<div id="text1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus venenatis, justo placerat venenatis porttitor, neque lorem congue orci, vel dignissim pede neque non lacus. Nulla dui lacus, pellentesque ut, commodo vel, consectetuer ac, odio. Cras mattis dapibus leo. Morbi non sapien aliquet dolor aliquam eleifend. Cras eu velit non leo tincidunt eleifend. Mauris nec urna. Etiam sed urna vel nulla scelerisque rhoncus. Vestibulum mi sapien, elementum et, adipiscing ac, faucibus in, pede. Integer magna quam, tempus eget, mollis vitae, interdum ac, augue. Aliquam lacus. Nam sit amet ante et ipsum tristique blandit.

    Integer risus. Vivamus accumsan tristique leo. Fusce accumsan mi ut mi. Nullam volutpat blandit lectus. In eros turpis, faucibus eu, suscipit et, dignissim quis, massa. Quisque hendrerit pulvinar mauris. Fusce velit turpis, blandit sit amet, nonummy quis, venenatis nec, arcu. Pellentesque leo leo, viverra eu, gravida nec, ultricies a, massa. Morbi vestibulum, mauris id rhoncus condimentum, tortor tortor cursus velit, a condimentum erat justo vitae libero. Mauris condimentum felis quis magna consequat tristique. Phasellus sit amet ligula. Mauris cursus, enim sit amet viverra dictum, magna mi tristique justo, id rutrum nisi justo ut mi. Nunc at orci a nibh sollicitudin accumsan. Aenean convallis. Duis in nunc hendrerit velit facilisis laoreet. Ut ipsum felis, venenatis sit amet, varius ut, dignissim ut, sapien. Nullam viverra.

    Nunc eget elit. Phasellus neque sem, mollis et, faucibus ac, vulputate a, turpis. Morbi ut neque. Nunc ac orci eu augue gravida elementum. Suspendisse dolor sapien, vestibulum eget, venenatis nec, vestibulum sed, urna. Maecenas porttitor. Vestibulum tortor. Phasellus elit. Donec pharetra, risus sit amet porttitor facilisis, risus felis auctor nisl, ac egestas dui erat sit amet lectus. Phasellus suscipit, mi eu interdum rhoncus, magna lacus sagittis mauris, vitae volutpat turpis quam ullamcorper erat. Duis ut magna a velit mollis congue. Vivamus et magna ac eros adipiscing sodales. Nullam neque lectus, faucibus quis, laoreet vitae, vulputate vitae, ipsum. Aliquam enim mi, vestibulum vel, pellentesque et, scelerisque et, ipsum. Integer eu turpis. Duis fringilla pretium ante. Curabitur rutrum. Vestibulum diam. Nulla varius neque.

    Quisque id purus. Mauris ultrices rutrum felis. Donec at risus. Aliquam vestibulum massa in mauris. Proin at arcu. Phasellus nec urna. Curabitur suscipit, purus ut egestas vestibulum, enim nibh cursus tortor, vel tempus magna nisi non tellus. Praesent blandit dolor a lacus. Morbi venenatis, nibh vel fringilla blandit, ipsum justo vulputate eros, ut pellentesque diam leo a nisl. Suspendisse felis dui, egestas id, hendrerit et, congue a, pede. Nam consectetuer quam interdum nunc. Vestibulum porttitor vulputate elit. Aenean placerat, lacus laoreet sagittis euismod, neque mauris eleifend ligula, vel dictum libero lectus in nibh. Ut eu augue commodo augue varius pulvinar. Suspendisse libero.

    Mauris dapibus lacus vulputate massa. Curabitur vestibulum elit accumsan quam tincidunt porttitor. Aliquam auctor, nunc ac dictum bibendum, mauris magna tempor est, nec sagittis nisi est congue nulla. In laoreet fermentum est. Cras egestas velit id eros. Quisque ornare iaculis leo. Nullam vitae neque id augue sollicitudin imperdiet. Donec vel augue vitae diam vehicula consequat. Donec tincidunt turpis at nisi. Sed vel pede. Nunc vitae ipsum eget risus gravida viverra. In lorem neque, tincidunt eu, rutrum lobortis, cursus quis, mi. Vestibulum pharetra sem eu purus. In nisl mi, consequat eget, mollis at, tempor eget, libero.
</div>

<script type="text/javascript">
function makeCols(o,iCols,iWidth){
    var sText="",oDiv=null;
    for(var i=0;i<iCols;i++){
        sText=o.firstChild.nodeValue.substr((o.firstChild.nodeValue.length/iCols)*i,o.firstChild.nodeValue.length/iCols);

        oDiv=o.appendChild(document.createElement("div"));
        oDiv.appendChild(document.createTextNode(sText));
        oDiv.style.cssText="width:"+iWidth+";float:left;margin-right:15px;text-align:justify";
    }
    o.removeChild(o.firstChild);
}
makeCols(document.getElementById("text1"),3,"200px");
</script>

w13> Meget godt eksempel du her kommer med. Jeg kan dog godt se det problem du nævner med <br>. Det er desværre et krav for at forsætte. Det vil der blive brug for.
Jeg er desværre ikke så skrap til JS, så jeg ved ikke helt hvordan jeg skal løse det problem.

//Anders

Det ved jeg heller ikke. Nu var det jo også kun et eksempel. Hvis HTML-koder skulle inkluderes, skulle koden laves fuldkommen anderledes.

I HTML/CSS findes kun nogle yderst rigide muligheder for tekstomløb, men det er ikke noget teknologien som sådan er bygget - eller egnet - til.

Nu skriver du ikke noget om i hvilken kontekst, tingene skal fungere, men jeg har kraftigt på fornemmelsen, du løber ind i masser af andre problemer og må ud i at skrive et dramatisk større script.

Mit bedste råd: Drop tekstomløb og lav evt. om i designet, så det passer til teknologien  ;o)

olebole> Kan vi godt være enige om at uanset hvordan man designer det, så kommer man ikke uden om brugeren skal gøre et eller andet aktivt for at skifte kolonne, eller har du nogen ide? Jeg syntes selv at jeg har prøvet at bryde hovedet med et løsnings-forslag, men jeg kan ikke komme i tanke om den rette. Som sagt så er output'et fra CMS'et som jeg postede tidligere....

//Anders

Nej, det kan vi være enige om. Hvis du ændrer designet til et uden kolonner, som teksten skal løbe mellem. Det er HTML/CSS ikke indrettet til, hvorfor man gør livet meget lettere for alle ved at undgå det  =)