5184 sujets

Sémantique web et HTML

Bonjour,

Env: (W10/Edge)

Jusqu'à maintenant, j'avais développé et testé mon site web sur mon PC (sous W10/Edge)
sans pbs, tout s'affichait "presque" correctement. (Sauf juste quand je zoomais, des espaces étaient rajoutés à
la fin dernière colonne des tableaux)
mais depuis que la nouvelle version de Edge (Chromium) s'est installée automatiquement.. Smiley decu ( sur
mon PC (W10) , je n'ai que des problèmes d'affichage (même à une taille normale 100%) sur mes tableaux HTML/CSS:
-/ (ajout d'espaces entre la dernière colonne et la bordure du tableau )
-/ (décalages des champs formulaire + débordements) ....

J'ai fait également le test sur Chrome et J'ai également les mêmes pbs.
Je vous ai joint que les parties HTML et CSS . (Tableau + formulaire)
( Concernant le form: Peut-être est ce dû au padding que j'ai été obligé de rajouter entre certains champs du formulaire ?
Je ne sais pas trop déjà comment faire pour revenir à un affichage normal avec le new Edge puis ensuite que ce soit compatible avec les autres browser (Chrome,....)

TABLEAU:
<!DOCTYPE html>
<HTML>
 <head>
  <title> Gestion PILOTAGE </title>
      <meta charset="utf-8"/>
      <script src="jquery-3.4.1.js"></script>
    
      <style> 
        table.scrolldown  { 
            table-layout:fixed;  
            width: 65%;
            margin-left:270px;
            margin-top:100px;
            border-collapse: collapse;
            border-spacing: 0; 
            border: 2px solid black; 
        } 
          
        /* To display the block as level element */ 
        table.scrolldown tbody, table.scrolldown thead { 
            display: block; 
        }  

        table.scrolldown thead { 
            background:lightblue;  
        }  
    
          
        thead tr th { 
            height: 40px;  
            line-height: 40px; 
        } 
          
        table.scrolldown tbody { 
              
            /* Set the height of table body */ 
            height: 100px;  
              
            /* Set vertical scroll */ 
            overflow-y: scroll; 
              
            /* Hide the horizontal scroll */ 
            overflow-x: scroll;  
        } 
          
      
    /*    tbody tr:nth-child(odd){  
            background-color:beige; 
        } 
    */
          
        tbody td, thead th { 
            text-align:center;
            width : 95px; 
            border: 2px solid black;  
            font-size:20px; 
   
        } 

        thead th { 
            border-right: 2px solid black; 
           
        } 

        td.coltitre {
          /*  text-align:center; */
            min-width : 400px;
            max-width:  400px;
            border: 2px solid black;  
            font-size:17px; 
           }

        th.coltitre {
            text-align:center;
            min-width : 400px;
            max-width:  400px;
            border: 2px solid black;  
            font-size:20px; 
           }
 
    
        td.debord, div.debord { 
          /*  text-align:center; */
            overflow:hidden;
            white-space:nowrap;
          /*  max-width:100px;  */
            text-overflow:ellipsis;
           
               } 


    // DONNEES A AFFICHER DS LIGNE DU 1ER TABLEAU 
          //    ----------------------
?>

          <tr class="<?php echo $classe; ?>" >   
     
              <td id="NumLiv" ><?php echo $donnees['Num'];   ?></td>
              <td class="coltitre" ><div class="debord"><?php echo $donnees['Titre']; ?></div></td>
              <td><?php echo $donnees['Annee']; ?></td>  
              <td><input type="checkbox" name="suppcheck[]" value="<?php echo $donnees['Num']; ?>" /></td>
              <td><input type="radio" name="modifradio[]"   value="<?php echo $donnees['Num']; ?>" /></td>

          </tr>

=========================================================================================
FORMULAIRE:
<body>
 
    <form class="formulaire" method="post" >
          <div>
            <fieldset id="field1">
               <legend>Livre</legend>
                 <label for="titreliv">.Titre du Livre :</label>
                 <input list="ttliv" type="text" id="titreliv" name="Titreliv" size="25" required>
			
				  
		  <datalist id="ttliv">
           

 <?php
              try
              {
              // On se connecte ? MySQL
                $bdd = new PDO('mysql:host=localhost;dbname=base2;charset=utf8','root','',array
              (PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)); 
              }

             catch(Exception $e)
              {
               // En cas d'erreur on affiche un msg et on arr?te tout
               die('Erreur : '.$e->getmessage());

               }
 
      
              $reponse = $bdd->query('SELECT Titre FROM LIV ORDER BY Num');

              while ($donnees = $reponse->fetch())
              {
              ?>
                 <option value="<?php echo $donnees['Titre']; ?>"><?php echo $donnees['Titre']; ?>
                 </option>

              <?php
              }
               $reponse->closeCursor();
              ?>             
         

              </datalist>
				 
				 
				 
				 
				 
                 <label for="num" style="padding-left:40px";>.Num : </label><input type="number" id="num" name="Num" size="3" readonly="readonly" >
                 <br/> 
                 <label for="annee" style="margin-right:3px">.Annee edition : </label>
                 <input type="number" id="annee" name="Annee" size="4" >
                 
                <button id="Valid1" type="submit" name="Valid1" value="OKValid1" style="padding : 10px"> VALIDER1 </button>
            

                 <br/> <br/>
            </fieldset>
          </div>
                 
           <div>
            <fieldset id="field2" disabled >
               <legend>Chapitres</legend>  
                 <label for="titrechap">.Chapitre : </label>
                 <input type="text" id="titrechap" name="Titrechap" size="50" required>
                 </br> </br>
            
                 <label for="avion" style="padding-right:6px";>.Avion(s) :</label>
                 <input type="text" id="avion" name="Avion" size="15" required>

                 <label for="cie" style="margin-left:40px" >.Cie : </label>
                 <input type="text" id="cie" name="Cie" size="20" >
                 </br>
                          
                 <label for="date" style="padding-right:33px";>.Date : </label>
	         <input type="text" id="date" name="Date"  placeholder="JJ-MM-AAAA" size="10" maxlength="10"> 
		  
                 <label for="pays" style="padding-left:30px";>.Pays      : </label>
                 <input type="text" id="pays" name="Pays" size="20" >
              
                 </br> </br>
                
                 <label for="comment">.Comment: </label>
                 <input type="text" id="comment" name="Comment" size="40" >
                    
                 </br>
             
                <button id="Valid2" type="submit" name="Valid2" value="OKValid2" style="padding : 10px"> VALIDER2</button>
                 </br> 
            </fieldset>
	
                    

      </form>



Apparement mes lignes ne sont pas colorées comme j'ai à la fois du HTML (au début) puis du CSS et du PHP.., je ne sais pas si j'ai fait une mauvaise ...(désolé pour la lecture pas évidente!) Smiley decu
Merci bcp pour vos conseils car je galère pas mal avec ça !!!!
Modifié par BHR (27 Jul 2020 - 14:25)
Bonjour,
BHR a écrit :
Jusqu'à maintenant, j'avais développé et testé mon site web sur mon PC (sous W10/Edge)
sans pbs, tout s'affichait "presque" correctement.

C'est une performance, bravo ! Smiley smile

BHR a écrit :
... mais depuis que la nouvelle version de Edge (Chromium) s'est installée automatiquement.. Smiley decu ( sur
mon PC (W10) , je n'ai que des problèmes d'affichage (même à une taille normale 100%) sur mes tableaux HTML/CSS:
-/ (ajout d'espaces entre la dernière colonne et la bordure du tableau )
-/ (décalages des champs formulaire + débordements) ....

J'ai fait également le test sur Chrome et J'ai également les mêmes pbs.

Ce que tu vois comme un inconvénient est en fait une chance. Tu vas être obligé de faire un code qui marche partout, ce qui n'était visiblement pas le cas avant.

BHR a écrit :
Je vous ai joint que les parties HTML et CSS . (Tableau + formulaire)
( Concernant le form: Peut-être est ce dû au padding que j'ai été obligé de rajouter entre certains champs du formulaire ?
Je ne sais pas trop déjà comment faire pour revenir à un affichage normal avec le new Edge puis ensuite que ce soit compatible avec les autres browser (Chrome,....)


Il est probable que ton code soit plus portable qu'avant s'il marche sur le "new" Edge. Par contre, il est difficile de te dire ce qui ne va pas avec les parties de code que tu nous donnes. Et ça peut aussi dépendre de ce que contient les cases de ton tableau.

Quelques remarques à défaut de solutions :
1) les "<table>", c'est en général mal (il y a des exceptions, en particulier quand on essaie de faire vraiment un tableau, mais je ne sais pas si c'est ton cas vu qu'on n'a qu'une trop vague idée de ton contenu). Eventuellement, si tes tableaux ne sont pas vraiment des tableaux, il faudrait considérer l'usage des propriétés css "flex" ou "grid". Si par contre tes tableaux sont vraiment des tableaux, il faut garder tes balises "<table>".
2) les "px" dans le css, c'est en général mal (il y a des exceptions, en particulier quand on fait des bordures, mais moins on a de "px", mieux on se porte). Il faudrait donc retirer tous tes "px" et les remplacer par des "%" ou des "em" par exemple (ou utiliser "flex" ou "grid" dans le css), sauf pour les bordures.
3) les "<br>", c'est en général mal (il y a des exceptions, en particulier au milieu de certains contenus, mais jamais en fin de contenu comme tu le fais parfois). Il faudrait donc retirer tous les "<br>" qui sont en fin de contenu.
4) les attributs "style" dans les tags html, c'est en général mal (à réserver à des usages particulier, mais comme pour les "px", moins on a d'attributs "style" dans les tags html, mieux on se porte). Dans ton cas, je ne vois aucune bonne raison de conserver tes attributs "style" dans tes balises html.
5) il y a des erreurs de syntaxe. Par exemple, dans <label for="avion" style="padding-right:6px";>, le dernier ";" doit être juste après le px et non pas après le guillemet. Mais bon, comme tu vas de toute façon supprimer les attributs "style" ... Smiley smile

Amicalement,
Bonjour Parsimonhi,

Merci bcp de tes conseils !!, je vais essayer de me replonger dans le code et apparemment, il y a pas mal de modifs à faire..... qui j'espère règleront
mes pbs Smiley cligne
Cordialement,
Bonjour,
Tu viens de recevoir tout plein de très bons conseilles que j'ais salué d'un Smiley loveu Je voulais te montrer jusqu'ou va la nouvelle génération de tableaux responsive 100% (fais varié le cadre en largeur ...
https://codepen.io/jplyne/pen/oNbMBpG
Modifié par Jean-Pierre-Bruneau (29 Jul 2020 - 04:33)
Bonjour,

J'ai commencé à faire qqs modifs sur mon code suite aux précieuses remarques précédentes ; je comptais donc remplacer tous les px par des % (qui si j'ai bien compris ,pour que la taille soit relative / résolution de l'écran) , mais je m'aperçois que les pb de décalages de champs et/ou débordements apparaissent uniquement sur le formulaire alors que le header et le menu vertical( a gauche du form, (voir photo) )restent corrects même lorsque je zoome (chgt résolution) et bien que l'unité soit en pixel.
J'ai remarqué également, depuis le passage a Edge Chromium, que non seulement mes champs étaient décalés mais chose vraiment très étrange.....certains s'étaient agrandis mais concernaient uniquement ceux de type number !!!??? , (En fait, il me les a transformés en champs du style liste numérique (avec des petites flèches à droite du champs ) ??? Vraiment bizarre ?? Bref, je les ai remis en type:Text et la longueur est redevenue normale.
(Dommage c'était bien pratique pour les contrôles numériques)

J'ai également commencer à supprimer certains padding (ex style="padding-right:6px) entre les champs pour un positionnement précis mais je ne sais du coup comment procéder maintenant pour afficher un champs à un endroit précis / au champ précédent (espacé de tant ....et bien aligné /champ du dessus))
( Idem concernant les saut de ligne, <br> ) ??
Maintenant, lorsque je zoome, je n'ai plus de pbs sur les champs du 1er fielset (excepté le bouton Valid1 qui devrait être fixe à l'intérieur du fildset1 ) mais "qui se balade et parfois hors formulaire" ) idem pour le bouton Valid2 (2ème fieldset), mais je ne sais quoi modifier?
Je vous ai joint le css et html du formulaire et le css du (header/menu) ainsi qu'une photo de "mon joli form" ;-((
Merci encore pr vos remarques... Smiley cligne ) car je galère encore un peu ....




<!DOCTYPE html>
<HTML>
 <head>
  <title> Accès aux applications </title>
      <meta charset="utf-8"/>
    
      <link rel="stylesheet" href="menuPILO.css"/>
  	 
	  
      <style>


 input
{
   
    font-size:20px;
}


 
label
{
    margin-left: 20px;
    font-size:20px;
    font-family:"Comic Sans MS";
    font-style:italic;
    font-weight:bold;
    color: white;
    
    
}


.formulaire
{
    border: 5px solid black;
    height: 400px;
    width:  750px;
    margin-left:   300px;
    top: 130px;
    position: fixed;
    border-radius: 25px;
    box-shadow:2px 2px 2px silver;
    padding: 30px;
    font-size:25px;
    background:  blue;
}


#Valid2 button[type=submit]
{
    margin-left:560px;

}


#Valid2
{
    position: fixed;
    left:1000px;
    bottom: 60px;
}

#Valid1 button[type=submit]
{
    margin-left:560px;

}


#Valid1
{
    position: fixed;
    left:1000px;
    bottom: 330px;
}








         #msgfoot {
         visibility:hidden;  
         text-align: center; 
         left:100px;
         width: 400px;
         height: 25px;
         position:absolute;
         top: 0px; 
         background :green;
             }
      </style>      



          
        
  
 </head>

<!-- =========================================================  -->
<!-- =          APPEL  PHP                                        --> 
<!-- ===========================================================  -->

  <body>



    <div id="bloc-page">
         <header>
               <h1> Erreurs de Pilotage </h1> 
  
         </header>


          
           <div id="searchbar">
               
             <form method="post" action="motrech.php" >

             <input type="search"  id="recherche"  name="recherche">
             <button type="submit"  style="padding:15px" >  Rechercher </button> 

             </form>
          
          </div>




         <div class="menu-vertical" >

             <div class="menu"><a href="list.php">.Liste des Livres </a></div>
             <div class="menu"><a href="Ajout1.php">.Ajouter un Livre </a></div>
             <div class="menu"><a href="#">.Supprimer un Livre </a></div>
             <div class="menu"><a href="#">.Modifier un Livre </a></div>

         </div>
</div>




 
    <form class="formulaire" method="post" >
          <div>
            <fieldset id="field1">
               <legend>Livre</legend>
                 <label for="titreliv">.Titre du Livre :</label>
                 <input list="ttliv" type="text" id="titreliv" name="Titreliv" size="20" required>
				 
                  <label for="num1" >.Num : </label>
                  <input type="text" size="3" id="num1" name="Num1" > </br>
				  
                  <label for="annee" >.Annee edition : </label>
                 <input type="text" id="annee" name="Annee" size="4" >
                 
                <button id="Valid1" type="submit" name="Valid1" value="OKValid1" > VALIDER1 </button>
            

                 
            </fieldset>
          </div>
                 
           <div>
            <fieldset id="field2" disabled >
               <legend>Chapitres</legend>  
                 <label for="titrechap">.Chapitre : </label>
                 <input type="text" id="titrechap" name="Titrechap" size="50" required>
                 </br> </br>
            
                 <label for="avion" style="padding-right:6px";>.Avion(s) :</label>
                 <input type="text" id="avion" name="Avion" size="15" required>

                 <label for="cie" style="margin-left:40px" >.Cie : </label>
                 <input type="text" id="cie" name="Cie" size="20" >
                 </br>
                          
                 <label for="date" style="padding-right:33px";>.Date : </label>
	         <input type="text" id="date" name="Date"  placeholder="JJ-MM-AAAA" size="10" maxlength="10"> 
		  
                 <label for="pays" style="padding-left:30px";>.Pays      : </label>
                 <input type="text" id="pays" name="Pays" size="20" >
              
                 </br> </br>
                
                 <label for="comment">.Comment: </label>
                 <input type="text" id="comment" name="Comment" size="40" >
                    
                 </br>
             
                <button id="Valid2" type="submit" name="Valid2" value="OKValid2" style="padding : 10px"> VALIDER2</button>
                 </br> 
            </fieldset>
	
                    

      </form>

    	    <div id="msgfoot" > ENREGISTREMENT CREE </div> 
  
            <div id="msg" ></div> 




</body>

        
 
</html>


===========================================================

header
{
    
    width:  100%;
    height: 50px;
    padding-top: 5px;
    display: flex;  
    text-align:center;
    border-radius: 25px;
    background:  rgb(221,34,95); 
    justify-content: space-around;
    align-items: center;

    
}

h1
{
    font-size:40px;
    font-family:"Comic Sans MS";
    font-style:italic;
    font-weight:bold;
    color: black;
    text-transform:uppercase;
    
}



.menu-vertical
{
    
    background-color: rgb(201,50,205);
    width:140px;
    left:15px;
    height: 400px;
    top: 130px;
    position: fixed;
    border-radius: 25px;
    box-shadow:2px 2px 2px silver;
}

.menu
{
    margin-top: 30px;
    padding: 5px;
    margin-left:10px;
}


a 
{
    color: white;
    text-decoration: none;
    font-size:15px;
    
}


button
{
    padding:8px;

}



#searchbar  
{
    position: fixed;
    right:25px;
    top: 80px;
}

input[type=search]
{
    right:350;
    width:250px;
    height:25px;
    border-radius: 15px;
    
}


Apparemment, l'image n'a pas été jointe (j'ai fait 2 tentatives)
pourtant elle ne fait que 106ko (il m'affiche image trop grande !!!!????)
Modifié par BHR (30 Jul 2020 - 14:35)
Bonjour,

Si tu n'arrives pas à poster ici ton image, mets-là quelque part sur le net, et indique ici le lien !

Amicalement,