Dynamische Pseudo-Klassen

Autor: Yehudi

Dynamische Pseudo-Klassen: :hover Häufig herrscht unklarheit darüber, wie die CSS-Teile im CSS angeordnet werden müssen. In meinem Fall hatte ich auf meiner Websiteseit dem ich mit Joomla und CSS arbeite, oft das Problem, dass Links in den Farben auf der ganzen Seite sich gleich verhalten haben. Bei mir gibt es mehrere Variationen

• Mainmenü: Links sind rot, besuchte auch, sobald die Maus rüberfährt sind sie blau, und aktive gelb, der Hintergrund ist Schwarz.
• Topmenü: wie Mainmenü, nur der Hintergrund ist grau, und beim rüberfahren und aktiven Link ist es Schwarz.
• Contentbereich in der Mitte: alle Variationen der Links sind rot
• zum Bericht: das ist in den Inhaltsverzeichnissen z.B. in den News der Link zum Bericht ist blau, und als hovereffekt unterstrichen.
• Grauzone: Das ist der Bereich auf der rechten Seite im grauen Feld unter Yehudi's Shop. Dort ist das gleiche Vehalten wir im mittleren Content bereich, nur das die Schrift kleiner ist.

Damit diese Dinge auch 100% so angezeigt werden, und nicht anders müssen im Css wie im folgenden Beispiel, die CSS Parts angeordnet werden, sie dürfen von der Reihenfolge nicht gemischt oder verändert werden. Oft sind in den Templates von Joomla diese Angaben nicht korrekt.

/*line-height: 2.5; habe ich für den Zeilenabstand eingefügt*/
.bericht {
  vertical-align: middle;
  font-size: 12px;
  font-style: italic;
  color: #0000FF;
  text-align: left;
  padding-top: 20px;
  padding-left: 0px;
  height: 10px !important;
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 2.5;
}

.bericht a:link {
   color: #0000FF;
}

.bericht a:visited {
   color: #0000FF;
}

.bericht a:hover {
   color: #0000FF;
   text-decoration: underline;
}

.bericht a:active {
   color: #0000FF;
   text-decoration: none;
}

--Yehudi 11:24, 18. Aug 2006 (CEST)

Zurück zu Webdesign