CSS und verschiedene Browser

kann es sein, das verschiedene Browser meine CSS-Datei anders interpretieren?

meine CSS-Datei sieht folgendermaßen aus:

[code]body {
background-color:#000000;
}

a:link {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: none;
font-size:20px;
}
a:visited {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: none;
font-size:20px;
}
a:hover {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: none;
font-size:20px;
}
a:active {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: underline;
font-size:20px;
}[/code]

diese ist lediglich für die Menüleiste zuständig in der sich nur Links befinden.
Wie man sehen kann möchte ich das lediglich die aktiven Links unterstrichen sind, die anderen sollen keinerlei Effekt aufweisen.

Ich habe nun 4 Browser zum Test zur Verfügung. Den Internet-Explorer, den Firefox, Opera und Safari.

Nun tritt folgender Effekt auf… im Internet-Explorer klappt alles sp wie ich es will, also der Link ist solange unterstrichen wie er auch aktiv ist. Im Firefox geschieht hingegen garnichts.Der aktive Link hat lediglich einen gestrichelten Rahmen, aber den Effekt macht er eigentlich immer. Im Opera und Safari ist der aktive Link nur solange unterstrichen wie ich ihn mit der Maus anklicke und die geklickt halte, danach isyt das Unterstrichene wieder weg.

Weiss jemand ob es CSS-Befehle gibt die sich auf alle Browser gleich ausüben, oder was ich machen kann um meinen Effekt auch im Firefox, Opera und Safari hinzukriegen?

In der CSS-Spezifikation steht (deutsche Übersetzung):

Es ist also eher unwahrscheinlich, daß man :active länger
als Sekundenbruchteile sieht, da muß man schon den Verweis
gedrückt halten. Anderes Verhalten könnte auf eine
Fehlfunktion hinweisen.
Für benutzte Verweise ist dann ja eher :visited zuständig, nicht
:active

edition-w3c.de/TR/1998/REC-C … ing-5.11.3

(dort dann auch andere Pseudoklassen nachzulesen)

[code]body {background-color:black;}

a:link, a:visited {
color: red;
font:bold 20px “Century Gothic”;
text-decoration: none;
}
a:hover, a:active {text-decoration:underline;}[/code]

Das reicht schon.
Es gibt durchaus einen Unterschied zwischen :active und :hover (letzteres beschreibt den “Maus-drüber”-zustand, ersteres das Klicken, also sozusagen “on mouse down”. Und dann gibt es auch noch :focus für das Selektieren beispielsweise per Tabulator-Taste).
In der Praxis ist jedoch meistens ein einheitliches Erscheinungsbild gewünscht, daher kann man die Definitionen für beide Pseudoklassen durchaus zusammenfassen.

Mit dem obigen Code erreichst Du also, dass
a) alle Links rot, fett und in “Century Gothic” 20 px dargestellt werden. (Denke bei der Gelegenheit auch daran, dass diese Schriftart nicht auf allen Systemen verfügbar ist!)
b) solange die Maus über einem Link ist, wird dieser unterstrichen.

Wenn Du allerdings (was ich vermute) den gerade angezeigten Link formatieren willst (also die aktuelle Seite), dann brauchst Du eine eigene Klasse dafür. Die könnte beispielsweise actual heissen.
Im folgenden Beispiel ist der Link, der die gerade angezeigte Seite markiert, mit einem weißen Hintergrund versehen:

[code] im CSS:

a:link, a:visited {
color: red; background:transparent;
font:bold 20px “Century Gothic”;
text-decoration: none;
}
a:hover, a:active {text-decoration:underline;}
a.actual {background:white;}

im HTML:

Link 1
Link 2
Link 3
Link 4
[/code]

Um das Klassenattribut einzufügen, muß man ja den
(X)HTML-Quelltext ändern, das ist ein leicht anderes Problem.

Ansonsten sollte es sinnvoller Weise einen Verweis zur
aktuellen Seite gar nicht geben, weil das sinnlos ist. Da sollte
man wohl besser gleich das a-Element durch ein anderes
Element wie strong ersetzen und das dekorieren.

also meine css sieht jetzt so aus:[quote]body {
background-color:#000000;
}

a:link {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: none;
font-size:20px;
}
a:visited {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: none;
font-size:20px;
}
a:hover {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: none;
font-size:20px;
}
a:active {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: underline;
font-size:20px;
}

a:actual {
color: #FF0000;
font-family: “Century Gothic”;
font-weight: bold;
text-decoration: underline;
font-size:20px;
}[/quote]und die dazugehörige HTNL-Datei so:[quote]

Unbenanntes Dokument

 

Startseite

Maurer- und
Betonarbeiten
aller Art

An- und
Umbau-
arbeiten

Montage von
Fertigbau-
teilen

Pflaster-
arbeiten

Naturstein-
arbeiten

Außenanlagen

Impressum

[/quote]aber ich habe immer noch den gleichen Effekt, das die "aktiven", alo zur Zeit altuellen Links, nur im Internet-Explorer unterstrichen sind.

Das ganze kann man hier nachvollziehen: blazer870.bl.funpic.de
der Webspace ist nur probeweise, wenn alles klappt wird übergesiedelt zu bplaced

Der Doppelpunkt wird nur bei Pseudoklassen gesetzt, nicht bei Klassen.
Richtig ist also:

Und diese Klasse wird auch nur einem Link zugeordnet, nämlich dem, der die gerade angezeigte Seite referenziert.

Danke für den Tip, ich bin noch nicht ganz fit in css

Aber nun hab ich natürlich den Effekt das die Links in der Navigationsleite immer unterstrichen sind :neutral_face:
Sie sollen aber nur unterstrichen sein wenn sie angewählt sind, also die betroffenne Seite die verlinkt is, im mittleren Teil zu sehen ist

Nachtrag:
bei Deiner Seite wäre es außerdem sinnvoll, die Links nicht in Absätze zu packen, sondern eine Liste zu nutzen - das erhöht die Übersichtlichkeit Deines Quelltextes enorm:

[code]

 

Startseite

Maurer- und
Betonarbeiten
aller Art

An- und
Umbau-
arbeiten

[/code] In diesem Fall wäre übrigens der erste Link der "actual"-Link.

Im CSS sorgst Du dann noch für die Formatierung der Liste (Aufzählungszeichen weg etc.):

a:link, a:visited {
   color: red;
   font:bold 20px "Century Gothic";
   text-decoration: none;
}
a:hover, a:active {text-decoration:underline;}

/* aktuellen Link markieren */
a.actual {
  color:red;
  font:bold 20px "Century Gothic";
  text-decoration: underline;
}

/* Listenformatierung */
ul#navigation {list-style:none; margin:0px; padding:0px;}
ul#navigation li {margin:0.5em 1em;}

edit: ok, Du hast schon gepostet, während ich noch geschrieben habe :smiley:
Also: dieses “class=‘actual’” bekommt nur der Link, der gerade angezeigt wird. Nur ein einziger, nicht alle!

also es kklappt alles nicht so wie ich möchte meine codes sehen jetzt so aus

css:[code]body {
background-color:#000000;
}

a:link, a:visited {
color: red;
font:bold 20px “Century Gothic”;
text-decoration: none;
}
a:hover, a:active {text-decoration:underline;}

/* aktuellen Link markieren */
a.actual {
color:red;
font:bold 20px “Century Gothic”;
text-decoration: underline;
}

/* Listenformatierung */
ul#navigation {list-style:none; margin:0px; padding:0px;}
ul#navigation li {margin:0.5em 1em;}[/code]
html:[code]

Unbenanntes Dokument [/code]

aber mir wird immer nur der erste Link dauerhaft unterstrichen angezeigt, und die anderen nur solange sie angelickt sind, zumindest jetzt auch im Firefox. Der Internet-Explorer zeigt es richtig an, also solange unterstrichen wie der Linkseite auch sichtbar ist, der erste Link aber auch permanent unterstrichen…

Ist das ein frameset, wo das reinkommt?
Da bringt das wenig. Der ‘Trick’ mit der Klasse funktioniert nur,
wenn jedesmal das Menü mit ausgetauscht wird, also für jede
Seite ein anderes (kann man etwa mit PHP machen statt mit
frameset), aber ist wie oben beschrieben ohnehin nicht sinnvoll,
einen Verweis zu selben Seite anzubieten, wenn man das
Menü schon jedesmal ändert, streicht man den überflüssigen
Verweis besser…

ja das ist ein Frameset
es besteht aus drei Frames nebeneinander (leftFrame,mainFrame und rightFrame)
im leftFrame ist die Navigation, also die HTML-Datei die ich oben dargestellt habe, die Links öffnen sich im mittleren Frame(mainFrame. Im rightFrame ist nur eine Grafik die sich nie verändert.

Wie könnte ich das jetzt hinbringen das die verlinkte Seite im öeftFrame andedrs dargestellt wird (am besten unterstrichen)

@ blazer:
stimmt natürlich - bei frames kommt man damit nicht weiter :neutral_face:
Am besten verzichtest Du auf das frameset (auch und sogar hauptsächlich aus anderen Gründen).

@hoffman:
wieso willst Du denn unbedingt den “sinnlosen” Link rausnehmen??
:hover funktuioniert zuverlässig nur bei Links (ja ja, sollte auch bei anderen Elementen gehen, aber der IE…)
Und bei flyout-Menus kommst Du ohne Link gar nicht mehr weiter.
(Ist hier zwar nicht der Fall, aber trotzdem… könnte ja mal sein. Oder jemand anderen betreffen.)

[quote=“i.deFix”]stimmt natürlich - bei frames kommt man damit nicht weiter :neutral_face:
Am besten verzichtest Du auf das frameset (auch und sogar hauptsächlich aus anderen Gründen).[/quote]aber wie mach ich das dann ohne Frames???

Jede (angezeigte) Seite wird in einer einzigen (X)HTML-Datei erstellt.
Jede Datei enthält die Navigation, nur dass der jeweils aktive Link die Klasse “actual” bekommt.

Das hat u.a. den Vorteil, dass die Navi auch immer sichtbar ist: sollte ich z.B. per google auf eine Inhaltsseite kommen (also direkt auf den “mainFrame” zugreifen), würde ich jetzt (noch) keine Navigation vorfinden und könnte also weder vor noch zurück - nur ein Nachteil von frames :wink:

Grob besteht also Deine Seite(n) immer aus drei Teilen:
a) mit Meta-Angaben und (wenigstens letzterer sollte dann auf jeder Seite anderen Inhalt haben)
b) die Navigation (grundsätzlich immer gleich, kann auch mit php eingebunden werden)
c) der eigentliche Inhaltsbereich.

http://de.selfhtml.org/css/layouts/mehrspaltige.htm dürfte hier für Dich ein guter Einstieg sein.

i.deFix - gut, ich habe auch immer noch einige einfachere Seiten,
wo ich sowas (noch) nicht aus den Menüs entfernt habe, für
einige Leute stellt es aber ein Zugänglichkeitsproblem dar und
ein Grund für Frustration, wenn Verweise nicht zu funktionieren
scheinen oder dasselbe Dokument (und dort nicht mal ein anderes
Fragment) ansteuern. Das verunsichert Leute, die mit dem
internet nicht so vertraut sind, daß sie schlechte Angewohnheiten
von Autoren einfach so ignorieren könnten.
Deswegen steht es auch in den Tips hinsichtlich der
Zugänglichkeit von internet-Seiten, daß man dies vermeiden
soll.
Tatsächlich ist es ja auch nicht viel schwieriger, per PHP die
Markierungen für ein a-Element gegen was anderes
auszutauschen, als ein class-Attribut hinzuzufügen. Wenn der
Text dann nicht mehr als Verweis dargestellt wird, ist das ja
auch gleichzeitig eine andere Darstellung der aktuellen Seite
im Menü, sogar ohne CSS, was ja nur dekorative Funktion hat.
Bei mir bestehen die Menüs, die per PHP eingebunden werden,
jetzt meist aus kleinen Skripten, die analysieren, was dargestellt
wird und das Menü dann entsprechend sinnvoll anpassen, das
vermeidet dann gezielt solchen Schabernack wie einen
überflüssigen Verweis zu einer Seite, auf der man bereits ist.

Der Begriff ‘flyout-Menus’ sagt mir nichts, kann ich mich nicht
zu äußern, wenn es da Probleme gibt, ist die Konstruktion
vermutlich mangelhaft, wenn diese Verweise zum selben
Dokument (ohne Fragmentidentifizierer) erfordert oder
Verweise mit ungültigem Ziel (machen ja auch einige Autoren).
Fehler von antiken/veralteten browsern bei der Dekoration
sollten ja nun kein Grund sein, den Seiteninhalt zu vergurken,
das stellt die Bedeutungen von (X)HTML und CSS geradezu auf
den Kopf ;o)

@ hoffman:
Zugänglichkeit? Der Punkt geht an dich.
Obwohl ich mich gerne zu diesen Punkten äußern möchte, werde ich es hier nicht tun - geht zu sehr offtopic…

@ miro:
Könntest Du mal ein eigenes Unterforum “Design & Usability” (oder so ähnlich) erstellen?
Es scheint ja eindeutig Bedarf zu geben, einige teils sehr hitzige Diskussionen sind hier schon geführt worden (leider gingen diese immer vom ursprünglichen Thema weg)…