Problème alignement HTML

Résolu
makfly2301 Messages postés 184 Date d'inscription   Statut Membre Dernière intervention   -  
Achmon Messages postés 9 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Je suis en train de concevoir un formulaire et mon problème et que je n'arrive pas a aligner les champs de saisies de celui-ci pour donner un aspect plus propre.

Je vous fournit mon HTML et mon CSS, je vous remercies de votre aide :


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<link rel="stylesheet" type="text/css" href="test.css">
<html>
<head>
</head>
<body>
<form method="post" action="test2.php">


<div id="corpForm">
<fieldset id="coordonnees">
<legend>Coordonnées</legend>
<div id ="heure">
<script language="JavaScript">
navvers = navigator.appVersion.substring(0,1);
if (navvers > 3)
navok = true;
else
navok = false;

today = new Date;
jour = today.getDay();
numero = today.getDate();
if (numero<10)
numero = "0"+numero;
mois = today.getMonth();
if (navok)
annee = today.getFullYear();
else
annee = today.getYear();
TabJour = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
TabMois = new Array("janvier","février","mars","avril","mai","juin","juillet","aout","septembre","octobre","novembre","dééembre");
messageDate = TabJour[jour] + " " + numero + " " + TabMois[mois] + " " + annee;
</script>
<script language="JavaScript">
document.write(messageDate);
</script>
</div>


<FORM>
Destinataire
<select name="NomDest" id="NomDest">
<option value="César">César</option>
<option value="Sylvain">Sylvain</option>
<option value="Claude">Claude</option>
</select>
<p>
</p>
Client
<select name="TypeClient" id="TypeClient">
<option value="Professionnel">Professionnel</option>
<option value="Particulier">Particulier</option>
</select>
</p>

<p>Nom <input type="text" name="NomClient" id="NomClient"></input></p>

<p>Adresse<input type="text" name="AdresseClient" id="AdresseClient"></input></p>

<p>Code Postal<input type="text" name="CPClient" id="CPClient"></input></p>

<p>Ville<input type="text" name="VilleClient" id="VilleClient"></input></p>

<p>Telephone<input type="text" name="TelClient" id="TelClient"></input></p>



</fieldset>


<p>
<fieldset id="type">
<p>
<legend>Objet de l'appel</legend>
<p>
<p>
<p>Date<input type="text" name="Date" id="Date"></input></p>
<p> Déscription <textarea name="Objet" id="Objet"></textarea>
</p>
</fieldset>
</div>
<div id="piedForm">
<div id="retour">
<input type="submit" value="Valider"/>
</div>
</div>


<p id="footer">

</form>

</p>



</form>
</body>
</html>



CSS:

body {
margin: 1em;
padding: 0;
font: .8em arial, hevetica, sans-serif;
text-align: left;
color: black;
background: #62A6DF;
}
p#notes {
border-bottom: 1px dotted black;
padding-bottom: 1em;
}
p#footer {
border-top: 1px dotted black;
padding-top: 1em;
}
code {
font-size: .9em;
}
html>body code {
font-size: 1.3em;
}

/*** Mise en forme du formulaire ***/

#inscription {
border: none;
margin: 0;
padding: 0;
width: 30em; /*** Largeur du formulaire ***/
}
#titreForm, #piedForm { /*** Mise en forme du titre et du pied de formulaire ***/
font: bold 1.1em arial, hevetica, sans-serif;
color: white;
background: #27367A;
margin: 0;
padding: .5em;
width: 61%
}
#piedForm {
text-align: right;
width: 61% /*** Les boutons sont alignés à droite ***/
}
#piedForm input {
font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
margin-left: 1em;

}
#corpForm { /*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
border: 1px solid black;
color: black;
background: #efefef;
margin: 0;
padding: 1em;
width: 60%;
}
#corpForm fieldset { /*** Mise en forme des cadres ***/
margin: 0;
font-style: normal;
padding: 0 1em 1em;
}
#corpForm legend { /*** Mise en forme des titres des cadres ***/
font-weight: bold;
color: black;
background: transparent;
}
#corpForm p { /*** Mise en forme des lignes du formulaire ***/
padding: .2em 0;
margin: 0 0 .2em 0;
}
#corpForm fieldset#coordonnees label { /*** Mise en forme des intitulés de champs ***/
float: left; /*** Très important, ne pas suprimer ! ***/
width: 20%; /*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
text-align: right; /*** ... et ils sont alignés à droite... ***/
margin: 0;
padding: 0 .5em 0 0;
line-height: 1.8; /*** ... et centrés verticalement. ***/
}
#corpForm label:hover, #piedForm input {
cursor: pointer; /*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}

#heure {
text-align: right;
font: .9em comic sans ms, hevetica, sans-serif;
}

#retour {
float:left;
}
A voir également:

2 réponses

Réponse 1 / 2
Achmon Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
ben faut voir combien de ligne tu as ds ton formulaire et et faire un tableau adéquat !

je peux pas faire tout pour toi , tu dois qd meme comprendre donc voila un exemple de début : 
<FORM>
<table>
<tr>
 <td>Destinataire</td>
 <td><select name="NomDest" id="NomDest">
        <option value="César">César</option>
        <option value="Sylvain">Sylvain</option>
        <option value="Claude">Claude</option>
        </select>
 </td>
</tr>
<tr>
 <td>Client</td>
 <td><select name="TypeClient" id="TypeClient">
        <option value="Professionnel">Professionnel</option>
        <option value="Particulier">Particulier</option>
        </select>
</td>
</tr>
<tr>
 <td>Nom </td>
 <td><input type="text" name="NomClient" id="NomClient"></input></td>
</tr>
<tr>
 <td>Adresse</td>
 <td><input type="text" name="AdresseClient" id="AdresseClient"></input></td>
</tr>



et tu continues ...
1
makfly2301 Messages postés 184 Date d'inscription   Statut Membre Dernière intervention   7
 
C'est gentil j'ai fini mais je t'avais pas demander de me le faire entièrement j'avais juste demander une aide, ça marche nickel et j'ai compris merci
0
Achmon Messages postés 9 Date d'inscription   Statut Membre Dernière intervention   > makfly2301 Messages postés 184 Date d'inscription   Statut Membre Dernière intervention  
 
de rien ;)
0
Réponse 2 / 2
Achmon Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
et pourquoi tu n'utilises pas un tableau ? enfin je penses que c un bon moyen d'organiser un formulaire !
0
makfly2301 Messages postés 184 Date d'inscription   Statut Membre Dernière intervention   7
 
oui je c'est mais je n'arrive pas a le mettre dedans pourrait tu m'aider stp
merci
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses