Třísloupcový layout – svatý grál

28. února 2007

Tato verze třísloupcového layoutu si vzala to nejlepší z ostatních technik tvorby třísloupcových layoutů. Nejdůležitější přednost tohoto řešení spočívá v tom, že hlavní panel je v kódu dříve než levý a pravý panel, což ocení především příznivci SEO – obsah stránky (text stránky) je v kódu umístěn hned na začátku souboru.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Matthew Levine. Bližší popis najdete v článku In Search of the Holy Grail.

Po vydání původního článku se objevila řada různých problémů s některými prohlížeči, především IE7. Zde uváděné řešení se je snaží reflektovat. Více informací najdete například v článcích Holy Grail on A List Apart, The Case of the Disappearing Column a The Holy Grail CSS Layout Fix for IE7.

CSS

body
{
  min-width: 630px; /* 2 x (LC plna-sirka + CC padding) + RC plna-sirka */
}
#container
{
  padding-left: 200px; /* LC plna-sirka */
  padding-right: 190px; /* RC plna-sirka + CC padding */
  position: relative; /* Resi „nekonecnou“ stranku v IE7 */
}
#container .column
{
  position: relative;
  float: left;
}
#center
{
  padding: 10px 20px; /* CC padding */
  width: 100%;
}
#left
{
  width: 180px; /* LC width */
  padding: 0 10px; /* LC padding */
  right: 240px; /* LC plna-sirka + CC padding */
  margin-left: -100%;
}
#right
{
  width: 130px; /* RC width */
  padding: 0 10px; /* RC padding */
  margin-right: -100%;
}
#paticka-uvnitr
{
  clear: both;
}
/*** oprava pro IE ***/
* html #left
{
  left: 150px; /* RC plna-sirka */
}
/*** Stejna vyska sloupcu ***/
#container
{
  overflow: hidden;
}
#container .column
{
  padding-bottom: 1001em; /* X + padding-bottom */
  margin-bottom: -1000em; /* X */
}
/*** oprava paticky ***/
* html body
{
  overflow: hidden;
}
* html #paticka
{
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #FFF; /*** Stejne jako u body ***/
}
/*** Jen pro vzhled ***/
body
{
  margin: 0;
  padding: 0;
  background: #FFF;
}
#hlavicka, #paticka-uvnitr
{
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background: #999;
}
#left
{
  background: #66F;
}
#center
{
  background: #DDD;
}
#right
{
  background: #F66;
}
#container .column
{
  padding-top: 1em;
  text-align: justify;
}

XHTML

<html>
  <head>
    <title>Třísloupocový layout – svatý grál — Interval.cz</title>
  </head>
  <body>
    <div id=“hlavicka“>Toto je hlavička stránky.</div>
    <div id=“container“>
      <div id=“center“ class=“column“>
        <h1>Toto je hlavní panel</h1>
        <p>Lorem ipsum… </p>
      </div>
      <div id=“left“ class=“column“>
        <h2>Toto je levý panel</h2>
        <p>Lorem ipsum… </p>
      </div>
      <div id=“right“ class=“column“>
        <h2>Toto je pravý panel</h2>
        <p>Lorem ipsum… </p>
      </div>
    </div>
    <div id=“paticka“>
      <div id=“paticka-uvnitr“>Toto je patička stránky.</div>
    </div>
  </body>
</html>

Mohlo by vás také zajímat

Nejnovější

7 komentářů

  1. Svety

    Úno 15, 2010 v 11:30

    Uměl by někdo tento layout upravit i pro Explorer 8? To co s tím provedl je poněkud šílené.

    Odpovědět
  2. Miroslav Kučera

    Úno 15, 2010 v 11:32

    V IE8 mi to funguje uplne stejne jako ve firefoxu 3.5.7 – tj. zadny problem

    Odpovědět
  3. Murděj

    Čvc 7, 2010 v 7:52

    Jen par drobnosti:
    – pokud je v prostredni sloupci treba obrázek kvůli kterému se celá stránka nevleze na monitor tak se obrázek ořízne
    – odkazy s kotvou #neco posunou obsah sloupce a ne celou stránku
    jinak v pohode

    Odpovědět
  4. Citac

    Zář 8, 2010 v 14:52

    Tak mě tento layout taky nejde v IE 8

    Odpovědět
  5. Citac

    Zář 8, 2010 v 14:57

    beru z5.. funguje

    Odpovědět
  6. Pavero

    Čvc 8, 2012 v 21:19

    Hlavní nedostatek vidím v omezení funkčnosti na výšku hlavního bloku na 1000em. Tato hodnota jde sice libovolně zvyšovat, ale pro IE7, jak jsem si ověřil, je maximem -32768px, pak už dejde k přetečení.

    padding-bottom: 1001em;
    margin-bottom: -1000em;

    Odpovědět
  7. jakub

    Říj 7, 2012 v 23:17

    zdravim, chtel bych se zeptat jestli by slo nejak uzamcit bocni panely,aby se pri mensim rozliseni stredni panel nezakryval bocnima.diky

    Odpovědět

Napsat komentář: Svety Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *