nicht angemeldet
Hallo,
Ich habe ein horizontales Menu, etwa so:
Menuepunkt1 Menuepunkt2 Menuepunkt3 [...]
Zwischen den Punkten (Links) sollte ein Trennzeichen stehen.
Fuer die Blinden, denen Webseiten vorgelesen werden.
Steht AFAIK irgendwo in den WCAG-Richtlinien
http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html
(Du kannst es auch mit CSS wieder unsichtbar machen.)
nur der IE interpretiert die padding Anweisungen nicht
^^^^^^ welcher?
Ich vermute, der Fehler liegt an meiner fehlenden Kenntniss bezüglich sauberen CSS Codes, so ist mir noch unklar, wann ich das "div" Tag nehmen soll und wann das "span". Dies ist in etwa die CSS Formatierung:
War das nicht Dein Thread weiter unten, wo display:block und
display:inline-block vorgeschlagen wurden, damit das Bildchen
vor den Links als Hintergrundbild eingebaut werden konnte?
Das waere auch hier ein Loesungsansatz.
.mainmenu {
font-size: 13px;
line-height: 18px;
background: #aaaaaa;
color: #ffffff;
padding-left:10px;
padding-right:15px;
}
Versuch mal, auch noch eine width-Angabe zu machen.
Du weisst ja, wie lang die Links sind (in Anzahl Buchstaben),
also gib die Width-Angabe in em an.
(z.B. bei max. 15 Buchstaben => width:12em; oder so...)
<div class="mainmenu">
<a class="mainmenuhi" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
<a class="mainmenulo" href="#">Menuepunkt1</a>
</div>
Es ist ueberfluessig, jedem einzelnen Link eine Klasse zu geben.
Nimm fuer die haeufigere Variante einen Verschachtelungs-Selektor:
div.mainmenu a { }
Fuer die Ausnahme kannst Du immer noch eine Klasse machen:
div.mainmenu a.hi { }
Dann wird der HTML-Quelltext gleich uebersichtlicher.
Mit dem Trennzeichen sieht es dann so aus:
<div class="mainmenu">
<a class="hi" href="#">Menuepunkt1</a>
<span class="linktrenner">|</span>
<a href="#">Menuepunkt1</a>
<span class="linktrenner">|</span>
<a href="#">Menuepunkt2</a>
<span class="linktrenner">|</span>
<a href="#">Menuepunkt3</a>
</div>
Das Trennzeichen kannst Du auf zwei Arten unsichtbar machen:
1. Variante:
@media screen
{
.linktrenner {display:none;}
}
2. Variante:
indem Du ihm die gleiche Vorder- und Hintergrundfarbe gibst:
.linktrenner { background-color: #aaaaaa; color:#aaaaaa; }
Dann kannst Du es gleich noch fuer Deinen Wunsch-Abstand brauchen:
.linktrenner { background-color: #aaaaaa; color:#aaaaaa;
border-left:2em #aaaaaa; }
Variante 1 ist theoretisch besser, aber offenbar lesen manche
Blinden-Browser es dann auch nicht vor (obwohl das Medium Screen
sie IMHO eigentlich nichts angeht).
Variante 2 ist wohl praktisch besser, bringt aber eine Warnung
des CSS-Validators ein (gleiche Farben).
Gruesse,
Thomas