O webu
Vodorovné menu

Asi nejjednodušší možnost vytvoření navigace s odkazy vedle sebe je prosté naházení odkazů do <div>u.

To není úplně špatné:

  • jednotlivé odkazy můžeme (text-decoration: none),
  • nějak hezky (background: #fff),
  • přidat (padding: .3em),
  • nebo (text-align: center pro nadřazený element)

Jakmile ale bude potřeba měnit výšku nebo šířku jednotlivých odkazů, narazíme na problém, protože odkazy jsou řádkové. Naštěstí existují způsoby, jak dostat vedle sebe i bloky.

Inline-block

Přidáním display: inline-block pro získáme výhodu řádkových i blokových elementů najednou.

Vše bude fungovat jako dřív a navíc půjde . Bezproblémové je samozřejmost.

Obtékání

Druhá možnost je položky menu nechat obtékat. Nicméně nevidím důvod pro použití obtékání místo řešení s inline-block. Nenapadá mě žádná výhoda takového postupu.

Snad jen může být problém v mezerách mezi položkami, které vzniknou při inline-block řešení a umístěním každného odkazu v HTML kódu na zvláštní řádek. Řešením je umístit všechny odkazy ihned za sebe nebo odřádkování zakomentovat.

   <a href=#>Odkaz</a><!--
--><a href=#>Odkaz</a>

Nebo nakonec opravdu použít ten float.

  • Odkaz
  • Odkaz
  • Odkaz
  • Odkaz
  • Odkaz
  • Kromě nevýhody, že je nutné řešit clearování bude obtíženější obtékané menu vycentrovat.

    Sémantika

    Někdo by mohl namítat, že menu patří do značky <menu> nebo alespoň seznamu (<ul>) a odkazy do položek <li>. Osobně se domnívám, že takové strukturování prakticky nikdo neocení a je to jen práce navíc. Ale nic neřešitelného to také nepředstavuje.

    V podstatě stačí jen vynulovat margin a padding, odstranit odrážky (listy-style: none) a z položek udělat třeba řádkové elementy (display: inline).

  • Odkaz
  • Odkaz
  • Odkaz
  • Odkaz
  • Odkaz
  • Fixní menu

    Vodorovné menu není problém na stránce (position: fixed), může být samozřejmě i fixované jen někdy podobně jako boční panel.

    Vycentrování fixního menu lze zajistit přes left: 50%; margin-left: -(polovina šířky).