Bräuchte hilfe bei "buttons" auf meiner Website

iCenTeX

Hey People,

ich arbeite an einer Website und habe auf einer anderen etwas gesehen was ich gut fand, und nun möchte ich dies auf meiner auch haben. Eine Information am Rande, ich arbeite mir Jimdo wo nicht jeder code funktioniert speziell <style> nicht (glaub ich). Also hätte da den code von der Website herauskopiert falls das jemanden hilft. Achja es ist auch javascript dabei :-D.

Ich selber bin ein noob im scripten und programmieren, kann nur basics.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">


<head>
  <!--meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content=""-->


  <title>Service und Zubehör — Autohaus Grufeneder GmbH</title>
  <link rel="icon" type="image/png" href="/++resource++poi.plonetheme.hdlint/favicons/favicon.png" />
  <link rel="icon" type="image/png" href="/++resource++poi.plonetheme.hdlint/favicons/favicon-16x16.png" sizes="16x16" />
  <link rel="icon" type="image/png" href="/++resource++poi.plonetheme.hdlint/favicons/favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="/++resource++poi.plonetheme.hdlint/favicons/favicon-48x48.png" sizes="48x48" />
  <link rel="icon" type="image/png" href="/++resource++poi.plonetheme.hdlint/favicons/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/png" href="/++resource++poi.plonetheme.hdlint/favicons/favicon-160x160.png" sizes="160x160" />


  <meta name="msapplication-TileImage" content="/++resource++poi.plonetheme.hdlint/favicons/mstile-144x144.png" />


  <link rel="apple-touch-icon" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-60x60.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-180x180.png" />
  <link rel="apple-touch-icon" sizes="152x152" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-152x152.png" />
  <link rel="apple-touch-icon" sizes="144x144" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-144x144.png" />
  <link rel="apple-touch-icon" sizes="120x120" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-120x120.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-114x114.png" />
  <link rel="apple-touch-icon" sizes="76x76" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-76x76.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="57x57" href="/++resource++poi.plonetheme.hdlint/favicons/apple-touch-icon-57x57.png" />


  


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Plone - http://plone.org" /><link href="++resource++poi.templates/css/pace-theme-minimal.css" rel="stylesheet" /><link rel="stylesheet" type="text/css" href="https://www.autohaus-grufeneder.at/++plone++production/++unique++2018-09-17T13:21:43.235624/default.css" data-bundle="production" /><link rel="stylesheet" type="text/css" href="https://www.autohaus-grufeneder.at/++theme++poi.plonetheme.hdlint/plonetheme_hi.min.css?v=1" data-bundle="diazo" /><link rel="search" href="https://www.autohaus-grufeneder.at/@@search" title="Website durchsuchen" /><link rel="home" href="https://www.autohaus-grufeneder.at" title="Front page" /><link rel="contents" href="https://www.autohaus-grufeneder.at/sitemap" title="Übersicht" /><link rel="canonical" href="https://www.autohaus-grufeneder.at/service" /><script src="++resource++poi.templates/js/pace.min.js"></script><script src="++resource++poi.templates/js/promise.min.js"></script><script type="text/javascript">PORTAL_URL = 'https://www.autohaus-grufeneder.at';</script><script type="text/javascript" src="https://www.autohaus-grufeneder.at/++plone++production/++unique++2018-09-17T13:21:43.235624/default.js" data-bundle="production"></script><script type="text/javascript" src="https://www.autohaus-grufeneder.at/++resource++poi.templates/js_min/main-built.min.js?version=2018-09-17%2013%3A19%3A20.661564" data-bundle="poi-template-bundle"></script></head>




	
<div>
  <section class="benefits">
    <h2>Unsere Leistungen</h2>
    <div data-syncing-main-id="bnr_sync_326" class="">
      <div data-syncing-id="bnr_sync_326" class="element syncing-element active">

        <div class="tab-content">
          <div class="benefits-list">

              <dl class="see tal:attributes">
                <dt class="type-2">
                  <span>Reifenangebot</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Reifenangebot</h3>
                    <div class="text content-element">Top Preise - Top Angebote. Wir haben eine große Auswahl von Reifenmarken auf Lager! Depotmöglichkeit für Sommer und Winterräder.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-3">
                  <span>Ersatzwagen</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Ersatzwagen</h3>
                    <div class="text content-element">Wir verfügen über eine große Ersatzwagenflotte, damit Sie während der Dauer der Reparatur Ihres Fahrzeuges mobil bleiben.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-7">
                  <span>Kindereinrichtungen</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Kindereinrichtungen</h3>
                    <div class="text content-element">In den Kundenbereichen befinden sich Kinderspieltische mit Legobausteinen,usw.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-8">
                  <span>Café</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Café</h3>
                    <div class="text content-element">Während Ihres Aufenthaltes verkürzen wir Ihre Wartezeit mit Erfrischungsgetränken und Kaffee.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-10">
                  <span>Hol &amp; Bringservice</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Hol &amp; Bringservice</h3>
                    <div class="text content-element">Wir holen Ihr Fahrzeug von zuhause oder von Ihrer Arbeitsstätte und bringen es nach dem Service bzw. der Reparatur wieder zurück.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-11">
                  <span>Oldtimer</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Oldtimer</h3>
                    <div class="text content-element">Wir kümmern uns auch um Ihren Oldtimer. Mit unseren Mitarbeitern die damit bestens vertraut sind, ist Ihr "Oldie" in besten Händen.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-15">
                  <span>Nachtannahme</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Nachtannahme</h3>
                    <div class="text content-element">Serviceannahme und Wagenabholung rund um die Uhr auch an Sonn- und Feiertagen außerhalb der üblichen Öffnungzeiten durch unsere 24 Stunden-Annahme.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-17">
                  <span>Schlepphilfe</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Schlepphilfe</h3>
                    <div class="text content-element">Neben dem österreichweiten Schlepphilfe bieten wir einen eigenen Schlepphilfeservice mit Soforthilfe (Treibstoff, Batterie, Startschwierigkeiten) rund um die Uhr auch an Sonn- und Feiertagen unter der Telefonnr.: 01/86 666 !!</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-19">
                  <span>Zertifizierung</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Zertifizierung</h3>
                    <div class="text content-element">Wir sind nach ISO 9001:2000 zertifiziert !!!</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-20">
                  <span>Radio, CD, Soundsysteme</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Radio, CD, Soundsysteme</h3>
                    <div class="text content-element">Für Ihr Fahrzeug finden Sie bei uns sicher auch das richtige Radio!</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-25">
                  <span>Telefonische Reparaturannahme</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Telefonische Reparaturannahme</h3>
                    <div class="text content-element">Wir vereinbaren mit Ihnen telefonisch einen Reparaturtermin. Die Ersatzteile werden rechtzeitig geliefert, Ihre Wartezeit bei der Fahrzeugübergabe wird stark gekürzt, da alles vorbereitet ist.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-27">
                  <span>Finanzierungsberatung</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Finanzierungsberatung</h3>
                    <div class="text content-element">Über die Porsche Bank bieten wir Ihnen beste Angebote rund um Leasing und Kredit.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-28">
                  <span>Schnellservice</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Schnellservice</h3>
                    <div class="text content-element">Arbeiten mit einem Arbeitsaufwand unter 1 Stunde führen wir für Sie so rasch wie möglich durch, zB.: Ölwechsel, Bremsen, Reifen, Auspuff Kleinreparaturen schnell und günstig.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-29">
                  <span>§ 57a Prüfstelle</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>§ 57a Prüfstelle</h3>
                    <div class="text content-element">Wir sind autorisiert die jährliche Begutachtung nach §57a für alle Marken durchzuführen.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-30">
                  <span>Räder / Reifenlagerung</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Räder / Reifenlagerung</h3>
                    <div class="text content-element">Räder schleppen ist schwer, aber nicht für Sie. Um Ihnen unnötige Mühen zu ersparen, übernehmen wir gerne die Lagerung Ihrer Sommer- bzw. Ihrer Winterräder zum Selbstkostenpreis.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-31">
                  <span>Zubehör-Shop</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Zubehör-Shop</h3>
                    <div class="text content-element">Für jeden etwas! Wir haben für Sie jederzeit eine große Auswahl von Artikeln aus den Bereichen: Sicherheit, Komfort, Sport, Optik, Bekleidung, Diebstahlschutz und vieles mehr.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-33">
                  <span>Klimaanlagen-Stützpunkt</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Klimaanlagen-Stützpunkt</h3>
                    <div class="text content-element">Instandsetzung, Reparatur, Wartung. Ihre Klimaanlage ist bei uns in besten Händen. So bewahren Sie stets kühlen Kopf.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-34">
                  <span>Spenglerei</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Spenglerei</h3>
                    <div class="text content-element">In unserer hauseigenen Spenglerei mit Rahmenrichtbank bringen wir Ihr Fahrzeug wieder in  Originalzustand. Vertrauen Sie auf höchste Reparaturqualität, volle Garantie und faire Preise.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-35">
                  <span>Lackiererei</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Lackiererei</h3>
                    <div class="text content-element">In unserer modernst eingerichteten Lackiererei verarbeiten wir ausschließlich hochwertige und umweltfreundliche Wasserlacke. Unser hochqualifiziertes Fachpersonal garantiert Ihnen Ausbesserungsarbeiten in höchster Reparaturqualität mit voller Garantie.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-37">
                  <span>Fahrwerksumbauten</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Fahrwerksumbauten</h3>
                    <div class="text content-element">Wir machen Ihr Auto noch attraktiver mit Tieferlegungen und Verbreiterungen.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-39">
                  <span>Tuning/Motor</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Tuning/Motor</h3>
                    <div class="text content-element">Als offizieller Partner von Abt-Tuning, haben Sie bei uns Möglichkeit Ihr Fahrzeug nach Ihren Wünschen zu gestalten. Vom Tieferlegen bis hin zum Motortuning bieten wir alle Varianten an. Sie wünschen sich mehr Leistung bei Ihrem Auto? Sie finden bei uns ein umfassendes Motortuning-Programm. Ihr Motor gewinnt 30 PS und mehr an Leistung. Natürlich bleiben alle Garantieansprüche des Fahrzeuges erhalten.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-41">
                  <span>Fahrzeugdirektannahme</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Fahrzeugdirektannahme</h3>
                    <div class="text content-element">Besprechen Sie Ihre Wünsche mit unserem Kundendienstberater direkt an Ihrem Auto. Wir beraten. Sie entscheiden.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-43">
                  <span>Glasreparatur</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Glasreparatur</h3>
                    <div class="text content-element">Wir reparieren professionell Steinschläge. Gerne machen wir Ihnen ein Angebot oder verrechnen die Reparatur direkt mit Ihrer Kasko-Versicherung.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-44">
                  <span>Ersatzmobil</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Ersatzmobil</h3>
                    <div class="text content-element">Wir haben die richtige Lösung für den Weg zu Ihrer Arbeitsstätte und wieder zurück. – Vom Ersatzwagen zum Selbstkostenpreis, bis hin zum bequemen Hol- und Bringservice.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-45">
                  <span>Pflege</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Pflege</h3>
                    <div class="text content-element">Tun Sie Ihrem Fahrzeug etwas Gutes. Hitze, Kälte, Salz und Schmutz machen den Lack stumpf und matt. Regelmäßige Pflege sorgt für Werterhaltung und glänzende Auftritte.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-46">
                  <span>Bankomatkassa</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Bankomatkassa</h3>
                    <div class="text content-element">Bei uns können Sie unkompliziert mit Ihrer Bankomat Karte zahlen.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-52">
                  <span>Altfahrzeugrücknahme</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Altfahrzeugrücknahme</h3>
                    <div class="text content-element">Bei Kauf eines Neu- oder Gebrauchtwagens können alte Fahrzeuge kostenlos zurückgeben werden. In allen anderen Fällen macht Ihnen unser Betrieb ein ein faires, kostengünstiges Angebot für die Fahrzeugrücknahme.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-53">
                  <span>Kreditkarte</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Kreditkarte</h3>
                    <div class="text content-element">Kein Bargeld zur Hand. Kein Problem! Sie können bei uns ohne Probleme mit allen gängigen Kreditkarten Bargeldlos bezahlen.</div>
                  </div>
                </dd>
              </dl>
              <dl class="see tal:attributes">
                <dt class="type-57">
                  <span>Volkswagen e-mobility</span>
                </dt>
                <dd style="display:none;">
                  <div class="benefits-detail">
                    <h3>Volkswagen e-mobility</h3>
                    <div class="text content-element">Auf den ersten Blick gleicht ein elektrischer Volkswagen dem herkömmlichen Benzin- oder Dieselmodell. Doch spätestens beim Fahren wird der Unterschied deutlich. Geruch- und geräuschlos findet der technologische Wandel vor allem unter der Motorhaube statt.</div>
                  </div>
                </dd>
              </dl>


          </div>
        </div>
      </div>
    </div>
  </section>
</div>




</html>

Alles anzeigen

basti1012

Was willst du den davon genau haben ?
Alle 24 Butttons ,bzw Linnks mit den kleinen Bildern darinne,oder nur bestimmte ?

Du sagtest du hast den Code Kopiert. Hast du den Kopierten Code mal bei dir auf der seite ausprobiert, und wenn ja was ist passiert ?

EDIT: Habe mal gerade dein Code getestet. Der fuktioniert doch . Sieht genau so aus wie auf den Bild. Jetzt mußt du mal erklären was du genau willst weil verstehe das gerade nicht

iCenTeX

Genau ich weiß nich nicht wie viele buttons ich haben will nur mal einen mit dem css etc und dann kopiere ich die buttons nach der Reihe z.b.
Und wenn ich den code hineinkopiere ist zwar alles da, aber ich kann den code nicht editieren denn das css ist 240 word seiten lang und da meine Website komplett weiß ist, sind die buttons Rechteckig grau eingerahmt was auch komplett blöd aussieht

Arne Drews

Bitte Code hier einfügen und nicht als Anhang.

basti1012

Also die ganze Css Datei durchsuchen nach den Original angaben habe ich auch keine lust zu
Ich habe mal einen Button nachgebaut damit du weißt wie es geht
Nur ist die frage wie du das bei deinen Jimdo eingeben mußt.

Ich poste dir mal den Code wie man das auf einer normalen webseite einfügen würde

HTML

<!DOCTYPE html><htmlang="de"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1"><title>Reifenangebot Bild</title><style>  body{  background:grey;}div{  margin:0 auto;  height:153px;  width:266px;  border:2px solid white;  background:lightgrey;}#out{  margin-left:calc(50% - 25px);}#in{    background-image: url(https://www.autohaus-grufeneder.at/++theme++poi.plonetheme.hdlint/++resource++poi.plonetheme.hdlint/sprites/icons_leistungen.svg);    background-position: 0px -93px;    background-size: 460px 740px;    display: inline-block;  margin-top:30px;  height:40px;  width:50px;}div:hover{    background:#f93;}div:hover >span #in{    background-position: 0px -93px;    background-size: 460px 646px;}div:hover > h3{  color:white;}h3{  text-align:center;  color:black;  font-weight:500;}</style>  </head>  <body><div> <span id="out">  <span id="in"></span></span><h3>Reifenangebot</h3></div></body></html>

Wenn du Inline styls brauchen solltes( Was Mist wäre ) mußt du die style angaben mit in den Element reinschreiben ( style="" ).
Fals du es nicht hin bekommst dann meld dich

iCenTeX

Hi basti,

Dankeschön für dieses script!
Nun da ich aber es nicht vollkommen kopieren will, währe es möglich das orange zu ändern sobald der Mauszeiger darauf ist.
Und es sollte sich ein Text ausklappen durch das klicken.;-)

Edit: z.b onlick auf den button der den Text sicherbar macht, denn ich finde nichts, wo der text sich mit einer animation darunter aufklappt

basti1012

Das die orange farbe weg geht oder nee andere farbe das solltest du ja selber wechseln können. Wie meinst du den das mit den Text einblenden ? Da gibt es soviele animationen wie man das machen könnte.
Zb so.
https://basti1012.bplaced.net/index.php?ordn…_meiner_Website
Ist zwar nicht perfekt ,aber das soll zeigen wie man es machen könnte und das man das ohne Javascript machen kann.

Wenn du genau weißt wie es aussehen soll dann beschreibe es mal so gut wie möglich , dann kann man da mal was machen.

iCenTeX

Hab da auch was gefunden mit dem aufklappen nur hat das extrem viel js. Und jimdo nimmt kein <style> und ich weiß nicht ob es js auch nimmt. Also css und html muss in einem sein ohne <style>

Edit v1 : <style> funkitoniert und wenn ich auf jimdo ein element html erstelle den code hineinkopiere von deinem Beipsiel https://codepen.io/basti1012/pen/oaXGNO und das css in <style> funktioniert alles außer wenn ich darauf klicke passiert nichts
Edit v2: nun sieht es so aus, wenn ich es im <style> mache, jimdo verwirrt mich xD

basti1012

Hast du das schon online gestellt ? Oder kannst du das mal online stellen ? Weil so kann ich jetzt nicht helfen. Wenn bei jimdo <style></style> Funktioniert , was du einfach testen kannst

Code

<style>
*{
background:red;
}
</style>

( Jetzt sollte fast alles rot sein , dann geht dein <style>auch )
Dann sollte der Button von mir auch gehen .
Ich weiß nicht ob bei Jimdo irgendwas anders ist ,vieleicht funktioniert da der Checkbox hack nicht oder transition. Ansonsten ist das nur Css ohne Javascript und sollte somit eigentlich funktionieren

iCenTeX

Hab das css nun auf eine cloud hochgeladen und im jimdo header einfach den style verlinkt, der style funktioniert und die farbe auch, nur klicken kann ich ihn nicht.
https://testadi4710.jimdo.com/

basti1012

Du hast ja auch einen ganz anderen Code wie ich genommen. <label> Fehlt , die ganzen css anweisungen mit :cehecked fehlen ,zumindest kann ich sie nicht finden. Das kann so nicht gehen. Kopiere doch mal meinen code 1 zu 1 da rein und teste dann das mal , dann sollte das auch gehen.

Gerade <label> wird hier gebraucht damit der checkbox hack geht. Vieleicht gehtes auch anders aber habe ich noch nie probiert. Nur in meinen Code wird er gebraucht und das fehlt bei dir komplett. Die Css anweisungen mit :checked sagen aus ,das bei gescheckter ( angeklickter ) checkbox das untere Bild rauskommen soll. Man könnte das auch mit Javascript machen doch wozu wenn es auch ohne geht. Also probier das mal aus und kopiere den ganzen Codeda rein. Jeder Code hat da ein sinn. Unbrauchbaren Code gibt es in der Variante gerade nicht und gerade das mit der Checkbox ist hier wichtig

Tags