MENU

<ul> ... </ul>

Neuspořádané seznamy se používají:

  • pro přehledné zobrazení nějakých položek, ve kterých nezáleží na pořadí, vizuálně se projevují tak, jak vidíte zde (někdy začínají kolečkem, zde je to upraveno v CSS),
  • také pro vytváření menu, protože menu je fakticky seznam odkazů. 

"Bráškou" neuspořádaného seznamu je uspořádaný seznam <ol>. Ten se používá v obdobných případech, ale rozdíl je v tom, že u nich záleží na pořadí. Jednotlivé položky uvnitř značek <ul> a <ol> se označjí pomocí značek <li>, více zde.

Příklad použití neuspořádaného seznamu

Použití je vcelku snadné. Stačí vytvořit otevírací značku, zavírací značku a mezi ně vkládat libovolné množství položek seznamu. Zde máte grafické znázornění zápisu:

 Ukázka použití <ul> v HTML

<ul>
<li>obsah první položky seznamu</li>
<li>obsah druhé položky seznamu</li>
</ul>

Do otevírací značky <ul> můžete zadat některý z tvarů předdefinovaných v HTML, a to:

  1. type="disc" – puntík
  2. type="square" – čtvereček
  3. type="circle" – kolečko

POZOR! Tyto atributy jsou již zastaralé a v moderním HTML5 se již nemají používat, jinak byste porušovali pravidla a mělo by to negativní vliv na SEO.

Modernějším – a rozhodně užitečnějším – řešením je vzhled určovat pomocí CSS stylů. 

Jak pomocí CSS upravit vzhled neuspořádaného seznamu v HTML

V první řadě je třeba připomenout, že pravidla CSS mají být v externím souboru. Pro tag <ul> se nejčastěji používají následující vlastnosti CSS:

    1. list-style-type – jedná se o obdobu výše popsané zastaralé a zavržené metody. Používá pouze předdefinovaná slova:
      1. list-style-type: disc – plné kolečko 
      2. list-style-type: circle – prázdné kolečko
      3. list-style-type: square – čtvereček
      4. list-style-type: none – nezobrazí se žádný obrázek
    2. list-style-image – typ obrázku může být užitečný, ale pokud chcete použít nějaký jiný obrázek, než předdefinované, tak asi oceníte tuto vlastnost. Ukázka zápisu
      ul{list-style-image:url(../obrazky/obrazek.png)}

list-style-position

    – definuje dva možné způsoby chování, a to:
    1. list-style-position: outside –  je použit na této stránce, tedy nový řádek pod symbolem bude začínat na úrovni prvního řádku,
    2. list-style-position: inside – se bude na dalším řádku textu chovat tak, že druhý řádek bude začínat zarovnaný se značkou. 

Kam dál

Kurz základy HTML a CSS | Kurz tvorby webových stránek pomocí systému Joomla

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548