Bugg CSS

Résolu

roms75001 Messages postés 395 Date d'inscription Statut Membre Dernière intervention -
roms75001 Messages postés 395 Date d'inscription Statut Membre Dernière intervention - 22 avril 2015 à 17:17

Bonjour,

Étant étudiant en deuxième année de BTS Informatique et réseaux pour l'industrie et les services techniques (IRIS), j'ai un projet à réaliser pour l'examen de fin d'année.

Pour ma part, je dois réaliser un site web d'achat de billets d'avion. Le site doit pouvoir proposer différentes destinations, avec différents horaires, avec différentes compagnies etc. Il serait équivalent aux sites tels que https://www.govoyages.com/ ou encore https://www.kayak.fr/ .

J'ai commencé par faire mon HTML ainsi que mon CSS.
Après avoir finalisé ma premiere page, un petit soucis m'embête :

Quand je clic sur un "input" pour pouvoir remplir le champ, les cases se décalent sur la droite.

Peut être qu'il y a une erreur sur mon css ?

Le voici :

body
{
 margin : 0;

}

#header
{
 background-color:white;
 width: auto;
 height: 18%;
 margin-left: 100px;
 padding-top: 15px;
}

#logo
{
 width: 380px;
 height: 90px;
}

#menu
{
 width: 100%;
 height: 35px;
 background-image: url("./images/menu.png");
 background-repeat:no-repeat;
 background-size:100% 
}

#menu ul
{
 text-align: center;
 font-size:20px;
 margin-top:0px;
 background-repeat:no-repeat;
 padding-top: 4px;
 }
 
#menu a
{
 color: white;
 text-decoration: none;
 margin-left: 50px;
 margin-right: 50px;
}

#menu a:hover
{
 color: #FF8000;
}

.corps
{
 background-image:radial-gradient(#FFE200, #FF9100);
 padding-top: 20px;
}

.div_corps
{
 background-color:radial-gradient(white, #57CBDF);
 border:1px solid #9FC6FF;
 /*arrondir les coins en haut à gauche et en bas à droite*/
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:4px;
 box-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
}

.mots_clés
{
 color: #CB0044;
}

/****************************************************************** PAGE INDEX ******************************************************************/
#div_corps_index
{
 background-image: url("./images/monde.jpg");
 height: 585px;
 width: 100%;
 background-repeat:no-repeat;
 background-size:100%;
}

#titre_form
{
 color: #3E3D40;
 font-size: 30px;
 text-align: center;
 border:3px solid #0067CE;
 /*arrondir les coins en haut à gauche et en bas à droite*/
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
}

#div_formulaire
{
    float:left;
 padding:10px;
 width:550px;
 height: 450px;
 margin-left: 30%;
 margin-top: 40px;
 background-color: rgba(0, 162, 232, 0.8);
 border:3px solid #0067CE;
 /*arrondir les coins en haut à gauche et en bas à droite*/
 -moz-border-radius:25px;
 -webkit-border-radius:25px;
 border-radius:25x;
 box-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
 
}

#table_form
{
 line-height: 40px;

}
.colonne1 /* Colonnes du formulaire */
{
 padding-left:12%;
 font-family: "Trebuchet MS";
 font-size: 18px;
}

.colonne2
{
 padding-left: 16%;
 font-family: "Trebuchet MS";
 font-size: 18px;
}


.input_mot
{
 width: 200px;
 height: 35px;
 border:2px solid #0067CE;
 /*arrondir les coins */
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 box-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
}

.input_chiffre
{
 width: 38px;
 height: 30px;
 border:2px solid #0067CE;
 /*arrondir les coins */
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 box-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
}
#input_chiffre2
{
 margin-left: 50px;
}
.input_classe
{
 width: 200px;
 height: 35px;
 border:2px solid #0067CE;
 /*arrondir les coins */
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 box-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
}
.rechercher
{
 
 color: white;
 background-image: radial-gradient(#00A2E8, #0067CE);
 font-family: "Ebrima";
 font-weight:bold;
 font-size: 15px;
 height: 35px;
 width: 200px;
 margin-left: 180px;
 margin-top: 20px;
 border:2px solid #0067CE;
 /*arrondir les coins */
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 box-shadow: 0px 2px 8px rgba(0, 0, 0, 1);
 text-align: center;
}

Mon HTML :

<html>
    <head>
        <title>Choose your flight !</title> 
  <meta charset="utf-8" />
  <meta http-equiv="Content-Language" content="fr-fr" /> 
  <link rel="stylesheet" media="screen" type="text/css" href="design.css" />      
 </head>
 
 <body>
 
  <?php include("header.php"); ?> 
  <?php include("menu.php"); ?>
  
  <!-- Corps -->
  <div id="div_corps_index">
   <!-- Formulaire pour trouver un vol -->  
   <div id="div_formulaire">
    <caption><h1 id="titre_form"> TROUVER UN <span class="mots_clés">VOL</span> </h1></caption>
   <form method="post" action="traitement_page1.php"><table id="table_form">
    
    <tr><td class="colonne1">
     <label for="alle_retour" class="colonne1">Aller Retour</label>
     <input type="radio" checked="checked">
    </td>
    <td class="colonne2">
     <label for="aller" class="colonne2" >Aller Simple</label>
     <input type="radio" onClick="self.location.href='index_simple.php'">
    </td></tr>
     
    <tr><td class="colonne1">
     <label>Départ</label> : <br><input type="text" name="depart" placeholder="Paris" class="input_mot" />

    </td>
    <td class="colonne2">
     <label>Arrivée</label> : <br><input type="text" name="arrivee" placeholder="Rome" class="input_mot" />
    </td></tr>
         
    <tr><td class="colonne1">
     <label>Date de départ :</label><br><input type="text" name="date_depart" onclick="ds_sh(this);" placeholder="16/06/2015" class="input_mot"/>
    </td>
    <td class="colonne2">   
     <label>Date de retour :</label><br><input type="text" name="date_retour" onclick="ds_sh(this);" placeholder="23/06/2015" class="input_mot"/>
    </td></tr>
    <tr><td class="colonne1">
     <label name="adultes" class="colonne1_1">Adulte(s) :</label>
     <label name="enfants" class="colonne1_2">Enfant(s) :</label>
    </td>
    <td class="colonne2">
     <label name="classe" "colonne2">Classe :</label>
    </td></tr>
    <tr><td class="colonne1">
     <select name="adultes" class="input_chiffre"> <!-- menu deroulant pour choisir le nombre de voyageurs -->
        <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>
     </select>
     <select name="enfants" id="input_chiffre2" class="input_chiffre">
        <option value="1">0</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>
     </select></td>
     <td class="colonne2"><select name="classe" class="input_classe"> 
        <option value="economique">Economique</option>
        <option value="affaire">Affaire</option>
        <option value="premiere">Première</option>
     </select>
    </td></tr>

   
   </table>
   <input type="submit" value="RECHERCHER UN VOL" name="rechercher" class="rechercher"/>
   </form></div> <!-- fin de la div "formulaire" -->   

   
   
  
  </div> <!-- fin de la div "corps" -->
 </body>
</html>

En tout cas je ne la trouve pas !

Quelqu'un peut-il m'aider ?

Merci d'avance !

Afficher la suite

A voir également:

Bugg CSS
Css download - Télécharger - HTML
Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
Css ligne horizontale ✓ - Forum CSS
Enlever le soulignage des lien. - Forum CSS
Enlever soulignement lien css ✓ - Forum CSS

1 réponse

Réponse 1 / 1

Utilisateur anonyme

Bonjour

Chez moi, pas de cases qui se décalent avec Chrome, ni FF, ni IE. La cause est peut-être dans les include (que je n'ai pas).

Par contre, problèmes dans ton HTML, au minimum :
- tu n'as pas de DOCTYPE
- <caption> utilisé en dehors d'une table : voir https://www.w3schools.com/tags/tag_label.asp
- labels avec des "for" qui ne désignent pas des éléments de formulaire

roms75001 Messages postés 395 Date d'inscription Statut Membre Dernière intervention 7

Bonjour,

Merci pour votre réponse, pour les petites erreurs, j'ai fais le changement :

 <!DOCTYPE html>
<html>
    <head>
        <title>Choose your flight !</title> 
  <meta charset="utf-8" />
  <meta http-equiv="Content-Language" content="fr-fr" /> 
  <link rel="stylesheet" media="screen" type="text/css" href="design.css" />      
 </head>
 
 <body>
 
  <?php include("header.php"); ?> 
  <?php include("menu.php"); ?>
  
  <!-- Corps -->
  <[/contents/242-introduction-au-dynamic-html-dhtml div] id="div_corps_index">
   <!-- Formulaire pour trouver un vol -->  
   <div id="div_formulaire">
    <h1 id="titre_form"> TROUVER UN <span class="mots_clés">VOL</span> </h1>
   <form method="post" action="traitement_page1.php"><table id="table_form">
    
    <tr><td class="colonne1">
     <label>Aller Retour</label>
     <input type="radio" checked="checked">
    </td>
    <td class="colonne2">
     <label>Aller Simple</label>
     <input type="radio" onClick="self.location.href='index_simple.php'">
    </td></tr>
     
    <tr><td class="colonne1">
     <label>Départ</label> : <br><input type="text" name="depart" placeholder="Paris" class="input_mot" />

    </td>
    <td class="colonne2">
     <label>Arrivée</label> : <br><input type="text" name="arrivee" placeholder="Rome" class="input_mot" />
    </td></tr>
         
    <tr><td class="colonne1">
     <label>Date de départ :</label><br><input type="text" name="date_depart" onclick="ds_sh(this);" placeholder="16/06/2015" class="input_mot"/>
    </td>
    <td class="colonne2">   
     <label>Date de retour :</label><br><input type="text" name="date_retour" onclick="ds_sh(this);" placeholder="23/06/2015" class="input_mot"/>
    </td></tr>
    <tr><td class="colonne1">
     <label name="adultes" class="colonne1_1">Adulte(s) :</label>
     <label name="enfants" class="colonne1_2">Enfant(s) :</label>
    </td>
    <td class="colonne2">
     <label name="classe" "colonne2">Classe :</label>
    </td></tr>
    <tr><td class="colonne1">
     <select name="adultes" class="input_chiffre"> <!-- menu deroulant pour choisir le nombre de voyageurs -->
        <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>
     </select>
     <select name="enfants" id="input_chiffre2" class="input_chiffre">
        <option value="1">0</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>
     </select></td>
     <td class="colonne2"><select name="classe" class="input_classe"> 
        <option value="economique">Economique</option>
        <option value="affaire">Affaire</option>
        <option value="premiere">Première</option>
     </select>
    </td></tr>

   
   </table>
   <input type="submit" value="RECHERCHER UN VOL" name="rechercher" class="rechercher"/>
   </form></div> <!-- fin de la div "formulaire" -->  
  
  </div> <!-- fin de la div "corps" -->
 </body>
</html>

En revanche j'ai toujours la problème sur chrome mais pas sur Firefox

Voici mes includes :

include header :

  <div id="header"><a href="index1.php"><img id=logo src="./images/logo.png" alt="logo"/></a>
  </div>

include menu :

  <div id="menu"><ul>
  </div></ul>

Utilisateur anonyme

Tout d'abord mes excuses, j'avais mal fait mes essais, ton CSS n'était pas pris en compte. Correction faite, j'ai bien le même problème que toi.
Apparemment, ça vient du padding-left en % dans les classes .colonne1 et .colonne2. Ça marche beaucoup mieux en mettant une largeur absolue (en px).
Je suppose que ça vient du fait que les % dépendent de la largeur de la colonne, qui elle-même dépend de ce padding. Chrome doit recalculer à chaque clic, pas Firefox. Certains de tes éléments sont dimensionnés, d'autres non, il y a peut-être un problème de cohérence entre les diverses valeurs.

roms75001 Messages postés 395 Date d'inscription Statut Membre Dernière intervention 7

Merci bien, le problème est résolu :)

Discussions similaires

Enlever le soulignement sous les liens en HTML/CSS

indice et exposant en css ?

Enlever trait sous un lien href

CSS/Comment enlever couleur liens ?

Background color css

Votre réponse

Discussions similaires