- Berichten: 9
- Ontvangen bedankjes 0
Vraag RS Form Pro beginners vragen
- Lusa
-
Onderwerp Auteur
- Offline
- Gebruiker
-
11 jaren 10 maanden geleden #2564
door Lusa
Beantwoord door Lusa in topic Re: RS Form Pro beginners vragen
Maakt niet uit kan gebeuren. 
Alleen hoe kan ik het dan via CSS uitlijnen zodat bijvoorbeeld radio button landelijk onder afbeelding 2 komt?
Ik kom er even niet uit namelijk.
Alleen hoe kan ik het dan via CSS uitlijnen zodat bijvoorbeeld radio button landelijk onder afbeelding 2 komt?
Ik kom er even niet uit namelijk.
Graag Inloggen of een account aanmaken deelnemen aan het gesprek.
- Arjan
-
- Offline
- Gebruiker
-
11 jaren 10 maanden geleden - 11 jaren 10 maanden geleden #2569
door Arjan
Lekker ontspannen mensen helpen met hun website problemen.
Beantwoord door Arjan in topic Re: RS Form Pro beginners vragen
Geef iedere radioknop een breedte en dan gaan spelen met margin en padding.
Dit maar als voorbeeld.
Speel ze
Code:
.radioknop{
width: 200px;
margin-right: 10px;
margin-top: 200px;
}
Speel ze
Lekker ontspannen mensen helpen met hun website problemen.
Laatst bewerkt 11 jaren 10 maanden geleden door Arjan.
Graag Inloggen of een account aanmaken deelnemen aan het gesprek.
- Lusa
-
Onderwerp Auteur
- Offline
- Gebruiker
-
11 jaren 10 maanden geleden #2582
door Lusa
Bedankt voor de tip!
Ik ben der bijna..
Het hielp me aardig op weg alleen lukt het niet om bijvoorbeeld de radioknop Landelijk of Type Keuken1 alleen te verplaatsen.
Via FireFox zijn de volgende gegevens.
Het lukt wel als ik de volgende CSS gebruik.
Het probleem nu is dat de tekst te ver van de radio button staat.
Dit heb ik proberen op te lossen door de label in de CSS op te nemen maar tot nu toe zonder succes.
Aantal jaar geleden wist ik me aardig te redden met CSS maar het lijkt nu even dat ik met een blackout zit... :-[
Beantwoord door Lusa in topic Re: RS Form Pro beginners vragen
Geef iedere radioknop een breedte en dan gaan spelen met margin en padding.
Dit maar als voorbeeld.Code:.radioknop{ width: 200px; margin-right: 10px; margin-top: 200px; }
Speel ze
Bedankt voor de tip!
Ik ben der bijna..
Het hielp me aardig op weg alleen lukt het niet om bijvoorbeeld de radioknop Landelijk of Type Keuken1 alleen te verplaatsen.
Via FireFox zijn de volgende gegevens.
Code:
<li class="rsform-block rsform-block-type-keuken">
<div class="formCaption2">Type keuken</div>
<div class="formBody">
<input id="Type Keuken0" type="radio" value="Greeploos" name="form[Type Keuken]">
<label for="Type Keuken0">Greeploos</label>
<input id="Type Keuken1" type="radio" value="Landelijk" name="form[Type Keuken]">
<label for="Type Keuken1">Landelijk</label>
<input id="Type Keuken2" type="radio" value="Tijdloos" name="form[Type Keuken]">
<label for="Type Keuken2">Tijdloos</label>
Het lukt wel als ik de volgende CSS gebruik.
Code:
<style type="text/css">
.rsform-block-type-keuken input{
width: 250px;
margin-right: 10px;
margin-top: 0px;
}
</style>
Het probleem nu is dat de tekst te ver van de radio button staat.
Dit heb ik proberen op te lossen door de label in de CSS op te nemen maar tot nu toe zonder succes.
Aantal jaar geleden wist ik me aardig te redden met CSS maar het lijkt nu even dat ik met een blackout zit... :-[
Graag Inloggen of een account aanmaken deelnemen aan het gesprek.
- Arjan
-
- Offline
- Gebruiker
-
11 jaren 10 maanden geleden #2583
door Arjan
Om je tekst te verplaatsen zou ik van,
dit maken,
Door nu een andere class aan de tekst te geven kan je hem anders "bewerken". Hoe er wel rekening mee dat je tekst wel in het blok van je radioknoppen staan.
Het maakt het voor mij altijd iets makkelijker als ik kan zien wat ik aan het doen ben dus daarom maak ik graag gebruik van,
Als je dan nu doet voor het radioknoppen blok, de radioknop zelf en voor je labels, drie kleuren maakt het dan nog makkelijker, zie je mogelijk beter wat je aan het doen bent.
Leuk hé, spelen met css
}
Lekker ontspannen mensen helpen met hun website problemen.
Beantwoord door Arjan in topic Re: RS Form Pro beginners vragen
Je drie radioknoppen staan in 1 blok dus het is logisch dat je die niet apart kan verplaatsen.Bedankt voor de tip!
Ik ben der bijna..
Het hielp me aardig op weg alleen lukt het niet om bijvoorbeeld de radioknop Landelijk of Type Keuken1 alleen te verplaatsen.
Via FireFox zijn de volgende gegevens.Code:<li class="rsform-block rsform-block-type-keuken"> <div class="formCaption2">Type keuken</div> <div class="formBody"> <input id="Type Keuken0" type="radio" value="Greeploos" name="form[Type Keuken]"> <label for="Type Keuken0">Greeploos</label> <input id="Type Keuken1" type="radio" value="Landelijk" name="form[Type Keuken]"> <label for="Type Keuken1">Landelijk</label> <input id="Type Keuken2" type="radio" value="Tijdloos" name="form[Type Keuken]"> <label for="Type Keuken2">Tijdloos</label>
Het lukt wel als ik de volgende CSS gebruik.Code:<style type="text/css"> .rsform-block-type-keuken input{ width: 250px; margin-right: 10px; margin-top: 0px; } </style>
Het probleem nu is dat de tekst te ver van de radio button staat.
Dit heb ik proberen op te lossen door de label in de CSS op te nemen maar tot nu toe zonder succes.
Aantal jaar geleden wist ik me aardig te redden met CSS maar het lijkt nu even dat ik met een blackout zit... :-[
Om je tekst te verplaatsen zou ik van,
Code:
<label for="Type Keuken0">Greeploos</label>
Code:
<label for="Type Keuken0a">Greeploos</label>
Het maakt het voor mij altijd iets makkelijker als ik kan zien wat ik aan het doen ben dus daarom maak ik graag gebruik van,
Code:
.rsform-block-type-keuken input{
width: 250px;
margin-right: 10px;
margin-top: 0px;
border: 1px solid aqua;
Leuk hé, spelen met css
}
Lekker ontspannen mensen helpen met hun website problemen.
Graag Inloggen of een account aanmaken deelnemen aan het gesprek.
- Lusa
-
Onderwerp Auteur
- Offline
- Gebruiker
-
11 jaren 10 maanden geleden #2632
door Lusa
Beantwoord door Lusa in topic Re: RS Form Pro beginners vragen
Spelen met CSS blijft heerlijk
Bedankt, De tip werken met de border is wel even een goude tip voor mij!
Zodra ik klaar ben met deze uitdaging wil ik ook eens kijken naar je uitleg over overrides.
ik heb je topic dan ook met veel interesse gelezen.
Ik vind wel werken met CSS blijft leuk, maar met formulieren ook een echte uitdaging.
Ik heb het boek Het beste van CSS en My study CSS er dan ook maar weer bijgepakt.
Helaas kom ik er op dit moment nog steeds niet uit.
Waar plaats ik het volgende?
Als ik de layout van de formulier open dan heb ik het volgende staan.
Moet ik hier dan een nieuwe class id meegeven, en waar moet ik deze plaatsen dan of moet ik dit in CSS aangeven?
Ik heb op dit moment het volgende in CSS staan.
Bedankt, De tip werken met de border is wel even een goude tip voor mij!
Zodra ik klaar ben met deze uitdaging wil ik ook eens kijken naar je uitleg over overrides.
ik heb je topic dan ook met veel interesse gelezen.
Ik vind wel werken met CSS blijft leuk, maar met formulieren ook een echte uitdaging.
Ik heb het boek Het beste van CSS en My study CSS er dan ook maar weer bijgepakt.
Helaas kom ik er op dit moment nog steeds niet uit.
Waar plaats ik het volgende?
Code:
<label for="Type Keuken0a">Greeploos</label>
Als ik de layout van de formulier open dan heb ik het volgende staan.
Code:
<fieldset class="formFieldset">
<legend>{global:formtitle}</legend>
{error}
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<ol class="formContainer" id="rsform_5_page_0">
<li class="rsform-block rsform-block-header">
<div class="formCaption2">{Header:caption}</div>
<div class="formBody">{Header:body}<span class="formClr">{Header:validation}</span></div>
<div class="formDescription">{Header:description}</div>
</li>
<li class="rsform-block rsform-block-keuken-1">
<div class="formCaption2">{Keuken 1:caption}</div>
<div class="formBody">{Keuken 1:body}<span class="formClr">{Keuken 1:validation}</span></div>
<div class="formBody">{Keuken 2:body}<span class="formClr">{Keuken 2:validation}</span></div>
<div class="formBody">{Keuken 3:body}<span class="formClr">{Keuken 3:validation}</span></div>
<div class="formDescription">{Keuken 1:description}</div>
</li>
<li class="rsform-block rsform-block-keuken-2">
<div class="formCaption2">{Keuken 2:caption}</div>
<div class="formDescription">{Keuken 2:description}</div>
</li>
<li class="rsform-block rsform-block-keuken-3">
<div class="formCaption2">{Keuken 3:caption}</div>
<div class="formDescription">{Keuken 3:description}</div>
</li>
<li class="rsform-block rsform-block-type-keuken">
<div class="formCaption2">{Type Keuken:caption}</div>
<div class="formBody">{Type Keuken:body}<span class="formClr">{Type Keuken:validation}</span></div>
<div class="formDescription">{Type Keuken:description}</div>
</li>
<li class="rsform-block rsform-block-text1">
<div class="formCaption2">{Text1:caption}</div>
<div class="formBody">{Text1:body}<span class="formClr">{Text1:validation}</span></div>
<div class="formDescription">{Text1:description}</div>
</li>
<li class="rsform-block rsform-block-stap-3">
<div class="formCaption2"> </div>
<div class="formBody">{Stap 3:body}</div>
</li>
</ol>
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<ol class="formContainer" id="rsform_5_page_1">
<li class="rsform-block rsform-block-keukenkastjes">
<div class="formCaption2">{keukenkastjes:caption}</div>
<div class="formBody">{keukenkastjes:body}<span class="formClr">{keukenkastjes:validation}</span></div>
<div class="formDescription">{keukenkastjes:description}</div>
</li>
<li class="rsform-block rsform-block-greeploos">
<div class="formCaption2">{Greeploos:caption}</div>
<div class="formBody">{Greeploos:body}<span class="formClr">{Greeploos:validation}</span></div>
<div class="formDescription">{Greeploos:description}</div>
</li>
<li class="rsform-block rsform-block-greeploos-prijzen">
<div class="formCaption2">{Greeploos prijzen:caption}</div>
<div class="formBody">{Greeploos prijzen:body}<span class="formClr">{Greeploos prijzen:validation}</span></div>
<div class="formDescription">{Greeploos prijzen:description}</div>
</li>
<li class="rsform-block rsform-block-extra-info">
<div class="formCaption2">{Extra info:caption}</div>
<div class="formBody">{Extra info:body}<span class="formClr">{Extra info:validation}</span></div>
<div class="formDescription">{Extra info:description}</div>
</li>
<li class="rsform-block rsform-block-greeploos-prijzen-1">
<div class="formCaption2">{Greeploos prijzen 1:caption}</div>
<div class="formBody">{Greeploos prijzen 1:body}<span class="formClr">{Greeploos prijzen 1:validation}</span></div>
<div class="formDescription">{Greeploos prijzen 1:description}</div>
</li>
<li class="rsform-block rsform-block-deur-met-groefje">
<div class="formCaption2">{Deur met groefje:caption}</div>
<div class="formBody">{Deur met groefje:body}<span class="formClr">{Deur met groefje:validation}</span></div>
<div class="formDescription">{Deur met groefje:description}</div>
</li>
<li class="rsform-block rsform-block-groefje-prijzen">
<div class="formCaption2">{Groefje prijzen:caption}</div>
<div class="formBody">{Groefje prijzen:body}<span class="formClr">{Groefje prijzen:validation}</span></div>
<div class="formDescription">{Groefje prijzen:description}</div>
</li>
<li class="rsform-block rsform-block-kaderdeur-licht-geprofileerd">
<div class="formCaption2">{Kaderdeur licht geprofileerd:caption}</div>
<div class="formBody">{Kaderdeur licht geprofileerd:body}<span class="formClr">{Kaderdeur licht geprofileerd:validation}</span></div>
<div class="formDescription">{Kaderdeur licht geprofileerd:description}</div>
</li>
<li class="rsform-block rsform-block-stap-4">
<div class="formCaption2"> </div>
<div class="formBody">{Stap 4:body}</div>
</li>
</ol>
</ol>
</fieldset>
Moet ik hier dan een nieuwe class id meegeven, en waar moet ik deze plaatsen dan of moet ik dit in CSS aangeven?
Ik heb op dit moment het volgende in CSS staan.
Code:
<style type="text/css">
.formFieldset {
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color: #333;
}
.rsform-block-type-keuken{
border: 1px solid blue;
}
.rsform-block-type-keuken input {
width: 250px;
margin-right: 10px;
margin-top: 0px;
border: 1px solid aqua;
}
.rsform-block-type-keuken label{
margin-top: 0px;
border: 1px solid orange;
}
</style>
Graag Inloggen of een account aanmaken deelnemen aan het gesprek.
- Arjan
-
- Offline
- Gebruiker
-
Tijd voor maken pagina: 0.388 seconden