• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Was mache ich falsch? (ID und CLASS)

Hallo-Welt

Hallo-Welt

Aktives Mitglied
Hallo Community,

Ich bin gerade am verzweifeln. Ich hab nämlich die ID im HTML- wie auch im CSS-Text in CLASS umgewandelt, und trotzdem funktioniert nur die erste Variante.

Hier ist die Variante die Funktioniert:
HTML: 
<label for="clickcom"><p>Click me</p></label>
<input type="checkbox" id="clickcom" style="display: none;" />
<div class="hid-container">
  <p>TEST</p>
</div>
Code: 
.hid-container {
    height: 20px;
    overflow: hidden;
    margin-left: 2px;
    margin-bottom: 2px;
}

.clickcom ~ .hid-container {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}

#clickcom:checked ~.hid-container {
    height: auto;
      height: 230px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}

Und hier die, die ich umgeändert habe und die nicht funktioniert:

HTML: 
<label for="clickcom"><p>Click me</p></label>
<input type="checkbox" class="clickcom" style="display: none;" />
<div class="hid-container">
  <p>TEST</p>
</div>
Code: 
.hid-container {
    height: 20px;
    overflow: hidden;
    margin-left: 2px;
    margin-bottom: 2px;
}

.clickcom ~ .hid-container {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}

.clickcom:checked ~.hid-container {
    height: auto;
      height: 230px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}

Was ist falsch daran? Habe ich etwas übersehen? Ich hab ja die Raute für die ID in einen Punkt für die CLASS umgewandelt.
 
Das liegt daran, dass im for-Attribut des Labels die Id des dazugehörigen Inputs stehen muss. Nun hat dein Input aber keine Id mehr, und ein Klick aufs Label bewirkt nichts mehr.
 
Und wie kann ich diesen Fehler denn beheben? Ich meine, ich kann ja nicht mehrere identische ID's in einer Seite unterbringen. Das ist nämlich auch der Grund für den Wechsel von ID zu CLASS, weil ich diesen HTLM-Script mehrmals in einer Seite benutze. Gibt es villeicht eine Alternative hierfür, oder so?
 
Na ich dachte, man dürfe nicht zweimal die selbe ID in einem Dokument benutzen, weil eine ID ja einmalig ist. Ich muss diesen Codeschnipsel aber mehrmals benutzen, weil er später öfters von PHP in dem selben Dokument reneriert werden soll.

Gibt es denn keine Alternativmethode für mein Vorhabe, anstatt dieses "for" zu schreiben. Es müsste doch auch irgendeinen Befehl geben, der auf die Klasse verweist, oder?
 
Oh danke, aber das würde ja dann heißen, dass ich im CSS-Dokument den selben Code sehr oft wiederholen müsste.

Wenn das wirklich nur so geht hätte ich selbst eine Idee und mich würde eure Meinung danzu interessieren. Denn ich könnte ja eigentlich dann auch mittels PHP einen zufälligen Wert für die ID generieren lassen, der dann ebenfalls in eine abgesonderte CSS-Datei eingefügt wird. Diesen Wert könnte ich dann bei Erstellen der Funktion von dem Script automatisch abspeichern lassen. Also dann hätte ich z.B.
HTML: 
id="kzG52hH"
und im CSS-Dokument ebenfalls
Code: 
.hid-container {
    height: 20px;
    overflow: hidden;
    margin-left: 2px;
    margin-bottom: 2px;
}
.kzG52hH ~ .hid-container {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
.kzG52hH:checked ~.hid-container {
    height: auto;
      height: 230px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
Wenn ich das so machen würde, müsste ich den ersten CSS-Teil ja eigentlich nicht generieren lassen. Das heißt, meinem Verständniss nach, würde es reichen einen Wert generieren zu lassen, und diesen für die ID, den FOR und für die beiden letzten CSS-Teile zu verwenden, oder?
Was meint ihr ist dies eine gute Lösung auf das Problem und würde das so überhaupt funktionieren?
 
Wie @Tronjer schon angedeutet hat: Du bleibst bei deinem Ansatz, die CSS-Deklarationen auf die Klasse zu legen (Also dein 2. Codebeispiel im ersten Post). Dann vergibts du eindeutige IDs für jede Checkbox und das for-Attribut des dazugehörigen Labels. Diese IDs werden dann im CSS nicht verwendet.
Du müsstest allerdings deine Konstruktionen jeweils in irgendeinen Wrapper packen (beispw. ein <div> drum herum), da du sonst mit dem ~-Selector (Sibling-Selector) auch versteckte Container ansprichst, die sich weiter unten im Dokument befinden.
 
Hmm... also noch mal zusammengefasst:
Wenn ich im CSS ansatatt
Code: 
.hid-container {
    height: 20px;
    overflow: hidden;
    margin-left: 2px;
    margin-bottom: 2px;
}
.clickcom ~ .hid-container {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
.clickcom:checked ~.hid-container {
    height: auto;
      height: 230px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
das hier
Code: 
.hid-container {
  height: 20px;
  overflow: hidden;
  margin-left: 2px;
  margin-bottom: 2px;
}
label[id1='clickcom'] ~ .hid-container {
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
label[id1='clickcom']:checked ~.hid-container {
  height: auto;
  height: 230px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
verwenden würde, müsste es auch so gehen, oder wie ist das zu versetehen?
Denn eigentlich müsste ich ja dann id1, id2, id3 etc. verwenden, oder habe ich das jetzt falsch verstanden?
 
Nein. Die Variante mit den IDs würde in etwa so lauten:

Code: 
input[id*='clickcom'] ~ .hid-container {...}
input[id*='clickcom'] ~ .hid-container {...}

Dann sollten deine IDs dem Schema "clickcom_1", "clickcom_2" bis "clickcom_n" entsprechen. Da dies die IDs der Checkboxen sind, wäre "label" hier natürlich falsch.

Zur Erklärung: der Selektor [id*='clickcom'] spricht alle Elemente an, deren ID den String "clickcom" beinhalten.
 
Nein, das verstehe ich nicht. Da muss ich zu dumm für sein.
Naja, ich bleibe dann glaube ich bei der Lösung mit den zufällig generierten ID's. Trotzdem Danke für eure Hilfe.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben