Benötige Hilfe bei der Formatierung von Checkboxen

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute,

ich habe bereits im Internet nach der Formatierung von Checkboxen gesucht und auch einige gefunden. Jedoch haben auch alle so ihre Nachteile z.B. das es nicht beim IE8 unter Windows XP funktioniert , oder es muss CSS3 unterstützt werden.

Ich habe mich jetzt für die Sprite Variante entschieden und möchte diese auch verwenden. Meine Umsetzung funktioniert auch schon FAST perfekt, jedoch leider nur fast :-). Deshalb benötige ich Eure hilfe, denn ich habe schon sehr viel ausprobiert, jedoch hat dies alles nichts gebracht.

Hier ein Link zu meiner Seite:

http://www.gastgeber-deutschland.de/vermieterbereich/ansprechpartner.php

Ist die Checkbox angeklick sieht diese auch richtig formatiert aus, jedoch wenn die Checkbox nicht angeklickt ist werden alle 3 Bilder vom Sprite-Image dargestellt. Dies soll natürlich nicht so sein, sondern es soll nur die Checkbox ohne Haken dargestellt werden.

Hier meine CSS Code:

input[type=„checkbox“]
{
display: none;
overflow: hidden;
}

input[type=„checkbox“] + label
{
width: 30px;
height: 30px;
display: block;
background-image: url(…/bilder/checkbox.png);
background-position: 0px 0px;
background-repeat: no-repeat;
cursor: pointer;
padding-left: 100px;
}

input[type=„checkbox“]:checked + label
{
background-position: -60px 0px;
}

Hier der HTML Code:

deutsch

Es wäre schön wenn mir einer helfen könnte um dies Problem endlich zu lösen, so das ich weitermachen kann.

2

Das ist eine JavaScript-Aufgabe.

3

Positioniere die einzelnen Bilder in deinem Sprite untereinander und passe die background-position nochmal an. Dann klappt das.

4

Ich werde es mal ausprobieren. Aber warum funktioniert es denn nicht vertikal?

5

Ich versuche das mal erklären:
Du hast ein „padding-left: 100px;“ auf dem Label, damit der Text nicht über der Checkbox klebt.
Breite eines Elements = festgelegte Breite + margin + border + padding
Bedeutet bei dir: 30px + 0 + 0 + 100px = 130px

Da das Bild vom angehakten Zustand am Ende des Sprites ist und somit erst bei Position -60px beginnt, wird alles vorher abgeschnitten und rechts daneben kommt eben nichts mehr in dem Sprite.
Im ungeklickten Zustand beginnt das Hintergrundbild bei Position 0px und zeigt alles an bis zur 130px Breite.

Schwer zu erklären :slight_smile:

6

Danke für den Hinweis. Ich werde es leider jetzt nicht ausprobieren können da ich gleich Besuch bekomme. Aber Ich werde es noch heute ausprobieren. Noch mal vielen Dank darauf wäre ich nie gekommen :slight_smile:

7

Mit dem gedrehten Sprite funktioniert alles bis auf das ausrichten der Schrift. Dies habe ich noch nicht geschaft. Ich habe die Checkbox in einer Tabellezeile platziert.

http://www.gastgeber-deutschland.de/vermieterbereich/ansprechpartner.php

8

padding-top: 40px; raus und line-height: 30px; rein bei input[type=„checkbox“] + label :slight_smile:

Tabellen sind zur Formatierung von Formularen übrigens nicht gedacht. Die W3C sagt:

Each part of a form is considered a paragraph, and is typically separated from other parts using p elements.

Aber das ist ein anderes Thema :wink:

9

Unglaublich es funktioniert :slight_smile: Vielen Dank für die sehr gute und hilfreiche Unterstützung.

10

Wie kann ich denn die Farbe von dem Label ändern. Color funktioniert leider nicht.

11

Doch, du hast nur die Raute in der Farbangabe vergessen :wink: (#ffffff)

12

Wie peinlich :slight_smile:

Danke

13

Ein Problem habe ich jedoch noch. Ich habe eine zweite Checkbox hinzugefügt. Jedoch funktioniert dies nicht richt. Wenn ich zuerst auf die 1. Checkbox klick dann erscheint der Haken bei der 1. Checkbox so wie es sein soll. Klicke ich jedoch auf die 2. Checkbox, dann wird der Haken bei der 1. Checkbox wieder entfernt.

Hier meine HTML Quellcode:

deutschenglisch

Hier ein Link zu meiner Seite:

http://www.gastgeber-deutschland.de/vermieterbereich/ansprechpartner.php

14

„ID“- und „for“-Attribute zusammengehöriger Label- und Input-Elemente dürfen nicht gleich sein, wie andere Label- und Input-Elemente :slight_smile:

15

Ich dachte immer das das for-Attribute sich auch den Namen der Checkbox bezieht. Daher wollte ich erst keine ID vergeben. Ich wuste nicht das das for-Attribute an die ID der Checkbox gekoppelt ist. Ich habe nun zwei IDs vergeben, die ich jedoch nicht per CSS formatiere

deutschenglisch

Hier der Link:
http://www.gastgeber-deutschland.de/vermieterbereich/ansprechpartner.php

ich bin sehr zufrieden mit der Lösung noch mal Danke.

16

Diese Checkboxen machen mich noch fertig. Ich habe auf einer anderen Seite eine Checkbox mit einer längeren Schrift hinzugefügt. Doch da macht er jetzt immer Was ist denn da das Problem?

Hier der Link zur Seite:

http://www.gastgeber-deutschland.de/vermieter_registrierung.php

Hier wird doch die gleich formatierung angewendet.

Ja, ich akzeptiere die Allgemeinen Geschäftsbedingungen (AGB)

Hier der CSS Code:

input[type=„checkbox“]
{
display: none;
overflow: hidden;
}

input[type=„checkbox“] + label
{
width: 24px;
height: 24px;
display:inline-block;
background-image: url(…/bilder/checkbox.png);
background-position: 0px 0px;
background-repeat: no-repeat;
cursor: pointer;
padding: 0px 40px 0px 30px;
line-height: 26px;

font-family: Arial, Verdana, Sans-Serif;
font-size: 12px;
font-weight: bold;
color: #ffffff;
}

input[type=„checkbox“]:checked + label
{
background-position: 0px -48px;
}

17

Das liegt daran, dass Du dem label nur eine Breite von 24 Pixel gibst. Ändere das z.B. auf „auto“, dann sollte es klappen.

Hinweis: Bitte verwende Code-Tags wenn Du im Forum Quellcode zeigst.

18

Kannst Du eigentlich auch ein gutes CSS3 Buch empfehlen?

19

Wenn ich width auf auto stelle dann wird zwar der Text der AGB richtig angezeigt, jedoch sind die 2 Checkboxen in den anderen Beispiel (Ansprechpartner) dann nicht mehr nebeneinander sondern untereinander.

20

Scheinst es ja hinbekommen zu haben? Bei mir sieht es ok aus.

Und nein, ich empfehle keine IT-Bücher da deren Inhalte schon nach wenigen Wochen veraltet sind - schade ums Papier.