_

V prvním dílu svého návodu na vytvoření layoutu za použití kaskádových stylů jsem vás nabádal, abyste nepoužívali tabulky, ale divy. V dnešním článku vám pro změnu ukážu, že to jde i bez nich. "Bezdivový" je ale přecijen trochu nadsazený pojem, jeden div použijeme %1 Rozvržení stránky v CSS namísto v tabulkách už by dnes měla být samozřejmost, a já vám popíšu základy tvorby layoutu s minimálním použitím divů. Div je ze sémantického hlediska zbytečný; nic nedělá. A HTML je jazyk bohatý, tudíž můžeme využít spoustu jiných značek pro rozvržení stránky.

Nejdříve si vytvoříme základní kostru dokumentu, kterou budeme v zápětí stylovat:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs"> 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./styles.css" />
  <title>Bezdivový lay-out</title>
</head>
<body>

<h1><a href="./index.html"><span>Bezdivový lay-out</span></a></h1>

<div id="obsah">
  <h2>Nadpis</h2>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<ul id="sidebar">
  <li class="side">...</li>
</ul>

<p id="footer">...</p>

</body>
</html>

Jak už napovídá struktura stránky, řešení je jednoduché. Ale účelem tohoto článku není jen pouhý návod, ale spíš takové nabádání k sémantickému kódu. Pojmy sémantika a přirozená SEO optimalizace zde vysvětlovat nebudu, vezmu to jen z hlediska (X)HTML / CSS.

Styly tedy opět začneme resety, popsanými v předchozím dílu:

/* --- resety --- */
* {
  border: 0;
  margin: 0;
  padding: 0;
  text-indent: 0;
  }
  
a img { border: 0; }

Nyní vše, co jsme definovali pro body definujeme přímo pro html a všechny atributy hlavního divu pro body:

/* --- rozvržení stránky --- */
html {
  background: #e5e5e5;
  color: #333;
  font: normal normal normal 70%/1.7 Tahoma, arial, verdana, sans-serif; 
  text-align: center;
  }
  
body, #body {
  background: #fafafa;
  border: 1px solid #333;
  margin: 20px auto; /* horní+spodní pravý+levý */
  text-align: left;
  width: 700px;
  }

Pokračujme dále. Definováním atributů pro body jsme ušetřili jeden hlavní div. Identifikátor #body vysvětlím záhy. Pro hlavičku efektivně využijeme nadpis nejvyšší úrovně, ať již pouze textový, či grafický s textem schovaným. O další zbytečný div méně:

h1 {
  border-bottom: 1px solid #333;
  font-size: 200%;
  font-weight: normal;
  line-height: 130px; /* vertikálně vycentrujeme */
  text-align: center;
  }
  
h1 a {
  color: #008000;
  text-decoration: none;
  }
  
h1 a:hover {
  text-decoration: none;
  }

Celý header bude <h1>. Pro klikací hlavičku nastavíme spanu display: none; a z
h1 a {} uděláme blok stejné velký, jako celý h1, s obrázkem na backgroundu. Složitější řešení textu schovaného pod obrázkem zde rozebírat nebudu, ti zvědavější z vás se mohou podívat ke mě do stylů %5. Nyní už ke zmíněným dvěma sloupcům: pro obsah použijeme jediný div našeho layoutu, pro navigaci strukturu vnořených seznamů. Abychom docílili správného umístění obsahu před navigaci (myšleno v kódu), oba bloky umístíme na stránku atributem float :

#obsah {
  float: left;
  margin: 0.5em 0 1em 10px;
  width: 480px;
  }
  
#sidebar {
  float: right;
  list-style: none;
  margin: 0.5em 0 1em 0;
  width: 190px;
  }

Právě kvůli "floatování" musíme uvést pevné rozměry, proto si trochu započítáme: 700 pixelů hlavní šířka, 190 si rezervujeme pro sidebar. 10 + 10px odsazení obsahu zleva a zprava, 10px rezerva kvůli odlišné interpretaci box-modelu u IE. Zbývá 480, stránka se zobrazuje identicky v Opeře, Firefoxu, IE6 a IE7.

#obsahem se dále zabývat nemusíme, nyní už vyřešíme pouze navigaci a patičku stránky. Pro navigaci využijeme výše zmíněnou strukturu vnořených seznamů, žádný div ani tabulku potřebovat nebudeme. Každému li první úrovně přidáme třídu. Jelikož zde už nedefinujeme žádné pevné rozměry, můžeme libovolně "sázet" marginy a paddingy:

/* --- CSS --- */
#sidebar li.side {
  padding-right: 10px; /* odsazení zprava */
  }
  
#sidebar li.side ul {
  list-style: circle;
  margin: 0.5em 0;
  padding-left: 20px; /* pouze kvůli vlastnosti list-style */
  }
<-- (X)HTML -->
<ul id="sidebar">

  <li class="side">
    <h3>Navigace</h3>
    <ul>
      <li><a href="#">Úvod</a></li>
      <li><a href="#">Stránka</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </li>

</ul>

Oba bloky jsou na sobě nezávislé, stránka se vždy natáhne podle delšího z nich. Na konec vložíme patičku, pro kterou namísto divu poslouží prostý odstavec. V patičce resetujeme obtékání, aby se nám zařadila pod oba objekty:

#footer {
  border-top: 1px solid #333;
  clear: both;
  text-align: center;
  }

Základ layoutu je nyní hotový, můžete si ho prohlédnout, či stáhnout:

Troška PHP na konec

Popsaný lay-out bohužel není ošetřený pro Internet Explorer 5, který nepobere pevné rozměry body. A jelikož si pracně vytvořený skoro-bezdivový lay-out nechceme zapatlat podmínkami v HTML, využijeme PHP. A právě zde nám poslouží identifikátor #body. Následující funkce vytiskne argument, pokud se návštěvník dívá na stránku v MSIE 5:

function msie5_sucks($arg) {
    if (ereg("MSIE[[:blank:]]5", $_SERVER['HTTP_USER_AGENT']))
        echo $arg; 
}

Funkci zavoláme

msie5_sucks("<div style='text-align:center'> <div id='body'>"); # na začátku stránky

msie5_sucks("</div> </div>"); # na konci stránky

a zde je výsledek: index.php