Dvousloupcový layout s hlavičkou, patičkou a pevnou šířkou

V HTML souboru je třeba stránku uzavřít doo jednoho elementu (napříklada class stránka) a jednotlivá části také označit. V tomto případě to jsou třídy: hlavicka, obsah, levy, pravy, paticka,

soubor: layout2.html

<div class="stranka">
  <div id="hlavicka">Horní lišta</div>
  <div class="obsah">
    <div id="levy">levý panel</div>
    <div id="pravy">pravý panel</div>
  </div>
  <div id="patička">Dolní lišta</div>
</div>


Stěžejní je pak soubor CSS stylů, který vše naformátuje

soubor: layout1.css

body {
margin: 10px;
padding: 0px;
text-align:center; /* textový obsah bude vycentrován*/
}

.stranka{
margin-left: auto; /*zajistí vystředění stránky, ale musí být HTML hlavička strikt, tedy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> */
margin-right:auto;
border: solid 1px black; /*orámuje celou stránku*/
width: 700px; /*nastaví pevnou šířku stránky*/
background-color: #ffcc99; /*pozadí stránky - prosvítá v mezerách mezi bloky*/
}
#obsah{
margin-top: 5px; /*Nastaví mezeru před obsahem - pod horní lištou*/
}

#hlavicka{
width: 700px;
height: 40px;
margin-top: 5px;
background-color: #dfdfdf;
vertical-align: bottom;
}

#levy {
float: left;
width: 150px;
height: 400px;
background-color: lightblue;
margin-bottom: 5px;
}

#pravy{
float: right;
width: 545px;
height: 400px;
background-color: lightgreen;
margin-bottom: 5px;
}

#paticka{width: 700px;
height: 40px;
margin-top: 5px;
background-color: #dfdfdf;
clear: both;}

Výsledná stránka

Naposledy změněno: Středa, 3. prosince 2014, 15.28