Struktura zdrojového textu této stránky je poměrně jednoduchá. Celé tělo je
ve skutečnosti rozděleno do dvou prvků <div>. První z nich
obsahuje menu, druhý pak její vlastní obsah. Jsou rozlišeny patřičnými
identifikátory. Čili kostra stránky vypadá takto:
<div id="menu"> <a href="p-float3.html">raz</a> ... </div> <div id="text"> <h1>Menu pomocí obtékání</h1> ... </div>
Menu umístíme doleva tak, že je necháme obtékat. Odpovídající část stylové
definice pro prvek s identifikátorem menu vypadá:
#menu {
float: left;
width: 10em;
...
}
My ale ve skutečnosti nechceme, aby bylo menu obtékáno. Proto nastavíme hlavnímu bloku natolik široký levý okraj, aby se do něj celý blok obsahující menu vešel a tím pádem nebyl rozdíl mezi řádky vedle menu a těmi ostatními. Jelikož je menu široké 10em, použijeme okraj o šířce 11em:
#text { margin-left: 11em; }
A to je vše.
Pokud bychom chtěli mít prvky ve zdrojovém kódu obráceně, lze to zařídit
analogicky. Pro uživatele textových klientů totiž může být frustrující číst na
začátku každé stránky znovu a znovu menu. Pro ně by mohlo být výhodné pořadí
prvků menu a text obrátit – nejprve uvést
vlastní text a až po něm menu. V takovém případě necháte obtékat text (pomocí
float: right) a omezením jeho šířky (tentokrát nelze použít
okraj, obtéká se i kolem okraje) nechat místo pro menu, které se díky obtékání
přesune tak, aby začínalo stejně s textem.
zpět: CSS – obtékání