Newsletter

  • Immer informiert über die neusten Trends, Webseiten und Tutorials! Einfach hier für den monatlichen Newsletter anmelden.
  •  Eintragen
  •  Austragen

Login

Umfrage

  • Bloggt Ihr?
  •  
  • ja
  • nein
  • bloggen?
  •  

BlackBeats

BlackBeats.fm Stream
- ONAIR -
Hip Hop Musik vom feinsten

Blackbeats FM
» Startseite » HTML, CSS und JavaScript Tutorials

CSS: Rollover-Effekt (einfarbig)

Auf vielen Webseiten sieht man den sogenannten "Rollover-Effekt". Dabei fährt man z.B. über ein Feld in der Navigation, woraufhin sich das Hintergrundbild ändert. Auf vielen Webseiten ist dieser Effekt mit Javascript realisiert. CSS hat in diesem Punkt allerdings einige Vorteile

  • Viele Benutzer haben JavaScript in ihrem Browser ausgeschaltet.
  • Fast alle Benutzer haben CSS-Unterstützung in ihrem Browser.
  • CSS ist schneller und einfacher zu verstehen.


Als Beispiel hier eine einfache Navigation:

  1.  <div id="navigation">
  2.  <ul>
  3.  <li><a href="#">Startseite</a></li>
  4.  <li><a href="#">Irgendeine Seite</a></li>
  5.  <li><a href="#">Noch eine Seite</a></li>
  6.  </ul>
  7.  </div>

Das # muss dabei natürlich durch den entsprechenden Verweis (URL) ersetzt werden.

In den Header der Seite (also zwischen <head> und </head>) muss folgender CSS-Code:

  1.  <style type="text/css">
  2.  #navigation ul {
  3.    list-style-type:none; /* Dieser Code entfernt den Punkt vor den Listenelementen */
  4.  }
  5.  #navigation a {
  6.    display:block;    /* Als Block anzeigen */
  7.    padding:10px;      /* Buttons etwas größer machen */
  8.    margin:0px;        /* Standardabstände entfernen */
  9.    text-align:center; /* Zentrierte Ausrichtung */
  10.    width:150px;      /* Die Breite der Navigationsbuttons */
  11.    height:30px;      /* Die Höhe der Navigationsbuttons */
  12.    background-color:#0000aa; /* Die Hintergrundfarbe */
  13.    text-decoration:none; /* Unterstreichung entfernen */
  14.    color:#ffffff;    /* Farbe der Links auf Weiß setzen */
  15.  }
  16.  #navigation a:hover {
  17.    background-color:#55f; /* Hintergrundfarbe bei Mausberührung */
  18.  }
  19.  </style>

Das Ergebnis sieht dann so aus:

Natürlich können die Farben entsprechend angepasst werden. (Siehe hier)




Fragen? Probleme? Keine Antworten? Hilfe finden Sie im Webmaster Forum!
Diese Artikel könnten Sie auch interessieren:
XHTML - Textauszeichnungen
XHTML - HTML allgemein
monatlich wechselnder Link mit JavaScript
XHTML - Grafiken