[Opgelost] plaats van checkbox in formulier (CSS)

[rayring]

Ik probeer de checkboxen gebruikt in onderstaand formulier voor de betreffende regels te krijgen.

http://goo.gl/X36Af

Heb al verschillende zaken in CSS aangepast maar krijg het niet voor elkaar wie heeft de gouden tip...

Hieronder mijn form CSS:

Code: Select all

/*contact form*/
div.column {
   float: left;
   width: 300px;
   padding: 5px;
   clear: left;

}

div.columnclear {
   margin-left: 320px;
   padding: 5px;
   width: 300px;
}

div.radio {
   height: auto;
   padding-bottom: 45px;
}

div.radio div {
   float: left;
}

label {
   display: block;
   padding: 1px;
}

.radio label {
   width: 50px;
}

input {
    width: 150px;
}

input[type="radio"] {
   width: 40px;
   float: left;
   height: auto;
}

input[type="checkbox"] {
   width: auto;
}

.test {
   height: 10px;
}

.captcha {
    height: 120px;
    padding: 4px;
    width: 235px;
}

/*eind contact form*/

[Rolf]

Probeer eens met http://www.cmscanbesimple.org/blog/styling-forms

grt. Rolf

[rayring]

Probeer eens met http://www.cmscanbesimple.org/blog/styling-forms

grt. Rolf

Die had ik inderdaad gevonden en heb geprobeerd te stylen maar zonder resultaat..

[Rolf]

Mijn ervaring met (formulier) stylen is dat je snel te veel styled... Verwijder direct de standaard FormBuilder stylesheet want deze is zinloos. Pak het voorbeeld stylesheet van mijn blog en ga daarmee aan het werk.

[rayring]

Mijn ervaring met (formulier) stylen is dat je snel te veel styled... Verwijder direct de standaard FormBuilder stylesheet want deze is zinloos. Pak het voorbeeld stylesheet van mijn blog en ga daarmee aan het werk.

De standaard stylesheet had ik inderdaad al verwijderd, de stylesheet van je blog heb ik al gebruikt (zie code) wellicht zoek ik meer hulp in het specifieke CSS dus welke styling code moet ik gebruiken om de checkbox voor de regels te krijgen... een tip in die richting zou fijn zijn...

[pedes]

gewoon even een "float: left" geven aan beide elementen

ik heb dit vlug even via firebug gedaan en dit is het resultaat

Code: Select all

<span style="float:left;"><input id="fbrp__129" value="t" name="m60345fbrp__129" class="cms_checkbox" type="checkbox"></span>
&nbsp;<span style="float:left;"><label for="fbrp__129">31 mei vrijdag jaarmarkt centrum Hardegarijp (hurdegaryp) winkelcentrum Fuormanderij 13-21 uur kraam €45.- Grondplaats €25.- 4 meter</label></span>

zie bijlage

Je zal in uw formbuilder dus uw element een class moeten toekennen en dan in uw css die class een float left geven, dat moet lukken.

grtz
Peter

[rayring]

gewoon even een "float: left" geven aan beide elementen

ik heb dit vlug even via firebug gedaan en dit is het resultaat

Code: Select all

<span style="float:left;"><input id="fbrp__129" value="t" name="m60345fbrp__129" class="cms_checkbox" type="checkbox"></span>
&nbsp;<span style="float:left;"><label for="fbrp__129">31 mei vrijdag jaarmarkt centrum Hardegarijp (hurdegaryp) winkelcentrum Fuormanderij 13-21 uur kraam €45.- Grondplaats €25.- 4 meter</label></span>

zie bijlage

Je zal in uw formbuilder dus uw element een class moeten toekennen en dan in uw css die class een float left geven, dat moet lukken.

grtz
Peter

Hoi Peter bedankt voor je reply!

Met float left lukte het me niet, de andere velden bovenin het formulier werden dan niet goed weergegeven... ik heb het wel voor elkaar met de volgende aanpassing:

Code: Select all

input[type="checkbox"] {
   width: auto;
   margin-top: 10px;
}
label {
   margin-right: 120px;
   display: box;
   padding: 1px;
}