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:

Rispondi quotando