Preprosti, raztegljivi stolpci v CSS

August 1st, 2010 by Krof Drakula Leave a reply »
Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2257 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3206 Warning: implode(): Argument must be an array in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3258 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3289 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3289 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3332 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3332 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3477 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3477 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2257 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3206 Warning: implode(): Argument must be an array in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3258 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3289 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3289 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3332 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3332 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3477 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3477 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2257 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3206 Warning: implode(): Argument must be an array in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3258 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3289 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3289 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3332 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3332 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3477 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3477 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2257 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3206 Warning: implode(): Argument must be an array in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3258 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3289 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3289 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3332 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3332 Warning: array_keys() expects parameter 1 to be array, null given in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3477 Warning: Invalid argument supplied for foreach() in /var/www/sopca.com/web/wp/wp-content/plugins/wp-syntax/geshi/geshi.php on line 3477

Če ste kdaj želeli implementirati obliko strani, katere stolpci bi se raztegovali proporcionalno glede na širino strani, ste verjetno velikokrat naleteli na težave, kako pravilno raztegniti širine, razmake in velikosti črk. V tem članku si bomo ogledali, kako lahko uporabimo relativne dolžine za oblikovanje vsebin, ki se prilagajajo dimenzijam brskalnika.

Začnimo s klasično obliko strani – ta vsebuje glavo, stransko navigacijo in tri glavne vsebinske stolpce:

Oblika strani

Za začetek bomo začeli kar s fiksno obliko strani, ki jo bomo postopoma spreminjali v raztegljivo obliko. Odločimo se, da bo širina strani 960px, širina stranske navigacije (oranžno področje) 180px, posamezen stolpec (modra področja) pa bo širok 240px z 20px razmika med stolpci. Najprej sestavimo HTML strukturo:

<body>
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
</body>

Ker trenutno nimamo vsebine, nastavimo višino vseh div elementov na 200px in pripravimo osnovna CSS pravila za stolpce:

div { min-height: 200px; }
body { width: 960px; margin: 20px auto; }
.header { margin-bottom: 20px; background: green; }
.sidebar { width: 180px; float: right; background: orange; }
.content { width: 760px; float: left; overflow: hidden; }
.content .column {
  width: 240px; float: left; margin-left: 20px;
  background: blue;
}
.content .column:first-child { margin-left: 0; }

Oglejmo si torej glavne točke teh CSS pravil:

  • na body smo nastavili fiksno širino in ga centrirali s pomočjo margin lastnosti (prva vrednost ponazarja odmik zgoraj in spodaj, druga vrednost odmik levo in desno),
  • div.sidebar smo odmaknili na desno in ga fiksirali na 180px,
  • div.content smo odmaknili na levo in ga fiksirali na 760px, hkrati pa smo mu določili overflow: hidden, kar samodejno raztegne višino div.content brez možnosti prikazovanja drsnikov (več o raztegovanju vsebovalnih elementov si lahko preberete tukaj)
  • vsakemu stolpcu smo nastavili fiksno širino, ga odmaknili na levo in mu dali 20px levega odmika
  • prvemu stolpcu smo s pomočjo :first-child psevdoselektorja odstranili levi odmik
  • Rezultat si lahko pogledate tukaj.

    Sedaj moramo pretvoriti vse širine elementov v relativne dolžine, pred tem pa se moramo odločiti, ali bo imela stran neko maksimalno širino, ki jo bo omejevala pri raztegovanju na večjih zaslonih, ali pa pač dopustimo raztegovanje po celotni širini zaslona. V tem primeru sem se odločil, da bo imela stran maksimalno širino 960px. Sedaj preračunamo dolžine v procente glede na dano širino in dodamo max-width lastnost na body element:

    div { min-height: 200px; }
    body { max-width: 960px; margin: 20px auto; }
    .header {
      margin-bottom: 2.083333333333%; /* 20px : 960px */
      background: green;
    }
    .sidebar {
      width: 18.75%; /* 180px : 960px */
      float: right; background: orange; }
    .content {
      width: 79.1666666667%; /* 760px : 960px */
      float: left; overflow: hidden; }
    .content .column {
      width: 31.57894737%; /* 240px : 760px */
      margin-left: 2.63157895%; /* 20px : 760px */
      float: left; background: blue;
    }
    .content .column:first-child { margin-left: 0; }

    Rezultat si lahko ogledate tukaj. Če sedaj brskalnik zmanjšamo po širini (ali pa nastavimo drugačno širino za body element), se bodo stolpci samodejno in sorazmerno prilagodili glede na razpoložljivi prostor.

    Kaj pa, ko so stolpci enostavno preozki za prikazovanje vsebine? V tem primeru lahko posežemo po t.i. media queries – direktive v CSS, ki se izvajajo pogojno glede na določene spremenljivke.

    Naj opozorim, da so media query ukazi podprti v praktično vseh brskalnikih, vključno z mobilnimi in še posebej dobro podprti na iPhone napravah; za IE pa je trenutno potrebno uporabiti pomožno knjižnico, kot je npr. css3-mediaqueries-js.

    Odločimo se, da je pod širino 400px naša stran neberljiva, zato se odločimo, da v tem primeru ne bomo prikazovali stolpcev vzporedno, ampak jih bomo prikazali enega za drugim. Zato uporabili to absolutno širino v @media ukazu:

    @media screen and (max-width: 400px) {
      .sidebar, .content, .content .column {
        float: none; display: block; width: auto;
        margin-bottom: 20px;
      }
      .content .column { margin-left: 0 }
      .header { margin-bottom: 20px; }
    }

    Ko sedaj skrčimo širino brskalnika na manj kot 400px, se bodo stolpci pretvorili v navadne linearne elemente. Ne verjamete? Poglejte rezultat.

    S tem smo tudi zagotovili, da bo stran berljiva na praktično vseh mobilnih napravah (sam testiram na dveh različnih WebKit brskalnikih, opisana metoda pa deluje tudi na vseh Apple iOS napravah) brez posebnih filtrov in adapterjev, ki bi posebej za te naprave prirejali vsebino.

    Na koncu je pa vredno omeniti, da sem pri pripravi CSS ignoriral Internet Explorer 6. Če vam je kompatibilnost s tem antičnim brskalnikom pomembna, lahko dodate naslednji blok kode v head strani, da se izognete IE6-specifičnim napakam:

    <!--[if lte IE 6]>
      <style type="text/css">
        .sidebar, .content, .content .column {
          display: inline; /* double margin bug */
        }
        body {
          width: expression(this.width>960 ? 960 : "auto");
          /* max-width: 960px */
        }
      </style>
    <![endif]-->

    Prvo pravilo izniči t.i. float double margin bug, drugo pravilo pa uporablja IE CSS expression, s katerim v Javascript jeziku implementiramo max-width lastnost. Postopek je podrobneje opisan tukaj.

    Toliko o tem za ta članek. V bližnji prihodnosti pa bomo kako rekli še o prilagodljivi tipografiji. ;)

    Vprašanja in komentarji dobrodošli.

    Advertisement