Úprava layoutu stránky stylovým předpisem

Nejprve interaktivní menu, jak jste viděli na obrázku v článku (bez client-side skriptu): [varianta 1]

a po přepnutí css předpisu, může vypadat takto: [varianta 2]

V článku jste viděli v obou dvou případech obrázek. Pokud se výsledek výše neblíží obrázku z článku, pracujete v prohlížeči, který kaskádové styly interpretuje jinak než IE 6.0. (nepokládejme to za chybu)

Definice CSS - varianta 1:

#jurecek_menu li {
  list-style-type: none;
}

#jurecek_menu ul .jurecek_bracket {
  display: none;
}

Definice CSS - varianta 2:

#jurecek_menu {
  font-size: 80% ;
}

#jurecek_menu ul li {
  display: inline;
}

#jurecek_menu img {
  display: none;
}

A kód menu vypadá následovně:

<div style="margin-left: 2em">
<ul id=jurecek_menu>
  <li><img src="item.gif"> <a href="#top">představení firmy</a>
  <ul>
    <li class=jurecek_bracket>(</li>
    <li><img src="item.gif"> <a href="#top">slovo ředitele</a>
    <li><img src="item.gif"> <a href="#top">výroční zpráva 2002</a>
    <li class=jurecek_bracket>)</li>
  </ul>

  <li><img src="item.gif"> <a href="#top">produkty</a></li>

  <li><img src="item.gif"> <a href="#top">kontakt</a></li>

  <ul>
    <li class=jurecek_bracket>(</li>
    <li><img src="item.gif"> <a href="#top">závod Opava</a>
    <li><img src="item.gif"> <a href="#top">závod Praha</a>
    <li><img src="item.gif"> <a href="#top">závod Prostějov</a>
    <li class=jurecek_bracket>)</li>
  </ul>
</ul>
</div>

Nakonec udržujeme právě jeden HTML kód a přepínáme CSS varianty.