[GastForen Web allgemein HTML und CSS / Stylesheets Rollover bei Grafiken mit CSS (Firefox kann's, IE nicht)

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Rollover bei Grafiken mit CSS (Firefox kann's, IE nicht)

Canio
Beiträge gesamt: 174

1. Jun 2006, 18:01
Beitrag # 1 von 3
Bewertung:
(680 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,ich hoffe ihr könnt mir helfen.

Also, ich möchte als Buttons auf meiner Seite Grafiken verwendet. Und zwar eine für den normalen Zustand, die andere für einen Rollover-Effekt. Fährt die Maus über die Grafik, erscheint die andere (Logo!).
Der untenstehende Code funzt prima, aber leider nur bei Firefox, nicht im IE. Letzterer zeigt mir erst gar nix an.

Der Code ist leicht zu lesen, würd mich sehr freuen über einen Lösungsvorschlag (ohne Javascript versteht sich).

HTML-Code:

...
<div id="home-btn"><a href=#></a></div>
...

CSS-Code:

...
#home-btn{
position:absolute;
left:29px;
top:106px;
width:59px;
height:24px;
z-index:5;
}
#home-btn a{
background-image: url(bilder/button_home.gif);
background-repeat: no-repeat;
padding-left: 59px;
padding-bottom: 12px;
}
#home-btn a:hover{
background-image: url(bilder/button_home_ro.gif);
background-repeat: no-repeat;
}
...
X

Rollover bei Grafiken mit CSS (Firefox kann's, IE nicht)

SabineP
Beiträge gesamt: 7586

1. Jun 2006, 19:20
Beitrag # 2 von 3
Beitrag ID: #232485
Bewertung:
(675 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Canio,

da fehlt mindestens noch

#home-btn a{display:block}

Hier gibts auch noch ein Beispiel dazu:
http://aktuell.de.selfhtml.org/...useover/index.htm#a4


als Antwort auf: [#232474]
(Dieser Beitrag wurde von SabineP am 1. Jun 2006, 19:23 geändert)

Rollover bei Grafiken mit CSS (Firefox kann's, IE nicht)

Canio
Beiträge gesamt: 174

2. Jun 2006, 09:55
Beitrag # 3 von 3
Beitrag ID: #232581
Bewertung:
(666 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Stimmt genau, das ist es. Vielen Dank dafür!

Das padding war also nur Gestümper. Statt padding braucht das a noch Weite und Höhe. So hab läuft's dann überall:

#home-btn a{
display:block;
background-image: url(bilder/button_home.gif);
background-repeat: no-repeat;
width:59px;
height:24px;
}


als Antwort auf: [#232485]

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/