Formbuilder probleem met CSS

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Formbuilder probleem met CSS

Post by rayring »

Op de volgende website wil ik graag het formulier uitlijnen met CSS
Ik heb al van alles geprobeerd zoals css classes met de velden mee te geven en CSS code toe te voegen aan de stylesheet maar krijg het niet netjes

Ik wil graag dat onderstaande velden naast elkaar komen te staan:

Uw naam *
Straat en huisnr:*
Postcode:*
Woonplaats:*
Uw telefoonnummer
Mobiel:*
Uw email adres*


En dan de velden hieronder ==> naast de velden hierboven

Branche*
Uw branche niet in de lijst? vul hier in:
Aantal kramen:
Elektriciteit:*
Ja
Nee
Indien grondplaats vermeld aantal M2


En dat hier de rest van het formulier verder gaat in de volledige breedte:

Hieronder vindt u een overzicht van onze marktlijst selecteer een markt (meerdere keuzes mogelijk) om deze te reserveren... etc...

Het lukt me maar niet om dit zo voor elkaar te krijgen, wie kan me helpen :-[

Het gaat om dit formulier: http://goo.gl/X36Af
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

Re: Formbuilder probleem met CSS

Post by Rolf »

- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Formbuilder probleem met CSS

Post by rayring »

Bedankt Rolf, ik heb geprobeerd de velden naast elkaar te krijgen maar helaas is dit niet gelukt wanneer ik met bijv. float en margins werk dan worden de velden gecropped, ik kom er niet uit... nog iemand suggesties of een sjabloon wat iemand nu al gebruikt voor zijn formulieren.. :-[
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm
Location: Deventer, Netherlands

Re: Formbuilder probleem met CSS

Post by timdebuurman »

Zo te zien staat je formulier in een table.
Dat is toch niet standaard?

Als de velden nu in die table-cellen staan, gebeurt er natuurlijk niet veel als je een class toevoegt en die probeert te stylen.
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Formbuilder probleem met CSS

Post by rayring »

timdebuurman wrote:Zo te zien staat je formulier in een table.
Dat is toch niet standaard?

Als de velden nu in die table-cellen staan, gebeurt er natuurlijk niet veel als je een class toevoegt en die probeert te stylen.
Nee dat klopt dat is niet slim... in eerste instantie was ik wel met het standaardsjabloon aan het proberen, daarna heb ik 'm weer op tables gezet... Ik ga het nog eens proberen..
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Formbuilder probleem met CSS

Post by rayring »

Pfff schiet mij maar lek... heb de styles aangemaakt meer krijg de velden niet naast elkaar zal het wellicht fout doen maar....waar..

Form ziet er nu zo uit:

Image

Gebruikte sjabloon:

Code: Select all

{* DEFAULT FORM LAYOUT / pure CSS *}
{literal}
<__script__ type="text/javascript">
function fbht(htid)
	{
		var fbhtc=document.getElementById(htid);
		if (fbhtc)
			{
			if (fbhtc.style.display == 'none')
				{
				fbhtc.style.display = 'inline';
				}
			else
				{
				fbhtc.style.display = 'none';
				}
			}
}
</__script>
{/literal}
{$fb_form_header}
{if $fb_form_done == 1}
	{* This first section is for displaying submission errors *}
	{if isset($fb_submission_error) && $fb_submission_error}
		<div class="error_message">{$fb_submission_error}</div>
		{if isset($fb_show_submission_errors) && $fb_show_submission_errors}
			<div class="error">
			<ul>
			{foreach from=$fb_submission_error_list item=thisErr}
				<li>{$thisErr}</li>
			{/foreach}
			</ul>
		</div>
		{/if}
	{/if}
{else}
	{* this section is for displaying the form *}
	{* we start with validation errors *}
	{if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}
		<div class="error_message">
		<ul>
		{foreach from=$fb_form_validation_errors item=thisErr}
			<li>{$thisErr}</li>
		{/foreach}
		</ul>
		</div>
	{/if}
	{if isset($captcha_error) && $captcha_error}
		<div class="error_message">{$captcha_error}</div>
	{/if}

	{* and now the form itself *}
	{$fb_form_start}
	<div>{$fb_hidden}</div>
	<div{if $css_class != ''} class="{$css_class}"{/if}>
	{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if}
	{foreach from=$fields item=entry}
		{if $entry->display == 1}
			{strip}
			{if $entry->needs_div == 1}
				<div
				{if $entry->required == 1 || $entry->css_class != '' || $entry->valid == 0} class="
					{if $entry->required == 1}required{/if}
					{if $entry->css_class != ''} {$entry->css_class}{/if}
					{if $entry->valid == 0} fb_invalid{/if}
					"
				{/if}
				>
			{/if}
			{if $entry->hide_name == 0}
				<label{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name}
				{if $entry->required_symbol != ''}
					{$entry->required_symbol}
				{/if}
				</label>
			{/if}
			{if $entry->multiple_parts == 1}
				{section name=numloop loop=$entry->input}
					{if $entry->label_parts == 1}
						<div>{$entry->input[numloop]->input}&nbsp;{$entry->input[numloop]->name}</div>
					{else}
						{$entry->input[numloop]->input}
					{/if}
					{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if}
				{/section}
			{else}
				{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}
			{/if}
			{if $entry->helptext != ''}&nbsp;<a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a>
					<span id="{$entry->field_helptext_id}" style="display:none" class="fbr_helptext">{$entry->helptext}</span>{/if}
			{if $entry->valid == 0} <--- {$entry->error}{/if}
			{if $entry->needs_div == 1}
				</div>
			{/if}
			{/strip}
		{/if}
	{/foreach}
	{if $has_captcha == 1}
		<div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>
	{/if}
	<div class="submit">{$prev}{$submit}</div>
	</div>
	{$fb_form_end}
{/if}
{$fb_form_footer}
Gebruikte styling

Code: Select all

.column {
    float:left
    width: 400px;
    position: relative;
}

.columnclear {
    float:left top;
    width: 400px;
    margin-left: 250px;
    margin-top: -50px;
    position: relative;
}

.marktlijst {
    float:left;
    margin-top: 20px;
}

.clear {clear:both}
label {display:block}
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm
Location: Deventer, Netherlands

Re: Formbuilder probleem met CSS

Post by timdebuurman »

Ik wil je er best even mee helpen.

Als je mij de broncode wilt sturen, dus zonder de tables en even duidelijk uitlegt wat je precies wilt (je uitleg daarover vond ik nog niet echt duidelijk) dan zal ik wel de styles ervoor maken.
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
rayring
Forum Members
Forum Members
Posts: 166
Joined: Sun Nov 30, 2008 6:45 pm

Re: Formbuilder probleem met CSS

Post by rayring »

timdebuurman wrote:Ik wil je er best even mee helpen.

Als je mij de broncode wilt sturen, dus zonder de tables en even duidelijk uitlegt wat je precies wilt (je uitleg daarover vond ik nog niet echt duidelijk) dan zal ik wel de styles ervoor maken.
Top ik stuur je een PM!
Post Reply

Return to “Dutch - Nederlands”