Formbuilder probleem met CSS

[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

[Rolf]

Een goede start: http://forum.cmsmadesimple.org/viewtopi ... 52&t=60763

[rayring]

Een goede start: http://forum.cmsmadesimple.org/viewtopi ... 52&t=60763

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..

[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.

[rayring]

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]

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:



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}

[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.

[rayring]

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!