Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Form con i Css

Hybrid View

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2006
    Messaggi
    61

    FORM MAIL CON CSS

    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:
    Immagini allegate Immagini allegate

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.