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
-
Netcat a Ncat
8. prosince 2022 -
Umělá inteligence v IT
27. září 2023 -
Responzivní design: Proč by ho neměl ignorovat žádný vývojář?
27. listopadu 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