title image


Smiley Re: Hintergrundfarbe in Navigation per hover-Effekt?
Dein Problem ist, dass mit direkter Formatierung (style="...") nur das Aussehen des

derzeitig eingebauten Inhaltes geändert werden kann.



Um Das Problem zu lösen, musst Du die einzelnen Pseudoklassen von a vorformatieren.

Das kannst Du innerhalb head in einem style-Bereich oder besser in einer externen

CSS-Datei vornehmen.



innerhalb head:

<style type="text/css">

/* hier stehen alle Elemente mit deren Formatierungen */

</style>



Damit andere Seiten ebenfalls von den Formatierungen profitieren können, sollten die

Formatierungen in einer CSS-Datei zusammengefasst werden. Das erspart Dir, dass für

jede Seite die Formatierungen in das Dokument mit eingebracht werden muss, dem

Besucher unnötige Ladezeiten, Dir leichtere Überarbeitung und verkürzte Überarbeitungszeiten.



Innerhalb head muss entsprechend nur ein Link auf diese Datei gesetzt werden:

<link rel="stylesheet" type="text/css" href="datei.css">



Erstellen kannst Du so eine Datei, indem Du aus Notepad (Editor) die Datei einfach

als CSS-Datei (Endung: *.css) abspeicherst.



Innerhalb der CSS-Datei sind HTML-Elemente nicht erlaubt.



das Element a hat mehrere Pseudoklassen, die die einzelnen Zustände definieren:

a:link = Zustand eines bisher noch nicht gesuchten Link.

a:visited = Zustand eine bereits besuchten Link.

a:hover = Zustand bei Berührung mit dem Mauszeiger, ohne den Link zu klicken.

a:active = Zustand zwischen Klick und Wiederloslassen der Maustaste.

a:focus = Zustand bei Fokussierung des Link (entsteht beim Anklicken), versteht der IE nicht.



Alle Pseudoklassen (alle Zustände) sind im Element a zusammengefasst.



Das Aussehen der einzelnen Zustände kann vorformatiert werden:

a {

/* Formatierungen aller Pseudoklassen */

}

a:link {

/* Nur Formatierungen die von a abweichen oder für diesen Zustand noch nicht formatiert wurden */

}

a:visited {

/* Nur Formatierungen die von a abweichen oder für diesen Zustand noch nicht formatiert wurden */

}

a:hover {

/* Nur Formatierungen die von a abweichen oder für diesen Zustand noch nicht formatiert wurden */

}

a:active {

/* Nur Formatierungen die von a abweichen oder für diesen Zustand noch nicht formatiert wurden */

}

a:focus {

/* Nur Formatierungen die von a abweichen oder für diesen Zustand noch nicht formatiert wurden */

}



Zustände, die nicht benötigt werden, können weggelassen werden.



Gleiche Zustände können zusammengelegt werden. Die Aufzählung muss durch ein Komma getrennt werden.



Beispiel:

a:link, a:visited {

/* Gleiche Formatierungen für die beiden Zustände "unbesuchter Link" und "besuchter Link" */

}



weitere Informationen:

http://de.selfhtml.org/html/verweise/index.htm

http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active



mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: