Den enkleste måde, hvorpå vi kan lave en menu er at stille linksene op oven på hinanden, som vist i kildekoden herunder:
<p id="menu1"> <a href="/">Forsiden</a> <a href="/gen/">Generelt/servicesider</a> <a href="/design/">Design</a> <a href="/css/">CSS (Stylesheets)</a> <a href="/javascript/">JavaScript</a> <a href="/navigation/">Navigation</a> <a href="/dhtml/">Dynamisk HTML</a> </p>
Præsenteret på websiden ser denne menu således ud:
Grunden til, at linksene her står oven på hinanden er en enkel formregel:
p#menu1 a {display:block;}
Dette er tilstrækkeligt til at sikre, at alle a-markører, der
befinder sig i et tekstafsnit med en id="menu", opfører sig
som blokmarkører snarere end som inline markører.
Forskellen er, at en blokmarkør indsætter et linieskift efter sig.
Desuden skal en blokmarkør gå fra kant til kant af det overordnede element, her et div-element der omsluter hele artiklen, og som har en bredde, der øjensynligt er mindre end browservinduets bredde.
Klare eksempler på blokmarkører på denne side er p-markøren, der
omslutter tekstafsnittene og pre-markøren, der omslutter
kodeeksemplerne.
Den praktiske betydning af dette er, at hvert link skal være aktivt i hele bredden af det element, der omslutter artiklen. Det er imidlertid ikke tilfældet i Internet Explorer. Ønsker du dette, er du nødt til at sætte en eksplicit bredde på a-markøren, således:
p#menu1 a {display:block;}
* html p#menu1 a {width:100%;}
Stjerne-hack'et sikrer, at kun IE læser den sidste linie. Om dette hack kan du læse mere i sektionen om CSS hacks
Webdesign - illustreret håndbog
Webdesign med XHTML
– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S