CSS-Problem bei Anzeige von Input und Details nebeneinander

[Rolf B]

Hallo Steffen,

unabhängig vom konkreten Problem ist dein HTML falsch. Ein Label-Element mit click-Handler ist nicht korrekt, das muss ein Button werden. Wie willst Du sonst mit Tastatur da ran? Und was soll ein User mit Screenreader damit anfangen?

Dein Logo möchte mit ziemlicher Sicherheit in ein <header> Element, nicht in ein <div id="logo">.

<div id="header">
  <input class="checkbox" id="selectall" type="image" src="images/unselected.png" onClick="selectall(this);" />
  Alle Dateien oder Verzeichnisse
</div>

Ob hier eine id wie "header" sinnvoll ist, sei dahingestellt, jedenfalls ist ein input type="image" dazu da, einen grafischen "Submit" Button für ein Form zu erzeugen. Beim Submit werden dann die Koordinaten gesendet, an die man im Image geklickt hat.

Wenn Du Checkboxen willst, dann nimm auch welche. Wenn Du ihnen ein Label zuordnest, kannst Du auf Box und Text klicken und die Checkbox reagiert.

Wenn Dir das Aussehen der Checkbox auf deinem Gerät nicht gefällt, ja, hm, aber denk dran, dass es auch andere Betriebssysteme gibt, die eine Checkbox ggf. anders darstellen. User sind an die spezifische Darstellung ihres Betriebssystems gewöhnt und können verwirrt sein, wenn Du ihnen andere Checkboxen zeigst.

Eine Alternative ist eine visuell versteckte Checkbox und eine Darstellung des Checked-Zustandes im Label (über :checked Pseudoklasse im CSS). Aber die Checkbox als HTML Element muss vorhanden sein.

Rolf