Form con i Css

[giopalla]

Ciao ragazzi, stoo cercando disperatamente di realizzare un form per l'invio di email con l'ausilio dei css.
Vorrei realizzare qualcosa come la foto in allegato con i campi suddivisi su due colonne left e right perchè ho molti campi da inserire e per no allungare la pagina ulteriormente preferisco averli uno accanto all'altro.
Di seguito Vi posto il codice utilizzato per la realizzazione e la foto di come vorrei che fosse.
Mi farebbe veramente piacere se qualcuno mi aiutasse a capire come fare.
Grazie ancora.

________________
CODICE:

<style type="text/css">
<!--
#detail-contact p {
color:#000066;
font-weight: bold;
}
.line_bottom{
margin-bottom:15px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0066FF;
}
#detail-contact {
width:738px;
border:1px solid #0066FF;
padding:10px;
margin-top:15px;
background-color: #FFFFFF;
}
#detail-contact form {display:inline;}
#detail-contact p {padding:0;margin:0;}
#detail-contact p img {vertical-align:middle;}
#detail-contact ul {display:inline;list-style-type: none;padding: 0; margin: 0;width: 100%; }
#detail-contact ul li{float: left;width:180px; padding: 0px; margin:0 12px 5px 0;display:inline;}
#detail-contact ul li label, #detail-contact ul li input, {width:140px;}

#detail-contact textarea { max-width:500px;max-height:90px;float:left;}

#detail-contact a, #disclaimer {width:450px;color:#726F73}
#detail-contact #submitbuttonmsg {width:80px;height:23px;}

#detail-contact textarea { max-width:500px;max-height:90px;float:left;}
#detail-contact a, #disclaimer {width:450px;color:#726F73}
#detail-contact #submitbuttonmsg {width:80px;height:23px;}
.empty{
clear:both;
}

-->
</style>
<div id="detail-contact">
<div class="line_bottom">
<div style="margin-bottom: 8px;">
<p class="tit bold">IMMOBILIARE by .</p>
</div>
<div style="height: 20px;">via San PIETRO</div>
<div style="height: 20px;">telefono: 0333.55555555 cellulare: 347347347 fax: 0333.3333333</div>
</div>


<p class="tit bold">Invia un'email all'agenzia
<div class="align_left" style="width: 250px;">
<div class="cella-form" style="width: 65px; padding-top: 3px;">Nome</div>
<div class="align_left"><input name="nome" type="text"></div>
<div class="empty" style="height: 8px;"></div>
<div class="cella-form" style="width: 65px; padding-top: 3px;">Cognome</div>
<div class="align_left"><input name="cognome" type="text"></div>
<div class="empty" style="height: 8px;"></div>
<div class="cella-form" style="width: 65px; padding-top: 3px;">Telefono</div>
<div class="align_left"><input name="telefono" type="text"></div>
<div class="empty" style="height: 18px;"></div>
<div class="cella-form" style="width: 65px; padding-top: 3px;">Telefono</div>
<div class="align_left"><input name="telefono" type="text"></div>
<div class="empty" style="height: 8px;"></div>
<div class="cella-form" style="width: 65px; padding-top: 3px;">Telefono</div>
<div class="align_left"><input name="telefono" type="text"></div>
<div class="empty" style="height: 8px;"></div>
<div class="cella-form" style="width: 65px; padding-top: 3px;">E-mail</div>
<div class="align_left"><input name="email" type="text"></div>
<div class="empty"></div>
</div>
<div class="align_right">
<div>Messaggio</div>
<div><textarea name="commento" cols="50" rows="6" style="overflow-y: hidden;"></textarea></div>
</div>
<div class="empty" style="height: 10px;"></div>
<div>
<div id="disclaimer" class="align_left">

<input style="border: 0px none ;" name="privacy" checked="checked" type="checkbox">Acconsento al trattamento dei dati personali</div>
<div class="align_right" style="padding-top: 2px;">
<input style="border: 0px none ;" name="submitbutton" src="http://www.immobiliare.it/sitiagenzie/includes/style1/images/transparent.gif" id="submitbuttonmsg" onClick="checkMessageForm(); return false" type="image">
</div>

<div class="empty"></div>
</div>
</form>
</div>

___________________
FOTO:

[P.aolo83]

Non è molto chiaro quale sia il problema... il form mi sembra dalla foto che tu sia già riuscito a farlo (o no?).
Se il problema è crearlo con uno stile più bello ti consiglio questa presentazione

http://www.easy-reader.net/archives/...sions-wrapped/

da li dovrebbe essere anche scaricabile in pdf.

Spero ti sia di aiuto, fammi sapere.

[giopalla]

Originariamente inviato da P.aolo83
Non è molto chiaro quale sia il problema... il form mi sembra dalla foto che tu sia già riuscito a farlo (o no?).
Se il problema è crearlo con uno stile più bello ti consiglio questa presentazione

http://www.easy-reader.net/archives/...sions-wrapped/

da li dovrebbe essere anche scaricabile in pdf.

Spero ti sia di aiuto, fammi sapere.

NON RIESCO A REALIZZARE LA COLONNA DI DESTRA

[bagu]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Documento senza titolo</title>
</head>

<body>
<form action="" method="post">
<fieldset><legend>test</legend>
<div style="width:200px; float:left"><label>nome</label>
<input name="nome" type="text" /></div><div style="width:200px; float:left"><label>nome</label>
<input name="nome" type="text" /></div><br style="clear:both" />
<div style="width:200px; float:left"><label>nome</label>
<input name="nome" type="text" /></div><div style="width:200px; float:left"><label>nome</label>
<input name="nome" type="text" /></div><br style="clear:both" />
</fieldset>
</form>
</body>
</html>

[Mich_]

Ecco alcuni link che trattano come dare uno stile ai form:
Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Form fluidi con i css
Styling form controls with CSS
Fieldsets, Legends and Screen Readers
Suggerimenti di aiuto sui form con CSS e Javascript
Form con CSS e Javascript... e possibilmente con giudizio

[giopalla]

Ragazzi cosa ne pensate?

http://www.salentoinblu.it/visualizzazione17.php

grazie a tutti coloro che hanno risposto al mio problema e che mi hanno aiutato, siete i migliori

[Mich_]

Originariamente inviato da giopalla
Ragazzi cosa ne pensate?

Qualcosa si vede nel browser, ma ci sono errori di vario tipo.
Errori di sintassi italiana (parole scritte sbagliate)
Errori di HTML:
- mancanza dei tag iniziali
- uso scorretto delle entita`
- uso di CSS in linea (sarebbero da evitare, per evitare errori)
- la formattazione e` fatta in parte da tag HTML (ad es.
)
Errori di logica nel form (che senso ha compilare la provincia italiana se lo stato e` straniero?)

Ti consiglio un passaggio dai validatori HTML e CSS, oltre che un correttore ortografico.
E ti consiglio un corso di HTML, ad esempio quello di HTML.it.

In queste condizioni non si puo` dare un giudizio sul CSS.