Turoriál: Ako vytvoriť viacstĺpcový layout - časť 1.

Turoriál: Ako vytvoriť viacstĺpcový layout

Vytvoríme si 2-stĺpcový layout webovej stránky. V praxi sa najčastejšie používajú dvoj a trojstĺpcové layouty. Viacstĺpcové nemá zmysel vytvárať. Text by v takých stĺpcoch bol úzky a zle čitateľný. Mohol by nastať problém aj so zobrazovaním obrázkov.
Postupujeme tak, že vytvoríme najprv jednostĺpcový layout, ako zdroj pre naplnenie textu použijeme lorem ipsum.
V zdrojovom kóde, ktorý nasleduje je textová časť skrátená, v príklade je ale potrebné použiť viacej textu, aby layout, ktorý navrhujeme vynikol. 

<body>
<section id="zahlavie">
	<h1>Novinky zo sveta webtutorials.sk</h1>
    <p>mesačník noviniek</p>
</section>
<section id="novinky">
	<article class="clanok">
    	<h2>Spustili sme novú stránku</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
        </p>
        <aside class="prispevok">
        	<h4>Celkom sa to rozbehlo</h4>
            <p>
            Duis felis metus, congue id laoreet non, .....
            </p>
        </aside>
        <p>
        Lorem ipsum dolor sit amet, consectetur ....
        </p>
    </article> 
	<article class="zaujimavosti">
    	<h2>Zaujimavosti zo sveta HTML5</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur . ...
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur  ...
        </p>
    </article> 
	<article class="aktuality">
    	<h2>Aktuálne používané elementy</h2>
       <p>
        Lorem ipsum dolor sit amet, consectetur  ...
        </p>
       <p>
        Lorem ipsum dolor sit amet, consectetur  ...
        </p>
    </article> 
</section>
<section id="zapatie">
	<h6>© 2015 - všetky práva vyhradené, kontaktujte nás na adrese: <a href="#">[webtutorials.sk]</a><h6>
</section>
</body>

Použiť jednostĺpcový layout je síce najjednoduchšia forma pri tvorbe webových stránok, ale pre šírku je čítanie textu neforemné. Pre vytvorenie layoutu sme použili tieto elementy:
<section></section> - logická sekcia - rozdeľuje jednotlivé časti webovej stránky
<p></p> - blok textu
<article></article> - element pre článok
<aside></aside> - postranný text, má menší význam ako text medzi elementmi <article></article>
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> - nadpisy

 Rozdelenie layoutu na dve časti - stĺpce:
Text vieme rozdeliť do dvoch stĺpcov pomocou štýlov v CSS šablóne a to napísaním týchto pravidiel:

#novinky {
       -moz-column-count: 2; /*určuje počet stĺpcov, na ktoré sa má element rozdeliť*/
       -webkit-column-count: 2;/*určuje počet stĺpcov, na ktoré sa má element rozdeliť*/
       -moz-column-gap: 20px; /*určuje medzeru medzi stĺpcami*/
       -webkit-column-gap: 20px;/*určuje medzeru medzi stĺpcami*/
       -moz-column-rule: 1px solid #ddccb5; /*čiara medzi stĺpcami (hrúbka,typ čiary,farba)*/
       -webkit-column-rule: 1px solid #ddccb5;/*čiara medzi stĺpcami (hrúbka,typ čiary,farba)*/  
}




Pridaním ďalších pravidiel do šablóny štýlov upravíme náš layout do výslednej - požadovanej podoby:

body { 
      line-height: 20px;
}
p,h2,h3,h4,h5,h6 {
                  margin: 0 0 20px 0;
}
#novinky, #zahlavie, #zapatie{
        width: 960px;
        margin: 0px auto;
        display:block;
}
#zahlavie {
        text-align: center; 
        border-bottom: 1px solid #ddccb5; 
        margin-bottom: 20px;
}     
#zapatie {
        text-align: center; 
        border-top: 1px solid #ddccb5; 
        margin-bottom: 20px;
}
.prispevok { 
       width: 200px;
       margin-left: 10px;
       padding: 4px;
       float: right;
       border: 1px solid #ddccb5;
}   
.prispevok:last-child {
                      margin-bottom: 0;
}



Toto riešenie má ale jednu nevýhodu. Nie je možné určiť každému stĺpcu rôznu šírku. Preto toto riešenie odporúčame používať pri návrhu layoutu pre zobrazovanie samotného obsahu webovej stránky ako sú texty a obrázky. Samotná tvar (layout kostry webovej stránky) sa rieši iným spôsobom. Ale o tom bude písať iný článok.
Núdzové riešenie:
Stĺpce vytvorené pomocou pravidiel CSS3 nebudú žiaľ fungovať v Internet Exploreru 8 a starších verzií. Aj na tento problém existuje riešenie - zásuvný modul jQuery, ktorý rozdelí obsah rovnomerne do stĺpcov:
$("#novinky").columnize({columns: 2 });
Celý skript, ktorý vložíme do hlavičky webovej stránky <head></head> vyzerá nasledovne:

    
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
    </script>
    
    <script charset="utf-8" src="javascript/autocolumn.js" type="text/javascript">
    </script>
    
    <script type="text/javascript">
      function suStlpcePodporovane(){
        var element = document.documentElement;
        var styl = element.style;
        if (styl){
          return typeof styl.columnCount == "string" ||
            typeof styl.MozColumnCount == "string" ||
            typeof styl.WebkitColumnCount == "string" ||
            typeof styl.KhtmlColumnCount == "string";
        }
        return null;
      }
      
      $(function(){
        if(!suStlpcePodporovane()){
         $("#novinky").columnize({ columns: 2 }); 
        }
      });      
    </script>

Aby skript správne fungoval, potrebujeme pomocou linku pripojiť knižnicu a zásuvný modul. Oba súbory nájdete v prílohe tohto článku.

Rubriky: