Supportnet / Forum / Webseiten/HTML
Formatierung (css) wird nicht angezeigt
Frage
Hallo,
ich habe doch noch ein Problem: Die Formatierung der Klasse "aktiverLink" wird nicht korrekt dargestellt. Laut css soll die Schrift dann fett und in weiss sein, doch sie wird fett und grau sichtbar.
Und schon wieder kann ich den Fehler nicht finden!!
Die Testseite ist zu finden unter:
[url]www.p-henning.de/test.html[/url]
Und was ich auch nicht verstehe ist die Tatsache, dass eine Änderung in [b]a:hover[/b] sich auch auf die Links im Menü auswirkt. Obwohl diese doch im [b]#menue a:hover[/b] formatiert werden.
Hoffe, dass auch diesmal mir jemand helfen kann ...
Gruss - Petra
Antwort 1 von Dixi*
Hi, im IE 5.5 wird der aktive Link korrekt in Weiss und fett dargestelt.
Antwort 2 von harrrharrr
Hallo, also im CSS wird aktiverLink dieser Wert zugewiesen::
font-family:Arial,Helvetica,Verdana,sans-serif;
color:#A80000;
das ist mehr rotbraun als weiss...
Gruß
harrr
font-family:Arial,Helvetica,Verdana,sans-serif;
color:#A80000;
das ist mehr rotbraun als weiss...
Gruß
harrr
Antwort 3 von rfb
Zitat:
Und was ich auch nicht verstehe ist die Tatsache, dass eine Änderung in a:hover sich auch auf die Links im Menü auswirkt. Obwohl diese doch im #menue a:hover formatiert werden.
Und was ich auch nicht verstehe ist die Tatsache, dass eine Änderung in a:hover sich auch auf die Links im Menü auswirkt. Obwohl diese doch im #menue a:hover formatiert werden.
a:hover gilt für alle Links auf der Seite, egal wo sie stehen. Was du bei #menue a:hover angibst gilt zusätzlich nur für die Links in #menue.
Antwort 4 von Petra65
@harrrharrr
die Farbe rotbraun hatte ich zu Testzwecken verwendet, ich wollte schauen ob sich da was tut!! Aber nein.
Ich habe den IE 6.0, und da sind die Links leider nicht weiss ;-(
die Farbe rotbraun hatte ich zu Testzwecken verwendet, ich wollte schauen ob sich da was tut!! Aber nein.
Ich habe den IE 6.0, und da sind die Links leider nicht weiss ;-(
Antwort 5 von rfb
Beachte vielelicht mal die sinnvolle Reihenfolge im CSS:
erst bei
PS: auch das CSS kannst du natürlich validieren lassen: Deine Seite beim CSS-Validator
Aber: Gratulation - es sind nur wenige Fehlerchen!
erst bei
a:link #menue a:link PS: auch das CSS kannst du natürlich validieren lassen: Deine Seite beim CSS-Validator
Aber: Gratulation - es sind nur wenige Fehlerchen!
Antwort 6 von Petra65
Habe beides validiert (css u. HTML) - ist nun beides fehlerfrei.
Außerdem habe ich die Reihenfolge im css geändert (finde ich jetzt allerdings nicht mehr so übersichtlich).
Doch leider ändert sich trotzdem nichts an dem Aussehen von .aktiverLink , dieser ist nach wie vor grau (habe zu testzwecken die Farbe rot angegeben).
Welche Ursache könnte sonst noch dafür verantwortlich sein????
Außerdem habe ich die Reihenfolge im css geändert (finde ich jetzt allerdings nicht mehr so übersichtlich).
Doch leider ändert sich trotzdem nichts an dem Aussehen von .aktiverLink , dieser ist nach wie vor grau (habe zu testzwecken die Farbe rot angegeben).
Welche Ursache könnte sonst noch dafür verantwortlich sein????
Antwort 7 von rfb
Ich habe langsam eine Ahnung.
Es gibt im CSS Regeln was die Browser machen sollen, wenn für ein Element verschiedene CSS-Anweisungen zutreffen. Dann soll diejenige mit der "höchsten Spezifität" genommen werden.
in diesem Fall ist am spezifischsten wohl die ID #menue des umgebenden Elements. Demnach haben CSS-Anweisungen, die damit gemacht werden Vorrang vor den weniger spezifischen Klassenzuweisungen.
Abhilfe: ersetze die Klasse aktiverLink durch die ID aktiverLink.
ich hoffe das wars ;-)
Es gibt im CSS Regeln was die Browser machen sollen, wenn für ein Element verschiedene CSS-Anweisungen zutreffen. Dann soll diejenige mit der "höchsten Spezifität" genommen werden.
in diesem Fall ist am spezifischsten wohl die ID #menue des umgebenden Elements. Demnach haben CSS-Anweisungen, die damit gemacht werden Vorrang vor den weniger spezifischen Klassenzuweisungen.
Abhilfe: ersetze die Klasse aktiverLink durch die ID aktiverLink.
ich hoffe das wars ;-)
Antwort 8 von Petra65
nöööööö - muss Dich (und mich) leider enttäuschen ....
Die Sache an sich funktioniert, doch dann fehlt wieder <ul> usw., die ganzen Formatierungen passen nicht mehr, das zieht einen "Rattenschwanz" nach sich ... ;-(
Ich habe jetzt die Klasse direkt formatiert
<li class="aktiverLink" style="color:#FFFFFF">
Dann paßt das Ergebnis...... allerdings: ist es dann wirklich noch barrierefrei ????
Gruss
Petra
Die Sache an sich funktioniert, doch dann fehlt wieder <ul> usw., die ganzen Formatierungen passen nicht mehr, das zieht einen "Rattenschwanz" nach sich ... ;-(
Ich habe jetzt die Klasse direkt formatiert
<li class="aktiverLink" style="color:#FFFFFF">
Dann paßt das Ergebnis...... allerdings: ist es dann wirklich noch barrierefrei ????
Gruss
Petra
Antwort 9 von Petra65
LÖSUNG GEFUNDEN .....:
In einem css-Forum habe ich den Hinweis bekommen, dass....:
Damit funktioniert es !!!
Gruss und vielen, vielen Dank.
Petra
In einem css-Forum habe ich den Hinweis bekommen, dass....:
Zitat:
#menue li überschreibt .aktiverLink
Du brauchst
#menue .aktiverLink
Beschäftige dich mit der Spezifität von Selektoren.
#menue li überschreibt .aktiverLink
Du brauchst
#menue .aktiverLink
Beschäftige dich mit der Spezifität von Selektoren.
Damit funktioniert es !!!
Gruss und vielen, vielen Dank.
Petra
Antwort 10 von rfb
Zitat:
Die Sache an sich funktioniert, doch dann fehlt wieder <ul> usw., die ganzen Formatierungen passen nicht mehr, das zieht einen "Rattenschwanz" nach sich ... ;-(
nicht dass ich das so verstehen würdeDie Sache an sich funktioniert, doch dann fehlt wieder <ul> usw., die ganzen Formatierungen passen nicht mehr, das zieht einen "Rattenschwanz" nach sich ... ;-(
... Dann paßt das Ergebnis...... allerdings: ist es dann wirklich noch barrierefrei ?Im Sinne der BITV ist es egal wo du dein CSS hinschreibst - es ist halt nicht gerade praktisch direkt im HTML rumzuschreiben.
Die Tatsache, dass style funktioniert, deutet darauf hin, dass meine Vermutung in die richtige Richtung ging.
Mit der ID-Variante
<li><span id="aktiverLink">Willkommen</span></li>
sollte es übrigens gehen ohne direkte Formatierung im HTML
Antwort 11 von Petra65
Oh jaaaa - das hätte auch funktioniert, ich habe dummerweise <div id="aktiverLink">... genommen, daher schlug das validieren fehl!! Und das zieht dann den "Rattenschwanz" nach sich.
Ich habe auch immer noch nicht raus wann man <div> und wann <span> einsetzt ;-( ..
Ich habe auch immer noch nicht raus wann man <div> und wann <span> einsetzt ;-( ..
Antwort 12 von rfb
div: erzeugt eigenen Absatz (Blockelement), kann viele andere Elemente beinhalten
span: erzeugt keinen Absatz (inlineelement), kann nur wenige andere Inlineelemente beinhalten
span: erzeugt keinen Absatz (inlineelement), kann nur wenige andere Inlineelemente beinhalten