Voglio creare un css per formattare agevolmente i form!
Quello che vorrei fare e' questo:
Vorrei aggiungere liberamente tutti i campi di input che voglio, potendo scegliere quali allineare verticalmente e quali far scendere alla riga di sotto.
Inoltre vorrei che la label dei campi compaia sotto al campo stesso e non a destra o a sinistra.
Mi sono ingegnato un po' con le proprieta' display float e clear e ci sono quasi riuscito,
solo che cosi' facendo il contenitore che contiene la form non si dimensiona (e' come se i campi della form stessero al difuori della div che contiene la form.
Per farvi capire vi do il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Progetto Studio AJAX + CSS</title>
<link rel="stylesheet" type="text/css" href="template/stile.css" media="all">
</head>
<body>
<center>
<div id="contenitore">
<div id="testata">
<h2>Titolo_1</h2>
Titolo_2</p>
</div>
<div id="titolo">
<h5>Titolo paginetta</h5>
</div>
<hr>
<div id="menu">
Menu
</div>
<div id="form_ins">
<form id="form_ins_cli" class="form" method="post" action="">
<span>
<input type="text" name="nome">
<label>Nome</label>
</span>
<span>
<input type="text" name="cognome">
<label>Cognome</label>
</span>
<span>
<input type="text" name="telefono">
<label>Telefono</label>
</span>
</form>
</div>
</div>
</center>
</body>
</html>
e questo e' il css
body
{
background: #CDDCEC;
font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size: small;
}
#contenitore
{
background: #FFFFFF;
border: 1px solid red;
width: 640px;
padding: 1%;
text-align: left;
}
#testata h2
{
font-size: 160%;
font-weight: 400;
margin-bottom: -10px;
margin-top: 0px;
}
#testata p
{
font-size: 95%;
}
#titolo h5
{
text-align: center;
margin-top: -10px;
margin-bottom: 0px;
}
#menu
{
text-align: center;
}
.form span
{
display: block;
float: left;
width: 30%;
}
.form input
{
display: block;
}
