Třísloupcový layout – svatý grál
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
-
-
Umělá inteligence v IT
27. září 2023 -
Zvýšení výkonu WiFi signálu: Jak a proč používat WiFi zesilovače
28. června 2023 -
Vaše pošta může být špatně nastavena – svěřte ji profesionálům
13. července 2023
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024
Svety
Úno 15, 2010 v 11:30Uměl by někdo tento layout upravit i pro Explorer 8? To co s tím provedl je poněkud šílené.
Miroslav Kučera
Úno 15, 2010 v 11:32V IE8 mi to funguje uplne stejne jako ve firefoxu 3.5.7 – tj. zadny problem
Murděj
Čvc 7, 2010 v 7:52Jen 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
Citac
Zář 8, 2010 v 14:52Tak mě tento layout taky nejde v IE 8
Citac
Zář 8, 2010 v 14:57beru z5.. funguje
Pavero
Čvc 8, 2012 v 21:19Hlavní 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;
jakub
Říj 7, 2012 v 23:17zdravim, chtel bych se zeptat jestli by slo nejak uzamcit bocni panely,aby se pri mensim rozliseni stredni panel nezakryval bocnima.diky