1. Een tabel-oplossing
Ja, met een tabel kan het min of meer. Het is weliswaar niet zoals het hoort (
"gebruik geen tabellen voor de opmaak!" Webrichtlijn R-pd.11.1), maar het kan wel: voor schermweergave. *)
Nadeel is dat in feite één link wordt uitgesmeerd over twee tabelcellen, die elk dezelfde link moeten bevatten, bv.:
HTML:
<tr>
<td><a href="index.html">H</a></td>
<td><a href="index.html">ome</a></td>
<tr>
Hiermee staat het woord "Home" niet als een echt woord in de html, wat bv. Google niet zo zal waarderen. De Google-bot ziet hetzelfde als een pure tekst-browser (die het ook niet zal waarderen!):
En een voorlees-browser gaat proberen dit voor te lezen:
Dus o.a. een link naar "ome" en een link naar "auto's" (want zo zal de voorlezer de "oto's" uitspreken).
- Nu kan je wel de hoofdletters er ook als hidden text bij zetten in de tweede cel, maar de dubbele links blijven altijd.
Dit is dan meteen een mooie illustratie waarom die Webrichtlijnen-richtlijn er is! Dus de tabel-oplossing is het niet.
==========
2. Een css-oplossing
"Met css kan alles > dus dit moet ook kunnen".
Inderdaad; en het principe is eenvoudig:
HTML:
<ul id="menu">
<li><a href="index.html"> <span>H</span>ome</a></li>
<li><a href="info.htm"> <span>I</span>nfo</a></li>
<li><a href="fotos.htm"> <span>F</span>oto's</a></li>
<li><a href="contact.htm"><span>C</span>ontact</a></li>
</ul>
Hier zijn het wel hele woorden.
De <span> krijgt telkens dezelfde breedte (opgegeven in de
em-eenheid: afgestemd op de breedste hoofdletter).
Binnen de span kan de letter dan naar keuze links uitgelijnd, rechts uitgelijnd of gecentreerd worden. Gecentreerd lijkt me het mooiste, dan staat bv. de "I" niet zover van de "nfo" af.
In de praktijk is dit nogal lastig te realiseren: als je (a) de rechterkant van de hoofdletter-breedte altijd wilt laten samenvallen met de rechterkant van de groene background, plus (b) overeind wilt houden dat de opmaak in orde blijft als de lettergrootte door de bezoeker wordt opgeschaald (of verkleind), plus (c) een hover-variant wilt hebben, en (d) het ook nog cross-browser wilt laten werken (Internet Explorer ligt natuurlijk dwars).
Maar met extra drijfwerk (float's left), een extra <span> en flink wat gefiegel in margins en paddings met cijfers achter de komma kan het wel!
- Resultaat: hifc.htm
- Arial als proportioneel lettertype gebruikt, hoverbaar, valid xhtml1.0-strict, valid css2.1. **)
- Getest in Firefox, Chrome, Opera, Safari en IE7.
- Volgens Netrenderer.com kunnen IE8 en IE9 er ook mee overweg.
- Voor de fijnregeling in de css (en een extra span in de html): zie broncode!
==========
3. Een image-oplossing
Dat kan natuurlijk altijd ook nog: de tekst als image-link produceren (met een title en hidden tekst erbij voor Google en de toegankelijkheid).
Dan is het ongevoelig voor lettergrootte-opschaling, staat exact op de goede plek, en ook een (css-) hover-variant is mogelijk.
Dat is waarschijnlijk de makkelijkste oplossing (met als nadeel: bij veranderingen in het menu moet opnieuw getekend worden).
Met vriendelijke groet,
CSShunter
____________
*) Onuitgewerkt voorbeeld met tabel-opmaak:
hifc-table.htm.
**) NB: De css-validator heeft op het moment een lekje, waardoor de
sans-serif in de font-family niet opgemerkt wordt!
