Farbauswahl - Mehrfachauswahl in Formular mit Grafiken

[JaiMe]

Liebe Webgestalter-Kollegen,

ich bin noch Anfänger in Webprogramierung und habe jetzt ein Problem mit der Gestaltung eines Suchformulars.
Ich möchte eine Farbauswahl erstellen, ähnlich denen wenn man sich bei den bekannten Online-Versandhäusern beispielsweise Schuhe in einer bestimmten Farbe anzeigen lassen will.
Es soll in etwa so aussehen:
nur ohne die Checkboxen. Mein Ziel ist es, dass hier die jeweigen Pinsel, wie Buttons anklickbar sein sollen. Es soll aber nicht einfach abgesendet werden, sondern vielmehr auch als Mehrfachauswahl möglich sein.
Das sollte doch wohl möglich sein, aber mir ist bisher nur die Variante mit den Checkboxen eingefallen und die gefällt mir grafisch nicht und nimmt auch zu viel Platz ein.
Ich bin über alle Tipps dankbar, gern auch, wo ich mir so etwas anlesen kann.
Danke
JaiMe

[1UnitedPower]

Dazu kann ich dir den Einsatz von jQuery UI empfehlen.
Hier gibts gleich ein passendes Beispiel: http://jqueryui.com/demos/button/#checkbox

Grüße
-1UnitedPower

[Gunnar Bittersmann]

@@1UnitedPower:

nuqneH

Dazu kann ich dir den Einsatz von jQuery UI empfehlen.

Dazu kann ich nur empfehlen, erstmal nachzudenken und nicht vorschnell als Lösung „JavaScript“, „jQuery“ oder gar „jQuery-Plugin“ zu verkünden.

Schon gar nicht, wenn es um Darstellung geht.

Qapla'

[1UnitedPower]

Dazu kann ich nur empfehlen, erstmal nachzudenken und nicht vorschnell als Lösung „JavaScript“, „jQuery“ oder gar „jQuery-Plugin“ zu verkünden.

Und was spricht deiner Meinung nach dagegen? Klar mit Kanonen auf Spatzen schießen ist sicher ein Argument. Dafür stellt die API gewichtige Vorteile in Punkten Weiterverarbeitung der Daten und Cross-Browser-Kompatibilität zur Verfügung, was den Arbeitsaufwand drastisch reduziert.

[Gunnar Bittersmann]

@@1UnitedPower:

nuqneH

Und was spricht deiner Meinung nach dagegen?

Performanz (CSS ist schneller als JavaScript-Krücken)
Wartbarkeit (separation of concerns)

Qapla'

[JaiMe]

Hallo Leute,

ich verstehe leider grad gar nichts mehr. Und ich würde das tatsächlich sehr gerne rein mit CSS lösen. Aber leider funktioniert das eben nicht so schön wie erhofft.
Kann mir mal bitte jemand meinen Denkfehler erläutern?
JaiMe

[Gunnar Bittersmann]

@@JaiMe:

nuqneH

Das sollte doch wohl möglich sein, aber mir ist bisher nur die Variante mit den Checkboxen eingefallen

Die ist auch völlig richtig.

und die gefällt mir grafisch nicht und nimmt auch zu viel Platz ein.

Dann verstecke die Checkboxen mit CSS. Das http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=label-Element (So eins hast du doch, oder? Solltest du jedenfalls.) sorgt dafür, dass die (unsichtbare) Checkbox trotzdem anwählbar ist. Du musst deren Zustand natürlich dann anderweitig visualisieren.

Ich bin über alle Tipps dankbar, gern auch, wo ich mir so etwas anlesen kann.

Hier. (Nur halt nicht per ID selektieren.)

Qapla'

[JaiMe]

Hallo Gunnar,

ich war fleißig und habe meine komplette Suche erst einmal umgebaut auf Liste, denn ich hatte das noch als Tabelle.
Die Checkboxen habe ich auch versteckt und überall Label eingefügt. Ich gebe zu, das kannte ich noch nicht.

Dann verstecke die Checkboxen mit CSS. Das http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=label-Element (So eins hast du doch, oder? Solltest du jedenfalls.) sorgt dafür, dass die (unsichtbare) Checkbox trotzdem anwählbar ist. Du musst deren Zustand natürlich dann anderweitig visualisieren.

Aber was meinst Du hier mit dem letzten Satz?

Ich bin über alle Tipps dankbar, gern auch, wo ich mir so etwas anlesen kann.

Hier. (Nur halt nicht per ID selektieren.)

Und aus diesem Beitrag habe ich mir dann das entnommen:

<input id="myOnOffButton" type="checkbox"/>
<label for="myOnOffButton">myOnOffButton</label>

#myOnOffButton
{
        position: absolute;
        left: -666px;
}

#myOnOffButton+label
{
        background: #DDD;
        border: 3px outset;
        padding: 2px 5px;
}

#myOnOffButton:checked+label
{
        background: #CCC;
        border-style: inset;
}

(nur bei mir heißt es einfach #farbe)
Aber leider sieht das Ergebnis dann so aus:

Kannst Du mir verraten, wo mein Denkfehler ist?

Qapla'

LG JaiMe

[L(in)uchs]

<input id="myOnOffButton" type="checkbox"/>
<label for="myOnOffButton">myOnOffButton</label>

Ich beziehe Check- und Radioboxen immer in das Label ein:

<label for="myOnOffButton"><input id="myOnOffButton" type="checkbox"/> wähle hier</label>

Habe nie darüber nachgedacht, ob die Doppelbelegung der Boxen selbst ein Problem sein könnte. Bei Klick auf die Box selbst müssten ja zwei Events gefeuert werden, Box und Label.

L(in)uchs

[1UnitedPower]

Habe nie darüber nachgedacht, ob die Doppelbelegung der Boxen selbst ein Problem sein könnte. Bei Klick auf die Box selbst müssten ja zwei Events gefeuert werden, Box und Label.

Scheint laut Spezifikation kein Problem zu sein. Bei dieser Syntax kannst du sogar das for-Attribute weglassen.

[Gunnar Bittersmann]

@@L(in)uchs:

nuqneH

Ich beziehe Check- und Radioboxen immer in das Label ein:

Dann kanst du aber nicht das Label abhängig vom Zustand der Checkbox/des Radiobuttons stylen (Noch nicht.) http://forum.de.selfhtml.org/archiv/2012/2/t209064/#m1422484 f.

Außerdem: http://forum.de.selfhtml.org/archiv/2010/4/t196884/#m1319844

Qapla'

[Gunnar Bittersmann]

@@JaiMe:

nuqneH

(nur bei mir heißt es einfach #farbe)
Aber leider sieht das Ergebnis dann so aus:

Kannst Du mir verraten, wo mein Denkfehler ist?

Der eine Denkfehler könnte sein, dass du die ID "farbe" mehrfach vergibst. IDs müssen (wie die Bezeichnung schon aussagt) dokumentweit eindeutig sein.

Der andere Denkfehler ist, dass du glaubst, dass man aus einem Screenshot erkennen könnte, was du überhaupt machst, gescheige denn, was du falsch machst.

Qapla'

[JaiMe]

Der eine Denkfehler könnte sein, dass du die ID "farbe" mehrfach vergibst. IDs müssen (wie die Bezeichnung schon aussagt) dokumentweit eindeutig sein.

Ich hatte schon einzelne IDs vergeben, aber diese nicht einzeln formatiert. Aber selbst wenn ich das mache, dann verändert sich das Bild nicht.

Der andere Denkfehler ist, dass du glaubst, dass man aus einem Screenshot erkennen könnte, was du überhaupt machst, gescheige denn, was du falsch machst.

Ich dachte eigentlich nicht, dass Du aus einem Bild meinen Fehler erkennen kannst, deswegen hatte ich Dir ja den Codeteil und den CSS-Teil gepostet.
Aber ich kann es Dir gern auch nochmal posten. Das sieht bei mir so aus.

  
      <ul id="farbe">  
        <li>Farbe  
        <br>  
  
        <input type="checkbox" name="farbe" value="weiß&szlig;" id="weiss">  
        <label for="weiss"><img align="left" src="01_wei&szlig;%20Kopie.jpg" alt="wei&szlig;">  
          </li>  
          <li>  
          <input type="checkbox" name="farbe" value="grau" id="grau">  
          <label for="grau">  
          <img align="left" src="31_grau%20Kopie.jpg" alt="grau">                                              </li>  
...  
</ul>  

und

  
#farbe{padding-left:0em;  
       font-size: 1.6em;  
       line-height:1.5em;  
       }  
#farbe input{position: absolute;  
             left: -666px;  
            }  
#weiss+label, #grau+label, #schwarz label,  
#gruen label, #mint label, #waldgruen label,  
#nachtblau label, #himmelblau label, #lila label,  
#pink label, #schokobraun label, #weinrot label,  
#knallrot label, #orange label, #gelb label,  
#gold label, #bronze label, #silber label{   background: #DDD;  
        border: 3px outset;  
        padding: 2px 5px;}  
#weiss:checked+label, #grau:checked+label, #schwarz:checked label,  
#gruen:checked label, #mint:checked label, #waldgruen:checked label,  
#nachtblau:checked label, #himmelblau:checked label, #lila:checked label,  
#pink:checked label, #schokobraun:checked label, #weinrot:checked label,  
#knallrot:checked label, #orange:checked label, #gelb:checked label,  
#gold:checked label, #bronze:checked label, #silber:checked label{  
        background: #CCC;  
        border-style: inset;}  
#farbe img{padding:0.1em;}  

Kannst Du jetzt vielleicht den Fehler erkennen und mir weiterhelfen?

JaiMe

[Gunnar Bittersmann]

@@JaiMe:

nuqneH

Kannst Du jetzt vielleicht den Fehler erkennen und mir weiterhelfen?

Erkennst du ihn auch? '#weiss+label' vs. '#schwarz label'.

Ansonsten:

<ul id="farbe">
        <li>Farbe
        <br>

"Farbe" gehört wohl nicht mit in die Liste, sondern ist deren Überschrift. Und damit entfällt auch das br-Element.

<input type="checkbox" name="farbe" value="weiß&szlig;" id="weiss">
        <label for="weiss"><img align="left" src="01_wei&szlig;%20Kopie.jpg" alt="wei&szlig;">

Es gibt keinen Grund, ß als ß zu verstümmeln.

Qapla'

[JaiMe]

@@JaiMe:

nuqneH

Kannst Du jetzt vielleicht den Fehler erkennen und mir weiterhelfen?

Erkennst du ihn auch? '#weiss+label' vs. '#schwarz label'.

Sorry, mein Fehler. Das ist übrig geblieben, weil ich es mal mit dem "+" und mal ohne versucht hatte. Aber als ich den Screenshot gemacht hatte, waren alle drin und sind es jetzt auch wieder.

Ansonsten:

<ul id="farbe">
        <li>Farbe
        <br>

"Farbe" gehört wohl nicht mit in die Liste, sondern ist deren Überschrift. Und damit entfällt auch das br-Element.

Da in meiner Suche noch andere Sachen abgefragt werden, ist Farbe hier tatsächlich nur ein Listenenelement und keine Überschrift.

<input type="checkbox" name="farbe" value="weiß&szlig;" id="weiss">
        <label for="weiss"><img align="left" src="01_wei&szlig;%20Kopie.jpg" alt="wei&szlig;">

Es gibt keinen Grund, ß als ß zu verstümmeln.

Ich habe es so gelernt und es auch ohne versucht, dabei aber teilweise fehlerhafte Anzeigen erhalten. Ist es denn total falsch oder nur unnötig? Denn wenn es nicht falsch ist, dann würde ich es gern weiter beibehalten. Ist das okay?

Aber leider löst all diese Kritik nicht mein eigentliches Problem, dass die Label nicht auf den Buttons sind. Das Anklicken der Buttons funktioniert wie erhofft und bleibt auch markiert. Auch lässt es sich wieder abwählen. Aber ich hätte doch gern das Bild der jeweiligen Farbe AUF dem Button und nicht irgendwo daneben.

Also? Hilfe?

[Gunnar Bittersmann]

@@JaiMe:

nuqneH

"Farbe" gehört wohl nicht mit in die Liste, sondern ist deren Überschrift. Und damit entfällt auch das br-Element.

Da in meiner Suche noch andere Sachen abgefragt werden, ist Farbe hier tatsächlich nur ein Listenenelement und keine Überschrift.

Nein. Listenelemente einer Liste sollten in ihrer Struktur gleich sein. Wenn das erste die Überschrift für die gesamte Liste enthält und die anderen keine Überschrift, dann ist an der Struktur was faul.

Mögliches Markup:

<h2>Farbe</h2>  
<ul id="farbe">  
  <li>…</li>  
  <li>…</li>  
</ul>  
  
<h2>Größe</h2>  
<ul id="größe">  
  <li>…</li>  
  <li>…</li>  
</ul>

oder mit verschachtelten Listen:

<ul>  
  <li>Farbe  
    <ul id="farbe">  
      <li>…</li>  
      <li>…</li>  
    </ul>  
  </li>  
  
  <li>Größe  
    <ul id="größe">  
      <li>…</li>  
      <li>…</li>  
    </ul>  
  </li>  
</ul>

In HTML5 könnte man mit section-Elementen auch noch mehr Struktur reinbringen:

<section>  
  <section id="farbe">  
    <h2>Farbe</h2>  
    <ul id="farbe">  
      <li>…</li>  
      <li>…</li>  
    </ul>  
  </section>  
  
  <section id="größe">  
    <h2>Größe</h2>  
    <ul>  
      <li>…</li>  
      <li>…</li>  
    </ul>  
  </section>  
</section>

Es gibt keinen Grund, ß als ß zu verstümmeln.

Ich habe es so gelernt und es auch ohne versucht, dabei aber teilweise fehlerhafte Anzeigen erhalten.

Die verwendete, die im Dokument angegebene und die im HTTP-Header angegebene Zeichencodierung muss übereinstimmen.

Ist es denn total falsch oder nur unnötig?

Nicht falsch, aber unnötig. Unnötige Arbeit und unnötig schwer lesbarer Quelltext.

Denn wenn es nicht falsch ist, dann würde ich es gern weiter beibehalten. Ist das okay?

Es wäre wohl unnötige Arbeit, das jetzt bei bestehenden Seiten zu ändern. Bei zukünftigen Seiten solltest du keine Escapes, sondern die richtigen Zeichen verwenden. Und in UTF-8 speichern und die Zeichencodierung richtig angeben.

Also? Hilfe?

Lass mal deine Seite sehen. Deine Seite, keinen Screenshot.

Qapla'

[JaiMe]

So, ich habe selbst rausgefunden, was der Fehler war.

<ul id="farbe">
        <li>Farbe
        <br>

<input type="checkbox" name="farbe" value="wei&szlig;" id="weiss">
        <label for="weiss"><img align="left" src="01_wei&szlig;%20Kopie.jpg" alt="wei&szlig;">
          </li>
...
</ul>

> und  
> ~~~css
  

> #farbe{padding-left:0em;  
>        font-size: 1.6em;  
>        line-height:1.5em;  
>        }  
> #farbe input{position: absolute;  
>              left: -666px;  
>             }  
> #weiss+label img, ...{   background: #DDD;  
>         border: 3px outset;  
>         padding: 2px 5px;}  
> #weiss:checked+label img, ...{  
>         background: #CCC;  
>         border-style: inset;}  
> #farbe img{padding:0.1em;}  
> 

Es fehlte im CSS einfach nur die Zuweisung zum img.