CSS: Unterschied zwischen den Versionen

Aus Linupedia.org
Wechseln zu: Navigation, Suche
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 1: Zeile 1:
Dynamische Pseudo-Klassen: :hover
+
=== [[Dynamische Pseudo-Klassen]] ===
Häufig herrscht unklarheit darüber, wie die CSS-Teile im CSS angeordnet werden müssen. In meinem Fall hatte ich auf [http://www.yehudi.de/ meiner Website]seit dem ich mit Joomla und CSS arbeite, oft das Problem, dass Links in den Farben auf der ganzen Seite sich gleich verhalten haben.
+
Hovereffekte, und Linkfarben
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  [http://www.yehudi.de/news.html 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.
+
[[Category:CMS]]
 
 
/*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;
 
}
 
 
 
 
 
--[[Benutzer:Yehudi|Yehudi]] 11:24, 18. Aug 2006 (CEST)
 

Aktuelle Version vom 18. August 2006, 09:54 Uhr

Dynamische Pseudo-Klassen

Hovereffekte, und Linkfarben