WDS CMS demo

Skriv ut sidanStart > Demo-sidor > Kolumner
Start > Demo-sidor > Kolumner

Kolumner

Här kan du se exempel på hur du kan använda DIV-boxar med fördefinierade kolumner. Du skapar DIV-boxen genom att välja att visa källkoden (View/Source code) ELLER knappen "WYSIWYG Dölj" och infoga koden för att skapa en DIV. Du kan välja mellan de färdiga classerna nedan:

kolumn_2
kolumn_3
kolumn_4
kolumn_5
kolumn_6

DIV-box med 2 kolumner:

CSS-formaterade boxar (layer eller DIV) kan användas för att dela upp en text i kolumner. Den här boxen är formaterad med classen som ingår i CSS-mallen och skapar en box med bredd 100%:

 <div class="kolumn_2">
Innehållet här...

</div>

Om du vill att texten ska vara fullt justerad, dvs rak i både höger- och vänsterkant kan du ange en egen STYLE:

 <div class="kolumn_2" style="text-align: justify;">
Innehållet här...

</div>

Välj att visa källkoden (View/Source code) ELLER knappen "WYSIWYG Dölj" och infoga koden för att skapa en DIV.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra, ligula in ullamcorper pulvinar, elit libero porta orci, nec tinci

dunt diam ante in leo. Nullam at lectus quam, vel molestie massa. Nunc dapibus tincidunt odio eget pulvinar. Nunc tempor eros sit amet erat feugiat sed lacinia dui interdum. Suspendisse eget consectetur lacus.

Suspendisse faucibus est id augue varius sodales. Suspendisse dignissim mi sed augue vestibulum et tincidunt enim pellentesque. Aenean convallis pellentesque ornare. In hac habitasse platea dictumst. Praesent luctus lectus quis tortor faucibus aliquam. Nulla facilisi. In nisl metus, vulputate ac consequat nec, pharetra nec ligula.

Class aptent
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi orci dolor, condimentum in vehicula rhoncus, tincidunt a magna. Fusce imperdiet malesuada accumsan. Duis blandit orci eu nibh vehicula elementum. Nam sem mauris, mollis et ullamcorper sit amet, venenatis id urna. Nulla quis turpis sit amet justo adipiscing viverra vitae non dui. Nulla sodales sodales sem a ornare. Nulla euismod dignissim erat, a aliquet dui hendrerit in. Cras vitae eros pulvinar mi feugiat tincidunt et at nisl. Donec ac tortor vitae metus tempor lacinia. Phasellus scelerisque pretium ligula consequat vehicula. Integer eros diam, mattis sed elementum vel, pretium ac orci.

Etiam ac neque dui. Nullam fringilla, sem sed pretium consequat, nibh nisl semper ipsum, nec ornare felis turpis vitae mauris. Proin ut felis quis metus aliquet feugiat. Nunc condimentum volutpat interdum. Etiam lobortis molestie ante vel pellentesque. Nulla lacinia ligula nec ligula bibendum eu vehicula arcu malesuada. Fusce id consectetur lacus. Aliquam rutrum sem in justo rhoncus hendrerit vitae sed odio. Cras in dui euismod erat imperdiet molestie ut a sapien. Donec suscipit, purus ut semper ultrices, sem urna ultricies magna, a sollicitudin felis diam at augue. Fusce dolor leo, molestie interdum facilisis sit amet, mattis quis metus. Vestibulum sed sem a lorem commodo aliquet. Ut placerat orci nec magna fringilla euismod rutrum magna vehicula. Donec adipiscing massa sit amet purus posuere eu consectetur tortor pretium.

 

DIV-box med 3 kolumner:

CSS-formaterade boxar (layer eller DIV) kan användas för att dela upp en text i kolumner. Den här boxen är formaterad med classen som ingår i CSS-mallen och skapar en box med bredd 100%:

 <div class="kolumn_3">
Innehållet här...

</div>

Om du vill att texten ska vara fullt justerad, dvs rak i både höger- och vänsterkant kan du ange en egen STYLE:

 <div class="kolumn_3" style="text-align: justify;">
Innehållet här...

</div>

Välj att visa källkoden (View/Source code) ELLER knappen "WYSIWYG Dölj" och infoga koden för att skapa en DIV.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra, ligula in ullamcorper pulvinar, elit libero porta orci, nec tinci

dunt diam ante in leo. Nullam at lectus quam, vel molestie massa. Nunc dapibus tincidunt odio eget pulvinar. Nunc tempor eros sit amet erat feugiat sed lacinia dui interdum. Suspendisse eget consectetur lacus.

Suspendisse faucibus est id augue varius sodales. Suspendisse dignissim mi sed augue vestibulum et tincidunt enim pellentesque. Aenean convallis pellentesque ornare. In hac habitasse platea dictumst. Praesent luctus lectus quis tortor faucibus aliquam. Nulla facilisi. In nisl metus, vulputate ac consequat nec, pharetra nec ligula.

Class aptent
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi orci dolor, condimentum in vehicula rhoncus, tincidunt a magna. Fusce imperdiet malesuada accumsan. Duis blandit orci eu nibh vehicula elementum. Nam sem mauris, mollis et ullamcorper sit amet, venenatis id urna. Nulla quis turpis sit amet justo adipiscing viverra vitae non dui. Nulla sodales sodales sem a ornare. Nulla euismod dignissim erat, a aliquet dui hendrerit in. Cras vitae eros pulvinar mi feugiat tincidunt et at nisl. Donec ac tortor vitae metus tempor lacinia. Phasellus scelerisque pretium ligula consequat vehicula. Integer eros diam, mattis sed elementum vel, pretium ac orci.

Etiam ac neque dui. Nullam fringilla, sem sed pretium consequat, nibh nisl semper ipsum, nec ornare felis turpis vitae mauris. Proin ut felis quis metus aliquet feugiat. Nunc condimentum volutpat interdum. Etiam lobortis molestie ante vel pellentesque. Nulla lacinia ligula nec ligula bibendum eu vehicula arcu malesuada. Fusce id consectetur lacus. Aliquam rutrum sem in justo rhoncus hendrerit vitae sed odio. Cras in dui euismod erat imperdiet molestie ut a sapien. Donec suscipit, purus ut semper ultrices, sem urna ultricies magna, a sollicitudin felis diam at augue. Fusce dolor leo, molestie interdum facilisis sit amet, mattis quis metus. Vestibulum sed sem a lorem commodo aliquet. Ut placerat orci nec magna fringilla euismod rutrum magna vehicula. Donec adipiscing massa sit amet purus posuere eu consectetur tortor pretium.

 

DIV-box med 4 kolumner:

CSS-formaterade boxar (layer eller DIV) kan användas för att dela upp en text i kolumner. Den här boxen är formaterad med classen som ingår i CSS-mallen och skapar en box med bredd 100%:

 <div class="kolumn_4">
Innehållet här...

</div>

Om du vill att texten ska vara fullt justerad, dvs rak i både höger- och vänsterkant kan du ange en egen STYLE:

 <div class="kolumn_4" style="text-align: justify;">
Innehållet här...

</div>

Välj att visa källkoden (View/Source code) ELLER knappen "WYSIWYG Dölj" och infoga koden för att skapa en DIV.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra, ligula in ullamcorper pulvinar, elit libero porta orci, nec tinci

dunt diam ante in leo. Nullam at lectus quam, vel molestie massa. Nunc dapibus tincidunt odio eget pulvinar. Nunc tempor eros sit amet erat feugiat sed lacinia dui interdum. Suspendisse eget consectetur lacus.

Suspendisse faucibus est id augue varius sodales. Suspendisse dignissim mi sed augue vestibulum et tincidunt enim pellentesque. Aenean convallis pellentesque ornare. In hac habitasse platea dictumst. Praesent luctus lectus quis tortor faucibus aliquam. Nulla facilisi. In nisl metus, vulputate ac consequat nec, pharetra nec ligula.

Class aptent
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi orci dolor, condimentum in vehicula rhoncus, tincidunt a magna. Fusce imperdiet malesuada accumsan. Duis blandit orci eu nibh vehicula elementum. Nam sem mauris, mollis et ullamcorper sit amet, venenatis id urna. Nulla quis turpis sit amet justo adipiscing viverra vitae non dui. Nulla sodales sodales sem a ornare. Nulla euismod dignissim erat, a aliquet dui hendrerit in. Cras vitae eros pulvinar mi feugiat tincidunt et at nisl. Donec ac tortor vitae metus tempor lacinia. Phasellus scelerisque pretium ligula consequat vehicula. Integer eros diam, mattis sed elementum vel, pretium ac orci.

Etiam ac neque dui. Nullam fringilla, sem sed pretium consequat, nibh nisl semper ipsum, nec ornare felis turpis vitae mauris. Proin ut felis quis metus aliquet feugiat. Nunc condimentum volutpat interdum. Etiam lobortis molestie ante vel pellentesque. Nulla lacinia ligula nec ligula bibendum eu vehicula arcu malesuada. Fusce id consectetur lacus. Aliquam rutrum sem in justo rhoncus hendrerit vitae sed odio. Cras in dui euismod erat imperdiet molestie ut a sapien. Donec suscipit, purus ut semper ultrices, sem urna ultricies magna, a sollicitudin felis diam at augue. Fusce dolor leo, molestie interdum facilisis sit amet, mattis quis metus. Vestibulum sed sem a lorem commodo aliquet. Ut placerat orci nec magna fringilla euismod rutrum magna vehicula. Donec adipiscing massa sit amet purus posuere eu consectetur tortor pretium.

 

DIV-box med 5 kolumner:

CSS-formaterade boxar (layer eller DIV) kan användas för att dela upp en text i kolumner. Den här boxen är formaterad med classen som ingår i CSS-mallen och skapar en box med bredd 100%:

 <div class="kolumn_5">
Innehållet här...

</div>

Om du vill att texten ska vara fullt justerad, dvs rak i både höger- och vänsterkant kan du ange en egen STYLE:

 <div class="kolumn_5" style="text-align: justify;">
Innehållet här...

</div>

Välj att visa källkoden (View/Source code) ELLER knappen "WYSIWYG Dölj" och infoga koden för att skapa en DIV.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra, ligula in ullamcorper pulvinar, elit libero porta orci, nec tinci

dunt diam ante in leo. Nullam at lectus quam, vel molestie massa. Nunc dapibus tincidunt odio eget pulvinar. Nunc tempor eros sit amet erat feugiat sed lacinia dui interdum. Suspendisse eget consectetur lacus.

Suspendisse faucibus est id augue varius sodales. Suspendisse dignissim mi sed augue vestibulum et tincidunt enim pellentesque. Aenean convallis pellentesque ornare. In hac habitasse platea dictumst. Praesent luctus lectus quis tortor faucibus aliquam. Nulla facilisi. In nisl metus, vulputate ac consequat nec, pharetra nec ligula.

Class aptent
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi orci dolor, condimentum in vehicula rhoncus, tincidunt a magna. Fusce imperdiet malesuada accumsan. Duis blandit orci eu nibh vehicula elementum. Nam sem mauris, mollis et ullamcorper sit amet, venenatis id urna. Nulla quis turpis sit amet justo adipiscing viverra vitae non dui. Nulla sodales sodales sem a ornare. Nulla euismod dignissim erat, a aliquet dui hendrerit in. Cras vitae eros pulvinar mi feugiat tincidunt et at nisl. Donec ac tortor vitae metus tempor lacinia. Phasellus scelerisque pretium ligula consequat vehicula. Integer eros diam, mattis sed elementum vel, pretium ac orci.

Etiam ac neque dui. Nullam fringilla, sem sed pretium consequat, nibh nisl semper ipsum, nec ornare felis turpis vitae mauris. Proin ut felis quis metus aliquet feugiat. Nunc condimentum volutpat interdum. Etiam lobortis molestie ante vel pellentesque. Nulla lacinia ligula nec ligula bibendum eu vehicula arcu malesuada. Fusce id consectetur lacus. Aliquam rutrum sem in justo rhoncus hendrerit vitae sed odio. Cras in dui euismod erat imperdiet molestie ut a sapien. Donec suscipit, purus ut semper ultrices, sem urna ultricies magna, a sollicitudin felis diam at augue. Fusce dolor leo, molestie interdum facilisis sit amet, mattis quis metus. Vestibulum sed sem a lorem commodo aliquet. Ut placerat orci nec magna fringilla euismod rutrum magna vehicula. Donec adipiscing massa sit amet purus posuere eu consectetur tortor pretium.

 

DIV-box med 6 kolumner:

CSS-formaterade boxar (layer eller DIV) kan användas för att dela upp en text i kolumner. Den här boxen är formaterad med classen som ingår i CSS-mallen och skapar en box med bredd 100%:

 <div class="kolumn_6">
Innehållet här...

</div>

Om du vill att texten ska vara fullt justerad, dvs rak i både höger- och vänsterkant kan du ange en egen STYLE:

 <div class="kolumn_6" style="text-align: justify;">
Innehållet här...

</div>

Välj att visa källkoden (View/Source code) ELLER knappen "WYSIWYG Dölj" och infoga koden för att skapa en DIV.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra, ligula in ullamcorper pulvinar, elit libero porta orci, nec tinci

dunt diam ante in leo. Nullam at lectus quam, vel molestie massa. Nunc dapibus tincidunt odio eget pulvinar. Nunc tempor eros sit amet erat feugiat sed lacinia dui interdum. Suspendisse eget consectetur lacus.

Suspendisse faucibus est id augue varius sodales. Suspendisse dignissim mi sed augue vestibulum et tincidunt enim pellentesque. Aenean convallis pellentesque ornare. In hac habitasse platea dictumst. Praesent luctus lectus quis tortor faucibus aliquam. Nulla facilisi. In nisl metus, vulputate ac consequat nec, pharetra nec ligula.

Class aptent
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi orci dolor, condimentum in vehicula rhoncus, tincidunt a magna. Fusce imperdiet malesuada accumsan. Duis blandit orci eu nibh vehicula elementum. Nam sem mauris, mollis et ullamcorper sit amet, venenatis id urna. Nulla quis turpis sit amet justo adipiscing viverra vitae non dui. Nulla sodales sodales sem a ornare. Nulla euismod dignissim erat, a aliquet dui hendrerit in. Cras vitae eros pulvinar mi feugiat tincidunt et at nisl. Donec ac tortor vitae metus tempor lacinia. Phasellus scelerisque pretium ligula consequat vehicula. Integer eros diam, mattis sed elementum vel, pretium ac orci.

Etiam ac neque dui. Nullam fringilla, sem sed pretium consequat, nibh nisl semper ipsum, nec ornare felis turpis vitae mauris. Proin ut felis quis metus aliquet feugiat. Nunc condimentum volutpat interdum. Etiam lobortis molestie ante vel pellentesque. Nulla lacinia ligula nec ligula bibendum eu vehicula arcu malesuada. Fusce id consectetur lacus. Aliquam rutrum sem in justo rhoncus hendrerit vitae sed odio. Cras in dui euismod erat imperdiet molestie ut a sapien. Donec suscipit, purus ut semper ultrices, sem urna ultricies magna, a sollicitudin felis diam at augue. Fusce dolor leo, molestie interdum facilisis sit amet, mattis quis metus. Vestibulum sed sem a lorem commodo aliquet. Ut placerat orci nec magna fringilla euismod rutrum magna vehicula. Donec adipiscing massa sit amet purus posuere eu consectetur tortor pretium.

 

 

Adress

Företaget AB

Lugna gatan 123

123 45 SMÅSTAD

Kontakt

Tel: 012-345678

info@foretaget.se