13. 9. 2004
Jednoduché menu v CSS
Před nějakým časem se stalo, že jsem potřeboval vytvořit na webu menu, které by vypadalo nějak takto. Říkám si: "žádnej problém - kraťoučký zápis HTML kódu, pár řádků css a je vystaráno." Zapsal jsem, v Mozille se pokochal výsledkem a předhodil majkrosoftímu prohlížeči. Následovalo samozřejmě zklamání (nekoukáte-li skrze exploréra, tak žádný problém neuvidíte) . "To přece není možný! Co dělá ten prázdnej prostor pod položkama?" pravím a hledám v css nějakou chybu. "Asi explorer potřebuje ještě u nějakýho elementu zrušit okraje nebo výplň" myslím si a zkouším a přepisuji, atd. Když jsem zjistil, že veškeré úpravy kaskádových stylů přinášejí pouze dílčí úspěchy u poslední verze exploreru, ale u 5.5 a níže jsem bez šance, šel jsem přímo do HTML kódu. Celé to vypadalo takto:
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />
<title>Menu</title>
<style>
<!--
body {
font: 0.8em sans-serif;
margin: 30px;
background: #004080;
}
h1 {
font-size: 120%;
color: #DBD8B7;
}
ul {
list-style: none;
width: 150px;
margin: 0;
padding: 1px 0;
font-weight: bold;
background: #A9B3DE;
}
li {
margin: 4px;
}
li a {
display: block;
padding: 5px;
color: white;
background: black;
}
li a:hover {
color: black;
background: white;
}
-->
</style>
</head>
<body>
<h1>Menu bez úpravy pro IE</h1>
<ul>
<li><a href="./">první položka</a></li>
<li><a href="./">druhá položka</a></li>
<li><a href="./">třetí položka</a></li>
<li><a href="./">čtvrtá položka</a></li>
<li><a href="./">pátá položka</a></li>
</ul>
</body>
Metodou pokus – omyl jsem nakonec dospěl k tvaru, se kterým sice nejsem dokonale spokojen (ze sémantického hlediska je tam jeden element zbytečný), ale který funguje zatím ve všem, čemu jsem to předhodil. Zakopaný pes vězel v tom, že jsem mezi odkazy a položky seznamu vložil jeden div, bez jakéhokoli stylování. Tedy menu změnilo svou podobu na toto:
<ul> <li><div><a href="./">první položka</a></div></li> <li><div><a href="./">druhá položka</a></div></li> <li><div><a href="./">třetí položka</a></div></li> <li><div><a href="./">čtvrtá položka</a></div></li> <li><div><a href="./">pátá položka</a></div></li> </ul>
No a to je tak asi vše. Pokud jsem náhodou "objevil" Ameriku a někde v internetové pavučině je již tento postup popsán nebo je zbytečný a lze vyřešit lépe, tak se omlouvám 
. Pokud to však někomu ušetří hodiny hloubání a testování a nadávání, tak jsem spokojen. Howgh.
předchozí: Utrpení z Novy
následující: Ochutnal jsem velký jabko
