Fixer les fieldset quelquesoit le niveau zoom

Fermé
razily Messages postés 250 Date d'inscription lundi 9 mars 2009 Statut Membre Dernière intervention 4 décembre 2013 - 4 juin 2010 à 12:03
Bonjour à tous ;
je débute en html et css ; et en ce moment je crée une application php ; mais voilà je suis confronté à un problème que j'ai dû mal à résoudre durant qlq semaines et que çà commence à me casser la tête :
voici le code:
<html>
    <head>
          <link rel="stylesheet" media="screen"type="text/css"
                  title="styleAuto" href="auto.css"/>
    </head>

</html>

<body>



<html>

<head>

        <title>Fonction recherche</title>
       <!--  <link rel="stylesheet" media="screen"type="text/css"
                  title="styleAuto" href="recherch.css"/>  -->

      <!--    <link rel="stylesheet" media="screen"type="text/css"
                  title="styleAuto" href="auto.css"/> -->

    </head>
    <body>




    


       



    

         </body>
         </html>




  

  


      

          





  


    




         
</body>
</html>

<fieldset class="general"><legend>Général </legend>
<label>Client:</label> 
<label class="gen"> Ronaldo <br /> 
</label> <label>Cabinet:</label> 
<label class="gen">Michel </label><br /> 
<label> Dossier Complet:</label>
<input type="checkbox" name="complet" checked="true" />
 <br /> <label>Type de paiement :</label>
 <label class="gen">Prélèvement automatique </label> <br />
 <label>Numéro client :</label> 
 <label class="num">2007 </label></fieldset> <body>
 <fieldset class="police">  <legend>Police :</legend> 
 <table class="tablepolice"> <tbody> 
 <tr><td>Police :</td> <td class="pol">Automobile</td> 
 <td>Contrat soumis Révision :</td> <td colspan="5"> 
 <input type="checkbox" name="complet"  /> </td> </tr>
 <tr> <td> <label> Contrat :</label></td>
 <td class="valeur">PPE</td> <td>Compagnie:</td><td colspan="3"class="valeur">RISQUES PARTICULIERS</td> 
 <td>Paiement :</td><td class="valeur">Mensuel</td> </tr>
 <tr>   <td>Date création :</td>  
 <td class="valeur">29/01/2007  </td>  
 <td>Date perte :</td> <td class="valeur"> </td>
 <td>Avenants :</td> <td class="valeur"> </td> 
 <td>Prime TTC :</td>  <td class="valeur">0 </td>  </tr> 
 <tr> <td>Numéro :</td> <td class="pol">4156879</td>
 <td>Date effet:</td><td class="valeur">29/01/2007</td><td>Indice:</td>
 <td class="valeur">0.0</td><td>Gestion:</td><td class="valeur"> Non Confiée</td>
 </tr> <tr> <td>Etat :</td><td class="valeur">En cours</td>  <td>Date écheance :</td>
 <td class="valeur">01/02/2008</td> <td>Relance :</td> <td>
 </td><td>Apporteur:</td> <td class="valeur"> Aucun  </td> </tr> 
 <tr> <td>Cont:</td><td class="valeur">Aucun</td> <td>Rés./susp</td> 
 <td class="pol"> </td> <td>Historique:</td> <td class="valeur"></td> 
 <td>Commercial:</td>  <td> </td>  </tr> </tbody> </table> </fieldset><fieldset class="conducteur">
 <legend>Conducteur</legend> <label for="bonusAncien"> Conducteur habituel:</label> 
 <label class="gen">Ronaldo</label><br /> <label for="bonusAncien">Né le :</label>  
 <label class="gen">09/06/1969  </label> <br /><label for="bonusAncien">  Numéro permis:</label> 
 <label class="num">020977439    </label><br /> 
 <label for="bonusAncien"> Permis:</label>  <label class="gen">B<br /> 
 </label><label for="bonusAncien">Date Permis:</label> 
 <label class="gen">25/09/2006  </label> </fieldset> <fieldset class="vehicule"> 
 <legend>Véhicule</legend> <div class="tetevehicule">
 <label for="categorie">Catégorie:</label><label class="gen">
 <strong>V.Particulier </strong>
 </label> <br/> <label for="marque">Marque:</label> 
 <label class="gen">VOLKSWAGEN </label><br /> <label for="bonusAncien">Bonus Malus Ancien :</label> 
 <label class="gen"> </label>
 <br /> <label for="bonusAncien">Bonus Malus  :</label> 
 <label class="gen">1,00 </label><br /> 
 <label for="bonusAncien"> Condition generales :</label> 
 <label class="gen"> </label><br /> <label for="bonusAncien"> Date Condition generales :</label> 
 <label class="gen"> </label> <br/> <label for="bonusAncien">  Mise en circulation  :</label>
 <label class="gen">04/09/1986  </label></div><div class="milieuvehicule">
 <br /> <label for="bonusAncien">  Type de véhicule :</label> 
 <label class="gen">GOLF C<br /> </label> <label for="bonusAncien">  Cylindree :</label> <label class="gen">06</label><br />
 <label for="bonusAncien">  Immatriculation:</label> <label id="immat">723 WL 93</label><br /> 
 <label for="bonusAncien">Modèle:</label><label class="gen">19MH12 </label><br /> <label for="bonusAncien">Numéro de série:</label> 
 <label class="gen">WVWZZZ19Z6513<br />  </label> 
 <label for="bonusAncien"> Poids TTC :</label> <label class="gen">1T360 </label><br/>
 <label for="bonusAncien"> Nombres de places :</label><label class="gen">5</label>  </div> 
 <div class="remorque"><fieldset><legend><i>Remorque</i></legend><label>Marque:</label>
 <label class="gen"></label><br /><label>Immatriculation:</label> <label class="gen"> </label><br />
 <label>Valeur:</label>  <label class="gen">.0000 </label><br /> <label>Année:</label> <label class="gen"> </label>  
 <br /> <label>PTC:</label> <label class="gen">0 </label> <br /> </fieldset> </div></fieldset> <fieldset class="utilisation"> 
 <legend>Utilisation </legend> <label for="bonusAncien">Usage Compagnie :</label> <label class="util">DPP  </label><br />
 <label for="bonusAncien">Conduite exclusive :</label><input type="checkbox" name="complet"    /> 
 <label id="zone"> Zone :</label> <label class="gen"> </label><br /> 
 <label id="autreconducteur"> Autre Conducteur :</label>  <label class="util"></label><br /> 
 <label for="bonusAncien"> Date naissance :</label><label class="util"> </label><br /> 
 <label for="bonusAncien"> Permis :</label><label class="util"> </label><br /> 
 <label for="bonusAncien"> numero permis :</label> <label class="numpermis"> 
 </label><br /><label for="bonusAncien"> Date permis :</label><label class="util"> 
 </label> <br /> </fieldset> <fieldset class="garanties"><legend>Garanties:</legend> 
 <div id="partie1"> <label for="bonusAncien"> RCPJ :</label><input type="checkbox" name="complet"  checked />
 <br />  <label for="bonusAncien">Bdg :</label><input type="checkbox" name="complet"   /><br /> 
 <label for="bonusAncien">Vol :</label><input type="checkbox" name="complet"  /><br /> 
 <label for="bonusAncien">Incendie :</label><input type="checkbox" name="complet" /><br /> 
 <label for="bonusAncien">Tempetes :</label><input type="checkbox" name="complet"   /><br />  
 <label for="bonusAncien">Cat.nat :</label><input type="checkbox" name="complet"  checked /><br />
 <label for="bonusAncien">DTA :</label><input type="checkbox" name="complet"   /><br /> <label for="bonusAncien"> Access :</label>
 <input type="checkbox" name="complet"    /><br /> <label for="bonusAncien">  Effets :</label><input type="checkbox" name="complet"  /><br /> 
 <label for="bonusAncien">   Conducteur :</label><input type="checkbox" name="complet"  checked/><br /> <label for="bonusAncien">Véh remp:</label>
 <input type="checkbox" name="complet"  /><br />   <label for="bonusAncien">Ind leasing:</label><input type="checkbox" name="complet"    /><br />
 <label for="bonusAncien">Dom.Collision:</label><input type="checkbox" name="complet"   /> </div>  <div id="partie2"> <fieldset class="montant">
 <legend><i>Franchise et Montants</i></legend><label for="bonusAncien">Franchise Vol:</label>0  <br /><label for="bonusAncien">Franchise incendie:</label>0 <br />
 <label for="bonusAncien">Franchise dommage:</label>0 <br />
 <label for="bonusAncien">Franchise tempetes:</label>0 <br /> 
 <label for="bonusAncien">Franchise effets:</label>0 <br />
 <label for="bonusAncien">Franchise conducteur:</label>0 <br />
 <label for="bonusAncien">Franchise accessoires:</label>0 <br /> 
 <label for="bonusAncien">Franchise conducteur exclusif:</label><br /> 
 <label for="bonusAncien">Franchise Catastrophe nat:</label>.0000 <br />
 <label for="bonusAncien">Franchise Dom.Collision:</label>0 <br />
 <label for="bonusAncien">Conducteur novice:</label><input type="checkbox" name="complet"  checked />
 <br /><label for="bonusAncien">Franchise Conducteur novice:</label><label class="gen">750.00  </label> <br /> 
 <label for="bonusAncien">Montant effets:</label>0 <br /></fieldset></div><fieldset class="infos"> 
 <legend><i>Autres Infos</i></legend><label for="bonusAncien">Date controle technique:</label><br />
 <label for="bonusAncien">  Optique comprise:</label><input type="checkbox" name="complet"   /> 
 <br /></fieldset> <fieldset class="protection"><legend><i>Protections</i></legend>
 <label>Gravage</label><input type="checkbox" name="complet"   /><br /><label>Alarme Agréé</label><input type="checkbox" name="complet"    />
 <br /> <label>Type de garage:</label> <label class="gen">Voie publique</label><br /> </fieldset></fieldset><br />



la partie css :
*
{
    background-color: white;
}

fieldset
{
   /* background-color: silver; */

    background-color: white; 
}
legend
{

    font-weight: bold;
    font-size: large;


    font-style: italic;
}
/* fieldset general */
.general
{

    display: block;
     width: 38%;

    height: 4.5cm;


   
   
}
/*les labels valeurs ds generation*/
.gen
{
  
    color: blue;
    text-align: center;
    font-size: large;

     
}
.num
{
    
    color: red;
    
    font-size: large;
   
    
  
}


 
label,td
{

    
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: medium;
    font-weight: bolder;
     
        
  
}

/* fieldset police */

.police
{

    
    
    border-top-width: 10px;
    border-top-color: red;
    border-bottom-width: 10px;
    border-bottom-color: red;
}

.pol
{
    
    color: red;
   text-align: center;
}

.tablepolice
{


   border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
    border-top-style: solid;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;

     height: 5cm;
    width: 100%;
}

.tablepolice td
{

   
    border-right-style: solid;

    border-left-style: solid;
    border-bottom-style: solid;
    border-top-style: solid;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-collapse: collapse;
    

}

.valeur
{
    color: blue;

    text-align: center;
}

/* on passe au conducteur */
.conducteur
{
    display: block;
      width: 30%;

    position: absolute;
    left: 40%;

    top: 1%;

    height: 4.5cm;
}

/*on passe au fieldset utilisation*/
.utilisation
{

    width: 25.5%;
    
    position: absolute;
    height: 4.5cm;
    top: 1%;
    left: 72%;
}

/* pour la zone */
#zone
{
    
    margin-left: 0.5cm;

   
}

.numpermis
{
    
    color: red;
}
.util
{
    font-size: large;

    color: blue;
}

/* pour autre conducteur */
#autreconducteur
{
    
    font-style: italic;
    text-decoration: underline;
}
/* vehicule */


#immat
{
    
    color: red;
}



.milieuvehicule
{
    display: block;
    
    position: absolute;
    left: 500px;
    

    top: 445px;



   
   
    
    height: 5cm;
}

.remorque
{
    display: block;
     width: 30%;


    
    position: absolute;
    left: 69.5%;

    top: 451px;
}


#partie2
{

    display:block ;
    position: absolute;



    top: 655px;
    left: 500px;
}

/* garantie fieldset*/
.garanties
{

   
   display: block;

  
}

/*protection */
.protection
{

    display: block;
    width: 27.5%;
    position: absolute;

    left: 70%;

    
    
    top: 660px;
}

.infos
{

    display: block;
    width: 27.5%;

    position: absolute;

    left: 70%;
    top: 800px;
}

/*franchise et montant */

.montant
{


  display: block;
     height: 6.5cm;
    left: 50%;

    
    top: 90%;
    
   
}

/* fieldset residence - veranda -protection */
.residence
{

   
   
    width: 10%;
}



si vous tester ces codes ; vous allez être confronté à un problème délicat et j'en suis sûr que c'est la partie css qui est la cause vu que je ne maitrise pas trop :
le premier problème ; les fieldset qui seront placés selon le code css
dès fois s'affiche pas dans la bonne position je veux dire au lieu d'être aligné ; s'écarte et encore pire dès fois l'affichage diffère selon le navigateur (IE ou firefox ) ; je ne sais pas trop ce qui m'a surpris c'est que j'ai testé le même code sur firefox sur mon portable ; et quand je voulais tester et installer sur un autre avec firefox çà se comporte différemment et même la police n'est plus la même
pire sur IE rien ne va plus ; les fieldset qui se met n'importe où ; avec des caractères très grand ; il faut toujours réduire le zoom

si quel'qu'un aura une solution à tout ces prblèmes ; je serai ravi :aie:

merci d'avance


A voir également: