[CSS - FORM] Posizionamento di testo in un form

[ciro78]

Salve,
uso il seguente codice css

form#contact{width:350px !important;width /**/:350px;
    height:275px !important; height /**/:300px;
    margin: 0;padding: 15px 15px 10px;
   }
label{float: left;width: 90px;height: 30px;
    font: 12px/30px Verdana,Arial,sans-serif;
    margin-right: 5px;text-align: right;color: #ffffff}
input,textarea,button{border: 0px solid;color:#000066;
    font: 12px Verdana,Arial,sans-serif bold}
div.input-cont{float: left;width: 200px;height: 30px;
    background:  url(../../img/contatti/sfondo1.jpg) no-repeat top left;
    margin-bottom: 3px}
input{display: block;width: 175px;background: #FFF;
    margin:5px 0 0 10px;clear:both}
div.textarea-cont{float: left;width: 250px;height: 170px;
    padding: 1px;background:  url(../../img/contatti/sfondo2.jpg) no-repeat;}
textarea{width: 230px;height: 90px;margin: 10px}
button#go{float: left;width: 130px;text-align:center;
    height:30px !important;height /**/:30px;line-height: 30px;
    display:inline;margin-left:75px;margin-top:10px;padding: 1px 0 4px;
    background:  url(../../img/contatti/submit.jpg) no-repeat;
    color: #000;cursor: pointer}
		
.contenuto_contatti
	{
	float:left;
	width:370px;
	position:relative;
	left:200px;
	margin:0px;
	padding:0px;
	}		
	
.piccolo
	{
	font-size:8pt;
	padding-left:100px;
	color:#FFFF00;
	}

qui il codice html

<div class='contenuto_contatti'>
<form id="contact" method="post" action="">
  <div>
		<div class='piccolo'>Campo necessario</div>
    <label for="nome">nome: </label>
    <div class="input-cont"><input type="text" id="nome" name="nome"></div>
		<div class='piccolo'>Campo necessario</div>

    <label for="email">email: </label>
    <div class="input-cont"><input type="text" id="email" name="email"></div>
    <div class='piccolo'>Campo necessario</div>
		<label for="message">messaggio: </label>
    <div class="textarea-cont"><textarea id="message" name="message" rows=5 cols=14></textarea>
    <button type="submit" id="go" value="invia">invia</button></div>

  </div>
</form>

se provo a inserire il testo che vedete con classe piccolo, quello in neretto, accade che il testo non va a cap. In pratica si posiziona sulla riga precedente a dove sono i controlli. Solo il primo si posiziona su una riga diversa da quella dei controlli ma, sicuramente accade perchè prima non c'è nulla. Come posso rimediare?

aggiungo per precisare che la classe contenuto_contatti, serve a posizionare solo il form all'interno della mia pagina

ciao e grazie in anticipo

[Mich_]

Anzitutto segnalo una contraddizione: float e position nello stesso blocco. Un blocco posizionato non puo` essere flottante.

E i tuoi elementi non seguono la semantica: dovresti curarla di piu` e sarebbe piu` semplice usare i CSS.
Ad esempio non hai usato elementi <fieldset> che in un form sostituiscono i <div>; i tuoi "campo necessario" potrebbero stare in <legend> dei filedset); hai inserito il testo direttamente nei <div> (il testo andrebbe inserito nei

)

La cosa di cui parli succede perche` nei blocchi label e input c'e` il float: quindi il blocco successivo non va a capo, se c'e` posto.
Prova a mettere il clear nel blocco .piccolo

[ciro78]

ciao grazie per aver risposto,
in realtà lo script è preso da uno degli articoli del sito. di mio ho aggiunto solo quel contenitore per posizionarlo all'interno della pagina

Ho provato a mettere clear in piccolo ma non funziona.

[ciro78]

ho risolto. era come dicevi, bastava mettere clear nella classe piccolo. non so ieri cosa abbia combinato .

grazie per l'aiuto