Třísloupcový fixní layout se stejnou délkou panelů
Tento třísloupcový layout se zobrazuje ve všech prohlížečích stejně, jeho hlavní výhodou je, že znáte přesnou šírku a na základě toho můžete stanovit absolutně šířku elementů použitých v obsahu. V součastnosti je to jeden z nejpoužívanějších layoutů, většina kodérů již rezignovala na fluidní layouty díky množství problémů, které přinášely při dynamicky generovaném obsahu.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Petr Sládek. Bližší popis najdete v článku Perfect web µpage ;-).
CSS
body, html
{
border: 0px none;
margin: 0px;
padding: 0px;
font-family: „Trebuchet MS“, „Geneva CE“, lucida, sans-serif !important;
font-size: small !important;
}
.resetovac
{
border: 0px none;
margin: 0px;
padding: 0px;
float: none;
clear: both;
width: 0px;
height: 0px;
line-height: 0px;
font-size: 0px;
}
p, img, table, tr, th, td, h1, h2, h3, h4, h5
{
border: 0px none;
margin: 0px;
padding: 0px;
}
#bodyhlavicka
{
background-color: #ffffcc;
}
#bodypaticka
{
background-color: #ffffcc;
}
#strankahlavicka
{
background-color: #dddddd;
}
#strankapaticka
{
background-color: #dddddd;
}
#strankaobal
{
width: 900px;
margin: 0px auto 0px auto;
}
#strankaobal1
{
background: url(‚left.gif‘) top left repeat-y;
}
#strankaobal2
{
background: url(‚right.gif‘) top right repeat-y;
}
#levypanelobal
{
float: left;
width: 170px;
margin: 5px 0px 5px 5px;
padding: 2px 2px 2px 2px;
font-size: 90%;
}
#pravypanelobal
{
float: right;
width: 130px;
margin: 5px 5px 5px 0px;
padding: 2px 2px 2px 2px;
font-size: 85%;
}
#hlavnipanelobal
{
padding: 5px 150px 5px 190px;
}
#hlavnipanelhlavicka
{
background-color: #dddddd;
}
#hlavnipanelpaticka
{
background-color: #dddddd;
}
CSS pro MSIE
#levypanelobal
{
margin-left: 2px;
}
#pravypanelobal
{
margin-right: 2px;
}
XHTML
<html>
<body>
<div id=“strankaobal“>
<div id=“strankaobal1″>
<div id=“strankaobal2″>
<div id=“strankahlavicka“>
<h1>Hlavička</h1>
</div>
<div id=“strankavnitrek“>
<div id=“strankavnitrek2″>
<div id=“levypanelobal“>
<div id=“levypanelvnitrek“>
<h1>Levý panel</h1>
<hr />
<div>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</div>
</div>
<div id=“pravypanelobal“>
<div id=“pravypanelvnitrek“>
<h1>Pravý panel</h1>
<hr />
<div>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</div>
</div>
<div id=“hlavnipanelobal“>
<div id=“hlavnipanelvnitrek“>
<div id=“hlavnipanelhlavicka“>
<h1>Hlavička obsahu</h1>
</div>
<h1>Nadpis 1</h1>
<hr />
<div>
<p>Lorem ipsum dolor sit amet…</p>
</div>
<hr />
<div id=“hlavnipanelpaticka“>
<h1>Patička obsahu</h1>
</div>
</div>
</div>
<div class=“resetovac“> </div>
</div>
</div>
<div id=“strankapaticka“>
<h1>Patička stránky</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Vlastní web pomocí AI už může vytvořit opravdu každý
8. srpna 2024 -
Proč je důležité tvořit obsah na váš web?
29. srpna 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024
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