Button, bestehend aus 3 Elementen - Frage bezgl. hover

O

Ortstarif

Grünschnabel
Hallo an die Gemeinde. Ich bin ein ziemlich blutiger HTML/CSS-Anfänger und möchte folgendes Szenario realisieren:
Ich habe auf der Website einen Button mit abgerundeten Ecken, der aus 3 TD-Elementen besteht.

Jedes der 3 TD-Elemente hat ein entsprechendes Background-Image. Das mittlere TD-Element enthält den Text des Buttons als Link, das linke bzw. rechte TD-Element enthält ebenfalls ein Background-Image (linke bzw. rechte abgerundete Ecke des Buttons)

Per CSS-Code kann ich ohne Probleme beim hover über den Link das Background-Image des zentralen TD-Elements austauschen. Zusätzlich möchte ich aber auch gleichzeitig die beiden anderen Images (linke und rechte abgerundete Ecke) austauschen.

Aber wie krieg ich das hin mit CSS?

Hoffe, die Fragestellung ist nicht allzu blöd und jemand hat einen hilfreichen Tipp für mich.

Grüße, Ortstarif
 
Hi,

bediene dich anstelle der <td>-Elemente besser der "Sliding Doors"-Technik: How to make sexy buttons with CSS - zumal Tabellen semantisch nicht als Gestaltungsmittel einer Website dienen.

Anstelle der in dem Artikel genutzten :active-Pseudoklasse für gerade angeklickte Elemente, verwendest du die :hover-Pseudoklasse.

mfg Maik
 
Maik, danke für die schnelle Antwort.

Ich habe aus verschiedenen Gründen (die zu erklären ein wenig zu komplex sind) keine Möglichkeit, auf dieses Tabellen-Konstrukt zu verzichten. Gibt es trotzdem eine Möglichkeit?

Grüße, Ortstarif
 
Grundsätzlich stünde dir hier der Selektor für benachbarte Elemente zur Verfügung - Probleme hierbei:

  1. Beim Überfahren des mittleren <td>-Elements lässt sich damit nur das rechte <td>-Element ansprechen, jedoch nicht das linke.
  2. Dieser Selektor wird nicht von den älteren IE-Versionen interpretiert - sofern diese berücksichtigt werden.

mfg Maik
 
Hm, das wäre schon ganz passabel.

Ich vermute mal, dass IE6 unter "ältere Internet Explorer" fällt!? Würde es mit IE7 gehen?

Grüße Ortstarif
 
Jo, IE7 interpretiert diesen Selektor.

Nur was nützt er dir, wenn beim Überfahren des mittleren <td>-Elements lediglich das rechte angesprochen werden kann.

Tja, wer unter Zuhilfenahme von Tabellen sein Layout konstruiert, die in der Auszeichnungssprache ihre Semantik zur Ausgabe von tabellarischen Daten / Inhalten besitzen, gerät da ganz schnell an die Grenzen der Möglichkeiten mit der Formatierungssprache CSS.

mfg Maik
 
Hallo Maik,

nochmals vielen Dank für deine Antwort. Teile des HTML-Codes werden auf der Website automatisch generiert, daher habe ich keinen Einfluss. Ich könnte den Button innerhalb eines TD-Elements abbilden, allerdings komme ich erst nach dem abschliessenden </a> dazu, meinen eigenen HTML-Code einzufügen. Das würde so aussehen:

<td><a href="irgendwas" class="button">Text des Buttons</a><ab hier kann ich was eigenes einfügen></td>

Wie gesagt kann ich erst nach dem </a> meinen eigenen Code einfügen. Für die Klasse "button" könnte ich ein Hintergrundbild definieren, welches den linken Teil des Hintergrundbilds darstellt. (ähnlich des "sliding doors" Beispiels). Dann fehlt mir noch der rechte Teil des Buttons, dort möchte ich die rechte, abgerundete Ecke darstellen. Aber wie?

Über sachdienliche Hinweise freut sich Ortstarif!
 
Wenn du den Button aus zwei Grafikdateien zusammensetzt, könntest du das <td>-Element nutzen, sofern du darauf Zugriff hast.

mfg Maik
 
Dem <td>-Element den zweiten Teil des Buttonhintergrunds zuordnen.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück