sistemare il form con gli stili

**rocco.mod** · 05-11-2007, 22:36

ragazzi ciao non riesco a sistemare questo form mi da il testo sopra il campo d imput invece io vorrei che prima ci fosse il testo tipo nome: campo d imput cosa fare? vi postola pag

codice:

.power {
	background-color: #eeeeee;
	width:1024px;
	height:20px;
	background-image: url(../immagini/fotter.gif);
	padding: 0px;
	color: #00FFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	background-repeat: repeat-x;

}
.separator {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	color: #0000FF;
}

.content_form{
width:450px;
border:1px dashed #999999;
text-align:left;
background-color:#eeeeee
}
label {
width:450px;
 display:block; 
 float:left; 
 clear:left;
  padding:1px;
  text-align:left;
  }
input {
margin:3px;
}

l html

codice:

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stili-css/marik.css" rel="stylesheet" type="text/css">
<style  type="text/css"> 
<!--
html, body{
	width: 100% ;

	margin: 0px auto;
	padding: 15px;
	background-color: #dddddd;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#principale{
    background-color: #eeeeee;
	width:1024px;
	border: 3px thin solid #cccccc;	 
	margin:auto;
	display:block;
	float:left; 
	clear:left; 

	
}
</style>

</head>
<body>
<div id = "principale" align="center" >
     
  <div id ="menu"  > 
    <script type="text/javascript">
			var fo = new FlashObject("flash/banner.swf", "Menu", "1024", "300", "false", "");
			fo.addParam("quality", "high");
			fo.addParam("menu", "false");
			fo.write("menu");
		</script>
  </div>
	<div class="content_form">
		<form id="captchaForm" name="captchaForm" method="post" action="">
		    <div class="row">
</div>
			<div class="row">
</div>
			<div class="row"><label for="company">Ragione Sociale: </label>
        <input name="company" type="text" id="company" size="30" value="<?php if(isset($_POST['company'])){echo $_POST['company'];} ?>" />
      </div>
			<div class="row"><label for="name">Nome: </label>
        <input name="name" type="text" id="name" size="30" value="<?php if(isset($_POST['name'])){echo $_POST['name'];} ?>" />
      </div>
			<div class="row"><label for="name">Cognome: </label><input name="surname" type="text" id="surname" size="30" value="<?php if(isset($_POST['surname'])){echo $_POST['surname'];} ?>" /></div>
			<div class="row"><label for="address">Telefono: </label><input name="telephone" type="text" id="telephone" size="30" value="<?php if(isset($_POST['telephone'])){echo $_POST['telephone'];} ?>" /></div>
            <div class="row"><label for="address">Oggetto: </label><input name="sub" type="text" id="sub" size="30" value="<?php if(isset($_POST['sub'])){echo $_POST['sub'];} ?>" /></div>
			<div class="row"><label for="email">Email: </label><input type="text" name="email" size="30" value="<?php if(isset($_POST['email'])){echo $_POST['email'];} ?>" /> </div>
			<div class="row"><label for="comments">Messaggio: </label><textarea name="comments" cols="30" rows="5" id="comments"><?php if(isset($_POST['comments'])){echo $_POST['comments'];} ?></textarea></div>
		    <div class="row"><center><? echo "$ip";?></center></div>
			 <div class="row"><center><? echo "$date" ?></center></div>
			<div class="row">
</div>
          <div class="clear"></div>
          

</p>
			<div class="cpt">[img]phpcaptcha/captchaImage.php[/img]<input type="text" id="captcha_input" name="captcha_input" size="15" /></div>
			
          <?php if($error == 1){ ?>
          <p class="error">The code you inserted was not correct. Try with the new code above</p><?php } ?>
			<div class="inp" style="text-align:center"><label for="submit"></label><input type="submit" name="scratch_submit" id="scratch_submit" value="Send Form" /><label for="reset"></label><input type="reset" name="Reset" id="Reset" value="Reset" onClick="return resetta()">
          </div>
		</form>
	</div>
      <div class ="power">
	<div><? echo _NOME_BOLD_ ; ?></div>
  </div> 
 <div class="separator">  
  <div id="footer">&copy; Copyright 2006-2007 By :<span><? echo POWERED_BY ; ?></span></div> 
</div> 
</div>
<div align="center"></div>
</body>
</html>

**elysaweb** · 05-11-2007, 23:14

voglio farmi del male e quindi ti rispondo... basta che togli dal css tutto il pezzo

label {
...
}

TUTTO, anche quello che c'è dentro le parentesi graffe

**rocco.mod** · 05-11-2007, 23:30

grazie ma non vorrei averti sulla coscienza se ti fai male per colpa mia

**rocco.mod** · 05-11-2007, 23:34

ho tolto il label e se tilgo il label mi da una cosa confusionata del tipo un campo d imput avanti un altro piu avanti unaltro indietro non e bello esteticamente

**elysaweb** · 06-11-2007, 00:52

ok allora togli il label e metti nel css

.row {
display:block;
margin-bottom:10px;
}

poichè la classe row è assegnata ad un div, ogni coppia label: input dovrebbe andare a capo già di per sè.. l'unica spiegazione che posso dare al tuo problema è che l'input sia troppo largo rispetto al div che lo contiene e quindi vada a capo

**Mich_** · 06-11-2007, 10:03

Formattare i form richiede un po' di esperienza in piu`. E non e` evitando di formattare alcuni oggetti che si puo` risolvere.

Personalmente ho sotto mano questi link relativamente ai form (altri possono esserci tra i "link utili" del forum):
Accessible CSS Forms: Using CSS to Create a Two-Column Layout
Form fluidi con i css
Styling form controls with CSS
Bottoni con rollover

**elysaweb** · 06-11-2007, 13:10

Originariamente inviato da Mich_
E non e` evitando di formattare alcuni oggetti che si puo` risolvere.

ma se il label era impostato come display:block; , e lui non vuole che l'input vada a capo dopo il label, non è forse corretto togliere il display:block?
E non mi risulta sia obbligatorio formattare TUTTI gli elementi, ma solo quelli necessari.. o sbaglio?

**Mich_** · 06-11-2007, 13:41

Non e` che occorre andare a caso testando quali proprieta` e valori sistemano la cosa. Probabilmente si reisce a sistemare per il browser in cui si sta testando e poi con un browser diverso casca l'asino.

Per mettere due oggetti su una stessa riga si usa
float: left; (o right, in qualche caso)
Se un oggetto non lo rendi block, non puoi definirne le dimensioni (tranne in IE - quirks mode). E lui vuole creare delle colonne, cosa impossibile con oggetti inline.

E` vero che non e` obbligatorio formattare tutto, ma il consiglio di togliere una formattazione e` ben difficile che risolva un problema: vuol dire lasciare la formattazione di default dei browser (che notoriamente fanno un po` di testa loro - o, se vuoi, con la testa del loro programmatore, che non e` detto conoscesse il problema specifico).

Come ho gia` scritto, formattare i form e` una operazione un po' delicata, che richiede un minimo di esperienza in piu`.

**rocco.mod** · 06-11-2007, 13:49

ciao grazie delle spiegazioni e consigli comunque per formattazione intendevo quando vai su una pagina web e clicchi con il mouse viene visto un bleu di dove sono i campi dimput tabelle ecc

**rocco.mod** · 06-11-2007, 14:29

su un campo tipo

codice:

<div class ="power">
	     <div><? echo _NOME_BOLD_ ; ?></div>
  </div>

ho aseggniato questo css

codice:

.power {
	text-align: center;
	width:1024px;
	height:20px;
	background-repeat: repeat;
	padding: 5px;
	color: #0000FF;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight: bold;
	background-image: url(../immagini/fotter.gif);
	background-attachment: fixed;
	background-position: center;

internet esplorer lo formatta giusto ma mozzilla la gif me la allunga piu di 1024 px perche secondo te?

Discussione: sistemare il form con gli stili

Strumenti discussione

Ricerca discussione

Visualizza

sistemare il form con gli stili

Permessi di invio