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

Benötige Hilfe bei der Formatierung von Checkboxen

P

pimbolie1979

Mitglied
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:

<input type="checkbox" name="sprache_deutsch" id="checkbox" value="checkbox"><label for="checkbox">deutsch</label>

Es wäre schön wenn mir einer helfen könnte um dies Problem endlich zu lösen, so das ich weitermachen kann.
 
Werbung:
Positioniere die einzelnen Bilder in deinem Sprite untereinander und passe die background-position nochmal an. Dann klappt das.
 
Werbung:
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 :)
 
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 :-)
 
Werbung:
padding-top: 40px; raus und line-height: 30px; rein bei input[type="checkbox"] + label :)

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.
Zum Vergrößern anklicken....

Aber das ist ein anderes Thema ;)
 
Werbung:
Werbung:
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:

<input type="checkbox" name="deutsch" id="checkbox"><label for="checkbox">deutsch</label><input type="checkbox" name="englisch" id="checkbox"><label for="checkbox">englisch</label>

Hier ein Link zu meiner Seite:

http://www.gastgeber-deutschland.de/vermieterbereich/ansprechpartner.php
 
„ID“- und „for“-Attribute zusammengehöriger Label- und Input-Elemente dürfen nicht gleich sein, wie andere Label- und Input-Elemente :)
 
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

<input type="checkbox" name="deutsch" id="deutsch"><label for="deutsch">deutsch</label><input type="checkbox" name="englisch" id="englisch"><label for="englisch">englisch</label>

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

ich bin sehr zufrieden mit der Lösung noch mal Danke.
 
Werbung:
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.

<input type="checkbox" name="agb" id="agb" value="1"><label for="agb">Ja, ich akzeptiere die Allgemeinen Gesch&auml;ftsbedingungen (AGB)</label>


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;
}
 
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.
 
Werbung:
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.
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben