1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

CSS Button

  • Nico1994
  • 5. August 2010 um 18:31
  • Nico1994
    Interessierte/r
    Beiträge
    83
    • 5. August 2010 um 18:31
    • #1

    Hallo,

    Hab n Problem mit meinen Button. Sie bestehen aus Bilder und bei Hover wird das Bild mit einem andren Bild gewechselt. Nur der wechsel bei Mouse Over klappt nicht.

    HTML
    ul {
      margin: 0;
      padding: 0;
      width: 640px;
      height: 96px;
      float: right;
      list-style: none;
    
    }
    
    
    
    
    
    
    li#a {
    width: 160px;
    height: 96px;
    float: left;
    background-image: url('button.jpg');
    }
    li#a:hover, {
    width: 80px;
    height: 96px;
    background-image: url('buttonhover.jpg');
    }
    
    
    
    
    li#b {
    width: 80px;
    height: 96px;
    float: left;
    background-image: url('button2.jpg');
    }
    li#b:hover, {
    width: 80px;
    height: 96px;
    background-image: url('button2hover.jpg');
    }
    
    
    
    
    
    
    li#c {
    width: 80px;
    height: 96px;
    float: left;
    background-image: url('button3.jpg');
    }
    li#c:hover, {
    width: 80px;
    height: 96px;
    background-image: url('c2.png');
    }
    
    
    
    
    
    
    li#d {
    width: 80px;
    height: 96px;
    float: left;
    background-image: url('button4.jpg');
    }
    li#d:hover, {
    width: 80px;
    height: 96px;
    background-image: url('d2.png');
    }
    
    
    
    
    
    
    li#e {
    width: 80px;
    height: 96px;
    float: left;
    background-image: url('button5.jpg');
    }
    li#e:hover, {
    width: 80px;
    height: 96px;
    background-image: url('e2.png');
    }
    
    
    
    
    
    
    li#f {
    width: 80px;
    height: 96px;
    float: left;
    background-image: url('button6.jpg');
    }
    li#e:hover, {
    width: 80px;
    height: 96px;
    background-image: url('e2.png');
    }
    
    
    
    
    
    
    li#g {
    width: 80px;
    height: 96px;
    float: left;
    background-image: url('button7.jpg');
    }
    li#e:hover, {
    width: 80px;
    height: 96px;
    background-image: url('e2.png');
    }
    
    
    
    
    li a {
    display: block;
    width: 80px;
    height: 96px;
    
    
    }
    Alles anzeigen


    Kann mir bitte einer weiterhelfen?

    MfG

    http://www.nicolas-pecher.com <- Meine Website
    Mein neues Projekt: http://www.mc-web.net

  • Tobse
    Kaiser(in)
    Reaktionen
    4
    Beiträge
    2.439
    • 5. August 2010 um 19:50
    • #2

    Pack beide bilder in eine datei und arbeite mit background-position;
    EDIT:

    Zitat von Grevas

    Was jetzt natürlich nichts mit dem Problem zu tun hat :rolleyes:


    Natürlich nicht, aber es erreicht, was er will und erhöht die Performance der Page ;)

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    2 Mal editiert, zuletzt von Tobse (5. August 2010 um 22:12)

  • Grevas
    König(in)
    Reaktionen
    3
    Beiträge
    1.043
    • 5. August 2010 um 20:48
    • #3

    Was jetzt natürlich nichts mit dem Problem zu tun hat :rolleyes:

    Lad die Seite irgendwo mal hoch, damit man etwas mehr sehen kann.

  • threadi
    König(in)
    Reaktionen
    4
    Beiträge
    1.391
    • 5. August 2010 um 23:02
    • #4

    Du hast hier einen Schreibfehler:

    Code
    li#a:hover[COLOR=Red],[/COLOR] {

    Komma weg, dann sollte es gehen.

Tags

  • www
  • bilder
  • button
  • html
  • color
  • http
  • style
  • background
  • jpg
  • ton
  • problem
  • code
  • page
  • datei
  • position
  • schreibfehler
  • png
  • height
  • css
  • image
  • hover
  • performance
  • float
  • padding
  • quote
  • you

Benutzer online in diesem Thema

  • 1 Besucher
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern