Links, Formatierungsangaben effizient zusammenfassen

[Masha]

Hi,
ich möchte in meiner CSS Datei keinerlei Redundanzen bei den Formatierungsangaben. Wie kann ich möglichst effizient die Formatierung der Links zusammenfassen. Meine Links sollen alle gleich aussehen und nur beim Drüberstreichen fett werden und die Farbe ändern. Besuchte Links sollen sich nicht ändern.
Hier mein aktueller Vorschlag:

  
a { font-family: Verdana,Arial,sans-serif;font-style: normal;font-variant: normal;font-weight: normal;text-decoration: none; }  
a.vertikalenavigation { font-size: 1em; color: #FFF;padding: 10px 5px 10px 15px;display: block; }  
a.vertikalenavigation:hover { font-weight: bold;color: #828fc6; }  
a.vertikalenavigation:active { font-weight: bold;color: #828fc6; }  
a.vertikalenavigation:focus { font-weight: bold;color: #828fc6; }

So spare ich auch die Angabe :visited.
Viele Grüße
Masha

[ChrisB]

Hi,

Hier mein aktueller Vorschlag:

a { font-family: Verdana,Arial,sans-serif;font-style: normal;font-variant: normal;font-weight: normal;text-decoration: none; }
a.vertikalenavigation { font-size: 1em; color: #FFF;padding: 10px 5px 10px 15px;display: block; }

Wähle einen günstigeren Selektor.
Da diese Links sich vermutlich als einzige in einem übergeordneten Element befinden werden, welches diese vertikale Navigation auszeichnet, bietet sich bspw. der Nachfahrenselektor an.

Was sich nicht an-, sondern eher verbietet, ist der gewählte Klassenname, der sich auf die derzeit gewünschte Darstellung bezieht.

a.vertikalenavigation:hover { font-weight: bold;color: #828fc6; }
a.vertikalenavigation:active { font-weight: bold;color: #828fc6; }
a.vertikalenavigation:focus { font-weight: bold;color: #828fc6; }[/code]

Warum hast du hier noch keinerlei Zusammenfassung vorgenommen?
Du hast mehrere Selektoren, für die alle die gleichen Formatierungen gelten sollen.

So spare ich auch die Angabe :visited.

In wie fern sparst du dir die?
Zum Nachteil der Usability, in dem du dem Nutzer bereits von ihm besuchte Links nicht kenntlich machst?

MfG ChrisB

[Masha]

Was sich nicht an-, sondern eher verbietet, ist der gewählte Klassenname, der sich auf die derzeit gewünschte Darstellung bezieht.

Bin nicht sicher, ob ich das richtig verstehe. Ich adressiere nun so:
#vertikalnavigation li a {...}
Danke für diesen Tipp!

a.vertikalenavigation:hover { font-weight: bold;color: #828fc6; }
a.vertikalenavigation:active { font-weight: bold;color: #828fc6; }
a.vertikalenavigation:focus { font-weight: bold;color: #828fc6; }[/code]

Warum hast du hier noch keinerlei Zusammenfassung vorgenommen?

Würde ich gerne. Wie fasse ich das zusammen.Finde die korrekte Schreibweise nicht.
Das scheint falsch zu sein:
#vertikalnavigation li a:hover:active:focus {...}

Besten Dank!
Masha

[ChrisB]

Hi,

Warum hast du hier noch keinerlei Zusammenfassung vorgenommen?
Würde ich gerne. Wie fasse ich das zusammen.Finde die korrekte Schreibweise nicht.

http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_(Selektoren)

Das scheint falsch zu sein:
#vertikalnavigation li a:hover:active:focus {...}

Natürlich, das ist Quark.
Syntax nicht raten, sondern nachlesen.

MfG ChrisB

[CharlyH]

Hallo liebe(r) Masha,

Was sich nicht an-, sondern eher verbietet, ist der gewählte Klassenname, der sich auf die derzeit gewünschte Darstellung bezieht.
Bin nicht sicher, ob ich das richtig verstehe. Ich adressiere nun so:
#vertikalnavigation li a {...}

Ich denke, ChrisB wollte Dir sagen, dass es nicht gut ist, einen Klassennamen nach dem _derzeitigen_ Aussehen eines Elements zu wählen. Was ist, wenn Du eines Tages das Seitendesign änderst und besagte Links nun plötzlich nebeneinander stehen? Dann hat ein Element, in dem Links horizontal ausgerichtet sind, einen ID-Namen, in dem 'horizontal' steht. Anderes Besipiel: Es ist besser, den Klassennamen 'hauptueberschrift' statt 'ueberschrift_blau' zu nehmen, weil eine Hauptüberschrift wird immer eine Hauptüberschrift bleiben. Ob sie nun blau oder orange dargestellt wird, ist allerdings flexibel. Verstehst Du, was gemeint ist?

a.vertikalenavigation:hover { font-weight: bold;color: #828fc6; }
a.vertikalenavigation:active { font-weight: bold;color: #828fc6; }
a.vertikalenavigation:focus { font-weight: bold;color: #828fc6; }
Warum hast du hier noch keinerlei Zusammenfassung vorgenommen?
Würde ich gerne. Wie fasse ich das zusammen.Finde die korrekte Schreibweise nicht.
Das scheint falsch zu sein:
#vertikalnavigation li a:hover:active:focus {...}

Wenn 'font-weight' und 'color' sowieso gleich bleiben, wieso packst Du dann die Eigenschaften nicht gleich auch beim a.vertikalenavigation mit dazu? Und beachte auch den Hinweis, dass das Weglassen von 'visited' nicht gerade sehr Usability-fördernd ist.

Mit lieben Grüßen

CharlyH

[Gunnar Bittersmann]

@@CharlyH:

nuqneH

Anderes Besipiel: Es ist besser, den Klassennamen 'hauptueberschrift' statt 'ueberschrift_blau' zu nehmen

Schlechtes Beispiel. Die Hauptüberschrift ist als 'h1'-Element bereits als solche ausgezeichnet; eine Klasse dafür erübrigt sich.

Qapla'

[CharlyH]

Lieber Gunnar,

Schlechtes Beispiel. Die Hauptüberschrift ist als 'h1'-Element bereits als solche ausgezeichnet; eine Klasse dafür erübrigt sich.

abgesehen davon, dass es ja möglich sein kann, dass jemand gleichwichtige/gleichwertige h1-Überschriften unterschiedlich formatieren möchte, ging es mir eigentlich mehr um die Erklärung des Prinzips.

Aber es freut mich natürlich, wenn ich Dir dadurch die Möglichkeit gegeben habe, ein kleiner beserwisserischer erbsenzählender Wichtigmacher zu sein.

Mit lieben Grüßen

CharlyH

[Gunnar Bittersmann]

@@CharlyH:

nuqneH

abgesehen davon, dass es ja möglich sein kann, dass jemand gleichwichtige/gleichwertige h1-Überschriften unterschiedlich formatieren möchte […]

Dann ist 'hauptueberschrift' kein guter Klassenbezeichner. Und genau darum ging es dir ja: einen guten Klassenbezeichner zu verwenden.

[…] ging es mir eigentlich mehr um die Erklärung des Prinzips.

Um das Prinzip zu erklären, muss man es verstanden haben. >;->

Qapla'

[Ratge Bär]

[code lang=css]
a {... text-decoration: none; }

Sieht man häufiger. Aber was soll es bringen, Links als solche unkenntlich zu machen? Soll deine Webseite ein Suchspiel werden?

Kürzlich klickte ich doppelt auf ein Wort, um es zu markieren. Pech gehabt, es war ein Link zu einem PDF- Dokument und der Adobe Reader wurde zeitaufwändig geöffnet.

Gruß, Ratge Bär

[MudGuard]

Hi,

Kürzlich klickte ich doppelt auf ein Wort, um es zu markieren. Pech gehabt, es war ein Link zu einem PDF- Dokument und der Adobe Reader wurde zeitaufwändig geöffnet.

Deinstallier den Adobe Reader und installier eine Alternative, z.B. Foxit ...

Aus dem (unsinnigen) Klassennamen läßt sich schließen, daß es sich nicht um Links im Fließtext handelt, insofern ist eine Unterdrückung der Unterstreichung eher gerechtfertigt.
Und auch im Fließtext muß nicht notwendigerweise die Unterstreichung die Links als solche erkennbar machen, es kann ja auch anderweitig kenntlich gemacht werden (Farbe, Hintergrundfarbe, Borders, ...), was ein Link ist.

cu,
Andreas