Connexion | Inscription | FAQ
Anonymous

Conseil sur mon code

+ Publier une réponse

3 messages Page 1 sur 1


Conseil sur mon code

par arsouille » Sam Nov 06, 2010 9:32 pm

Bonjour,

Débutant, j'ai créer une page html avec des formulaires.
Afin d'éviter les tableaux, je tente de gérer la mise en page via les CSS.
Cependant, la gestion des "float" est un peu délicats.
Mon code ci-dessous fonctionne sous Mozilla et IE, mais je suis sur qu'il n'est pas optimisé.
Si quelqu'un pouvait me conseiller

Merci

le code html

Code: Tout sélectionner
<form method="post">

<fieldset id="fieldset_information_acte" class="fieldset_enregistrement_acte_naissance">
<legend id="legend_information_acte" class="legend_enregistrement_acte_naissance">Informations sur l'acte</legend>

<div class="colonne1">
<label id="label_etablissement" class="label_enregistrement_acte_naissance">Etablissement :</label>
<br />
<label id="label_numero_acte" class="label_enregistrement_acte_naissance">N° de l'acte :</label>
<br />
<label id="label_ville_acte" class="label_enregistrement_acte_naissance">Ville :</label>
</div>

<div class="colonne2">
<select id="select_lieu_acte" class="select_enregistrement_acte_naissance" name="lieuacte"><option></option><option value="Mairie">Mairie</option><option value="Archives départementales">Archives départementales</option><option value="Archives régionales">Archives régionales</option><option value="Autre">Autre</option></select>
<br />
<input id="input_numero_acte" class="input_enregistrement_acte_naissance" name="numero_acte" type="text" />
<br />
<input id="input_ville_acte" class="input_enregistrement_acte_naissance" name="ville_acte" type="text" />

</div>

<div class="colonne3">
<label id="label_numero_bobine" class="label_enregistrement_acte_naissance">N° bobine / livre :</label>
<br />
<label id="label_jour_acte" class="label_enregistrement_acte_naissance">Date :</label>
</div>

<div class="colonne4">
<input id="input_numero_bobine" class="input_enregistrement_acte_naissance" name="numerobobine" type="text" />
<br />
<select id="select_jour_acte" class="input_enregistrement_acte_naissance" "name="select_jour_acte"><option></option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option> </select> <select id="select_mois_acte" class="input_enregistrement_acte_naissance" "name="select_mois_acte"><option></option><option value="Janvier">Janvier</option><option value="Février">Février</option><option value="Mars">Mars</option><option value="Avril">Avril</option><option value="Mai">Mai</option><option value="Juin">Juin</option><option value="Juillet">Juillet</option><option value="Août">Août</option><option value="Septembre">Septembre</option><option value="Octobre">Octobre</option><option value="Novembre">Novembre</option><option value="Décembre">Décembre</option></select> <select id="select_annee_acte" class="input_enregistrement_acte_naissance" "name="select_annee_acte"><option></option><option value="1650">1650</option><option value="1651">1651</option><option value="1652">1652</option><option value="1653">1653</option><option value="1654">1654</option><option value="1655">1655</option><option value="1656">1656</option><option value="1657">1657</option><option value="1658">1658</option><option value="1659">1659</option><option value="1660">1660</option><option value="1661">1661</option><option value="1662">1662</option><option value="1663">1663</option><option value="1664">1664</option><option value="1665">1665</option><option value="1666">1666</option><option value="1667">1667</option><option value="1668">1668</option><option value="1669">1669</option><option value="1670">1670</option><option value="1671">1671</option><option value="1672">1672</option><option value="1673">1673</option><option value="1674">1674</option><option value="1675">1675</option><option value="1676">1676</option><option value="1677">1677</option><option value="1678">1678</option><option value="1679">1679</option><option value="1680">1680</option><option value="1681">1681</option><option value="1682">1682</option><option value="1683">1683</option><option value="1684">1684</option><option value="1685">1685</option><option value="1686">1686</option><option value="1687">1687</option><option value="1688">1688</option><option value="1689">1689</option><option value="1690">1690</option><option value="1691">1691</option><option value="1692">1692</option><option value="1693">1693</option><option value="1694">1694</option><option value="1695">1695</option><option value="1696">1696</option><option value="1697">1697</option><option value="1698">1698</option><option value="1699">1699</option><option value="1700">1700</option><option value="1701">1701</option><option value="1702">1702</option><option value="1703">1703</option><option value="1704">1704</option><option value="1705">1705</option><option value="1706">1706</option><option value="1707">1707</option><option value="1708">1708</option><option value="1709">1709</option><option value="1710">1710</option><option value="1711">1711</option><option value="1712">1712</option><option value="1713">1713</option><option value="1714">1714</option><option value="1715">1715</option><option value="1716">1716</option><option value="1717">1717</option><option value="1718">1718</option><option value="1719">1719</option><option value="1720">1720</option><option value="1721">1721</option><option value="1722">1722</option><option value="1723">1723</option><option value="1724">1724</option><option value="1725">1725</option><option value="1726">1726</option><option value="1727">1727</option><option value="1728">1728</option><option value="1729">1729</option><option value="1730">1730</option><option value="1731">1731</option><option value="1732">1732</option><option value="1733">1733</option><option value="1734">1734</option><option value="1735">1735</option><option value="1736">1736</option><option value="1737">1737</option><option value="1738">1738</option><option value="1739">1739</option><option value="1740">1740</option><option value="1741">1741</option><option value="1742">1742</option><option value="1743">1743</option><option value="1744">1744</option><option value="1745">1745</option><option value="1746">1746</option><option value="1747">1747</option><option value="1748">1748</option><option value="1749">1749</option><option value="1750">1750</option><option value="1751">1751</option><option value="1752">1752</option><option value="1753">1753</option><option value="1754">1754</option><option value="1755">1755</option><option value="1756">1756</option><option value="1757">1757</option><option value="1758">1758</option><option value="1759">1759</option><option value="1760">1760</option><option value="1761">1761</option><option value="1762">1762</option></select>
</div>

</fieldset>


<fieldset id="fieldset_renseignement_enfant" class="fieldset_enregistrement_acte_naissance">
<legend id="legend_renseignement_enfant" class="legend_enregistrement_acte_naissance">Renseignements sur l'enfant :</legend>

<div class="colonne5">
<label id="label_nom_enfant" class="label_enregistrement_acte_naissance">Nom :</label>
</div>

<div class="colonne6">
<input id="input_nom_enfant" class="input_enregistrement_acte_naissance" name="input_nom_enfant" type="text" />
</div>

</fieldset>

<br>
<input type="submit" value="Enregistrement de l'acte de naissance" />

</form>




Le code du CSS

Code: Tout sélectionner
form {
background-color:#e5eeff;
padding:10px;
width:640px;
}

.colonne1
{
float:left;
width:18%;
}

.colonne2
{
float:left;
width:32%;
}

.colonne3
{
float:left;
width:18%;
}

.colonne4
{
float:left;
width:32%;
}

.colonne5
{
float:left;
width:18%;
}

.colonne6
{
float:left;
width:32%;
}


/* Class fieldset */
.fieldset_enregistrement_acte_naissance
{
background-color:#E6E6E6;
border: 1px solid #DCD069 ;
padding:10px;
margin:5px;
}


/* Class legend */
.legend_enregistrement_acte_naissance
{
font-weight:bold;
color:#FF0096;
font-size:1.2em;
}

/* Class label */
.label_enregistrement_acte_naissance
{
font-size:0.9em;
}

/* Class select */
.select_enregistrement_acte_naissance
{
font-size:0.9em;
}

/* Class input */
.input_enregistrement_acte_naissance
{
font-size:0.9em;
}

/* Id label label_etablissement dans Informations sur l'acte */
#label_etablissement
{
position:relative;
top:3px;
}

/* Id select select_lieu_acte dans Informations sur l'acte */
#select_lieu_acte
{
width:170px;
}

/* Id label label_numero_bobine dans Informations sur l'acte */
#label_numero_bobine
{
position:relative;
top:3px;
}

/* Id Input input_numero_bobine dans Informations sur l'acte */
#input_numero_bobine
{
}

/* Id label label_numero_acte dans Informations sur l'acte */
#label_numero_acte
{
position:relative;
top:10px;
}

/* Id Input label_numero_acte dans Informations sur l'acte */
#input_numero_acte
{
position:relative;
top:3px;
}

/* Id label label_jour_acte dans Informations sur l'acte */
#label_jour_acte
{
position:relative;
top:10px;
}

/* Id select select_jour_acte dans Informations sur l'acte */
#select_jour_acte
{
position:relative;
top:3px;
width:40px;
}

/* Id select select_mois_acte dans Informations sur l'acte */
#select_mois_acte
{
position:relative;
top:3px;
width:90px;
}

/* Id select select_annee_acte dans Informations sur l'acte */
#select_annee_acte
{
position:relative;
top:3px;
width:55px;
}

/* Id label ville_acte dans Informations sur l'acte */
#label_ville_acte
{
position:relative;
top:17px;
}

/* Id Input input_ville_acte dans Informations sur l'acte */
#input_ville_acte
{
position:relative;
top:6px;
}

/* Id label label_numero_bobine dans Informations sur l'acte */
#label_numero_bobine
{
position:relative;
top:3px;
}

/* Id Input input_numero_bobine dans Informations sur l'acte */
#input_numero_bobine
{
}

/* Id label label_nom_enfant dans Informations sur l'acte */
#label_nom_enfant
{
position:relative;
top:3px;
}

/* Id Input input_nom_enfant dans Informations sur l'acte */
#input_nom_enfant
{
}

.colonne1
{
float:left;
width:18%;
}

.colonne2
{
float:left;
width:32%;
}

.colonne3
{
float:left;
width:18%;
}

.colonne4
{
float:left;
width:32%;
}

.colonne5
{
float:left;
width:18%;
}

.colonne6
{
float:left;
width:32%;
}
Avatar de l’utilisateur

arsouille

  • Messages: 1
  • Inscrit le: Sam Nov 06, 2010 9:23 pm

Re: Conseil sur mon code

par HTML.net » Dim Nov 07, 2010 3:17 pm

Salut arsouille. Il semble bon! Je vois quelques erreurs mineures. Essayez de le valider sur le W3C: http://validator.w3.org/. Vous vérifiez la mise en page dans tous les navigateurs ici: http://browsershots.org/

[Hi arsouille. It looks good! I can see a few minor errors. Try to validate it on W3C: http://validator.w3.org/. You check the layout in all browser here: http://browsershots.org/]

- Andreas, HTML.net
Avatar de l’utilisateur

HTML.net
Site Admin

  • Messages: 1194
  • Inscrit le: Sam Sep 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.

Re: Conseil sur mon code

par kevin » Lun Jan 24, 2011 12:50 am

coucou je te conseil le site du zéro on t'aidera aussi
Avatar de l’utilisateur

kevin

  • Messages: 4
  • Inscrit le: Lun Jan 24, 2011 12:44 am


+ Publier une réponse

Page 1 sur 1