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
-
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Dostali jste k vánocům PC? Využijte jeho AI potenciál!
3. ledna 2025 -
Nejnovější
-
Umělá inteligence: Co je to GPT?
12. května 2025 -
VMC rapidně zvýšil open rate e-mailových kampaní ZONERu
9. května 2025 -
Nenechte se zaskočit TLS certifikáty na 47 dní
2. května 2025 -
Zrychlete svůj web s LiteSpeed a CZECHIA.COM
29. dubna 2025