j'ai un formulaire avec une partie commune à toutes les pages et un partie qui n'est pas commune.
J'aimerais savoir comment faire pour ne pas répercter à chaque fois la artie commune en changeant de class de div.
voici le code html:
voici la partie commune de mon css
et voici la partie qui change
Merci d'avance pour votre aide.
J'aimerais savoir comment faire pour ne pas répercter à chaque fois la artie commune en changeant de class de div.
voici le code html:
<form action="#">
<div id="titreForm">Inscription : Etape 1 </div>
<div id="corpForm">
<fieldset id="coordonnees">
<legend>Vos coordonnées</legend>
<p class="double">
<label for="f1-nom" class="oblig">* Nom :</label>
<input type="text" id="f1-nom" name="nom" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p class="double">
<label for="f1-prenom" class="oblig">* Prénom :</label>
<input type="text" id="f1-prenom" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p class="double">
<label for="f1-adresse" class="oblig">* Adresse :
<span class="info">(Numéro et rue)</span></label>
<input type="text" id="f1-adresse" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p class="double">
<label for="f1-ville" class="oblig">* Ville :
<span class="info"></span></label>
<input type="text" id="f1-ville" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p class="double">
<label for="f1-codepostal" class="oblig">* Code postal :
<span class="info"></span></label>
<input type="text" id="f1-codepostal" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p class="double">
<label for="f1-pays" class="oblig">* Pays :
<span class="info"></span></label>
<SELECT name="mark" class="font">
<optgroup label="Europe">
<OPTION value="france" selected="selected">France</option>
<OPTION value="allemagne">Allemagne</option>
</optgroup>
<optgroup label="Afrique">
<OPTION value="algerie">Algérie</option>
<OPTION value="nigeria">Nigéria</option>
<OPTION value="senega">Sénégal</option>
</optgroup>
<optgroup label="Asie">
<OPTION value="chine">Chine</option>
<OPTION value="tibet">Tibet</option>
<OPTION value="arabie saoudite">Arabie Saoudite</option>
</optgroup>
</SELECT>
</p>
<p class="double">
<label for="f1-telephone" class="nonoblig">Téléphone : </label>
<input type="text" id="f1-telephone" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p class="double">
<label for="f1-mail" class="oblig">* mail : </label>
<input type="text" id="f1-mail" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p>
<p class="double">
<label for="f1-mail" class="oblig">* Confirmer votre mail : </label>
<input type="text" id="f1-mail" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p class="double">
<label for="f1-motdepasse" class="oblig">* Mot de passe : </label>
<input type="password" id="f1-motdepasse" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<p class="double">
<label for="f1-motdepasse" class="oblig">* Confirmer votre mot de passe : </label>
<input type="password" id="f1-motdepasse" onfocus="this.className='focus';" onblur="this.className='normal';" />
</p>
<fieldset id="cond">
<legend>Conditions</legend>
<p align="left"><br>
<input type="checkbox" name="checkbox" value="1">
Je déclare avoir pris connaissance des conditions générales d'utilisation du service et en
accepte les termes en cochant cette case<br> (pour connaître les conditions générales d'utilisation
<a href="cond_ventes.htm">Cliquez ici</a>
</p>
</fieldset>
</fieldset>
<br />
<em>* Champs obligatoires</em>
</div> <!-- fin de corpForm -->
<div id="piedForm">
<input type="submit" value="Envoyer ces informations" />
</div>
</form>
voici la partie commune de mon css
/*******************************************formulaire partie commune : debut************************************************************************/
#titreForm, #piedForm
{ /*** Mise en forme du titre et du pied de formulaire ***/
font: bold 1.1em arial, hevetica, sans-serif;
color: white;
background: orange;
margin: 0;
padding: .5em;
border-color:orange;
}
#corpForm
{ /*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
border: 1px solid orange;
color: black;
background: #efefef;
margin: 0;
padding: 1em;
}
#corpForm label.oblig {
font-weight: bold; /*** Mise en évidence des champs obligatoires ***/
}
#corpForm label.nonoblig {
font-weight: 500; /*** Mise en évidence des champs obligatoires ***/
}
#corpForm .focus { /*** Mise en avant des champs en cours d'utilisation ***/
background: beige;
color: black;
}
#corpForm .normal { /*** Retour à l'état normal après l'utilisation ***/
background: white;
color: black;
}
#piedForm
{
text-align: right; /*** Les boutons sont alignés à droite ***/
}
#piedForm input
{
font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
margin-left: 1em;
}
form p {
margin: 1em 0;
}
form p.double {
/* Empêcher le dépassement des flottants */
overflow: hidden;
width: 100%;
}
form p.double label span.info {
display: block;
margin-top: .2em;
font-size: .8em;
font-weight: normal;
cursor: default;
}
form p.double select
{
padding: 2px 0 0 4px;
width: 52%;
}
form p.double textarea {
padding: 2px 0 0 4px;
width: 65%;
height: 6em;
}
form p.simple {
margin-left: 32%;
}
/*******************************************formulaire partie commune : fin********************************************************************/
et voici la partie qui change
form_etape_01 {
width: 500px;
padding: 10px 20px;
/*background: lavender;*/
/*color: midnightblue;*/
margin-left:auto;
margin-right:auto;
margin-top:10px;
}
form_etape_01 p.double label {
overflow: hidden;
float: left;
width: 30%;
text-align: right;
font-weight: bold;
cursor: pointer;
}
form_etape_01 p.double input,
form_etape_01 p.double select,
form_etape_01 p.double textarea {
display: block;
margin-left: 32%;
width: 50%;
border: solid 1px midnightblue;
padding: 2px 4px;
}
Merci d'avance pour votre aide.
