Sujet Précédent Sujet Suivant

Problème d'insertion de tableau ET de vidéo en même temps

Fermé
larramenpa - 18 nov. 2016 à 22:08
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 - 20 nov. 2016 à 13:01
Bonjour bonjour,

Je suis en plein conflit avec mon ordinateur et ma page web..
Je code en HTML depuis jeudi alors si vous pouvez m'apporter des réponses, essayez de faire simple ;)

BREF :
J'ai une page index qui affiche un barre et des images envoyant sur différents liens en haut ! J'ai ensuite, rajouté une vidéo youtube en dessous.
Enfin j'ai voulu insérer un tableau faisant appel à du CSS pour le style.
Le fait est que le code est correct car il s'affiche si je lance le lien HTML à part dans une autre fenêtre... Je ne comprends pas pourquoi la page sur laquelle je travaille "Index.html" n'affiche pas le tableau sous la vidéo...
J'insiste bien sur le fait que chaque code (le tableau CONTRE la vidéo+barre+logos+"bienvenue") fonctionne de son côté (isolé l'un de l'autre)
Merci de bien vouloir regarder ce qui ne va pas...
Cordialement,
Un novice en HTML (il faut bien commencer de quelque part)

VOICI LE CODE HTML : 

<html lang="fr">
	<head>
		<meta charset="UTF-8" />
		<title>Accueil</title>
		<link rel="stylesheet" href="Table_Cours.css" />
	</head>

	<body>

		<div 	id="TopBarTop"		style="background: -webkit-linear-gradient(left, #FE005D, #25b7c4); overflow:hidden" >
			<img usemap="#ubordeaux1" src="images\ubordeaux.gif" height="100px" />			<!-- ATTENTION A BIEN CHANGER LE CHEMIN DE L'IMAGE -->
				<map name="ubordeaux1">
					<area shape="rect" href="http://www.u-bordeaux.fr" title="Site Université Bordeaux" target="_blank" coords="0,150,250,0" alt="Université Bordeaux"/> 		 <!-- coords="start_x, total_y, total_x, start_y" -->
				</map>
			<img usemap="#fluxrss" style="float:right" src="images\rss.png" height="50px" />
				<map name="fluxrss">
					<area shape="rect" href="fluxrss.xml" title="Flux RSS" target="_blank" coords="0,100,100,0" alt="Flux Rss"/>
				</map>
			<img usemap="#youtube" style="float:right" src="images\youtube.png" height="50px" />
				<map name="youtube">
					<area shape="rect" href="http://www.youtube.com/?gl=FR&hl=fr" title="YouTube" target="_blank" coords="0,100,100,0" alt="YouTube"/>
				</map>
		</div>
		<div align="center" id="Insertion_Video1">
			<h6> <font size="10" face="helvetica"> BIENVENUE </font> </h6>
			<iframe width="800" height="400" src="https://www.youtube.com/embed/RDocnbkHjhI" frameborder="0" allowfullscreen="True" />
		</div>
		
		
		<!-- VOICI LE TABLEAU QUI NE VEUT PAS S'AFFICHER LORSQU'IL VIENT APRES LA VIDEO... -->
		
		<div>					
			  <h1>Cours</h1>
			  <div class="tbl-header" id="Entête_tableau">
				<table cellpadding="0" cellspacing="0" border="0">
				  <thead>
					<tr>
					  <th>Matière</th>
					  <th>Chapitre</th>
					  <th>Titre</th>
					  <th>Information & Format</th>
					  <th></th>
					</tr>
				  </thead>
				</table>
			  </div>
					  <div class="tbl-content" id="Corps du tableau">
						<table cellpadding="0" cellspacing="0" border="0">
						  <tbody>
							<tr>
							  <td>Chimie</td>								<!-- MATIERE -->
							  <td>Chapitre 1</td>									<!-- CHAPITRE -->
							  <td>Voyage au coeur de l'atome</td>									<!-- TITRE -->
							  <td>Semestre 1 - MISIPCG</td>																<!-- INFORMATIONS -->
							  <td> <a href="D:\Tom\Site_Cremi\Cours\Chapter1_Chemistry.pdf" rel="nofollow noopener noreferrer" target="_blank" title="Chapitre 1">Version PDF</a></td>																<!-- FORMAT -->
							</tr>
							<tr>
							  <td>Chimie</td>								<!-- MATIERE -->
							  <td>Chapitre 2</td>									<!-- CHAPITRE -->
							  <td>Classification Périodique</td>									<!-- TITRE -->
							  <td>Semestre 1 - MISIPCG</td>																<!-- INFORMATIONS -->
							  <td> <a href="D:\Tom\Site_Cremi\Cours\Chapter2_Chemistry.pdf" rel="nofollow noopener noreferrer" target="_blank" title="Chapitre 2">Version PDF</a></td>																<!-- FORMAT -->
							</tr>
							<tr>
							  <td>Biologie Parcours International</td>								<!-- MATIERE -->
							  <td>Unicell</td>									<!-- CHAPITRE -->
							  <td>Cholesterol</td>									<!-- TITRE -->
							  <td>Semestre 1 - PARCOURS INTERNATIONAL</td>																<!-- INFORMATIONS -->
							  <td> <a href="D:\Tom\Site_Cremi\Cours\Flyer_Cholesterol.pdf" rel="nofollow noopener noreferrer" target="_blank" title="Flyer Cholesterol">Version PDF</a></td>																<!-- FORMAT -->
							</tr>
						  </tbody>
						</table>
					  </div>
		</div>
</body>

</html>



VOICI LE CODE CSS : 


h1{
  font-size: 30px;
  color: #fff;
  text-transform: uppercase ;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table{
  width:100%;
  table-layout: fixed;
}
.tbl-header{
  background-color: rgba(255,255,255,0.3);
 }
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}
th{
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
td{
  padding: 15px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: -webkit-linear-gradient(left, #FE005D, #25b7c4);
  font-family: Helvetica
}
section{
  margin: 50px;
}
::-webkit-scrollbar {
    width: 15px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
A voir également:

1 réponse

Réponse 1 / 1
codeurh24 Messages postés 760 Date d'inscription samedi 29 mars 2014 Statut Membre Dernière intervention 8 septembre 2018 123
Modifié par codeurh24 le 20/11/2016 à 13:14
Bonjour.

Ton problème vient essentiellement de ton iframe qui est mal fermée. 

<iframe width="800" height="400" src="https://www.youtube.com/embed/RDocnbkHjhI" frameborder="0" allowfullscreen="True" />


<iframe width="800" height="400" src="https://www.youtube.com/embed/RDocnbkHjhI" allowfullscreen></iframe>


Tu dit que "le code est correct car ..." mais ce n'est pas ton navigateur web qui décide si ton code est bien ou non.
Chaque navigateur doit suivre des normes.
C'est le W3C qui décide des normes a suivre.
https://validator.w3.org/

Si tu demande au validateur W3C d'examiner ton code il t'aurais dit les erreurs a corriger. Ce n'est pas évident surtout si tu est débutant et que tu ne comprend pas l'anglais.

Les coordonées de tes balises "area" ne sont pas bonnes.
il dit que les valeurs de tes y ne sont pas croissant (traduction de moi)

Les balises "font" ne sont pu utilisé de nos jours. il faut utiliser le css. 
<h6> <font size="10" face="helvetica"> BIENVENUE </font> </h6>

h6{
 font-size: 53px;
 margin:15px;
 font-family: "helvetica";
 font-size: -webkit-xxx-large;
}


Tu as indiqué un id comportant des espaces vides mais les espaces vides sont des séparateurs. Sachant qu'un id est unique donc les espace blancs ont encore moins leurs place dans un id. 
<div class="tbl-content" id="Corps du tableau">

<div class="tbl-content" id="Corps-du-tableau">

Donc en prenant un exemple pour les class histoire de donner un exemple complet, il faut mettre soit des tirets"-", soit des underscores "_". 
<span class="faire-part grille-pain"></span>
ou
<span class="faire_part grille_pain"></span>



Ah et j'allais oublier, tu n'as pas mis de doctype. c'est important pour savoir quelle norme utiliser. Ont a de la chance d'avoir des naviagteurs tres intelligents ou très tolérents, ça depend de comment on vois les choses.
https://www.w3schools.com/tags/tag_doctype.asp 
<!doctype html>
<html lang="fr">



je ne vais pas lister toutes les erreurs, il y a déjà l'essentiel
Voici les page html refaite au norme w3c (css a revoir). 
<!doctype html>
<html lang="fr">
 <head>
  <meta charset="UTF-8" />
  <title>Accueil</title>
  <link rel="stylesheet" href="Table_Cours.css" />
 </head>

 <body>

  <div  id="TopBarTop"  style="background: -webkit-linear-gradient(left, #FE005D, #25b7c4); overflow:hidden" >
   <img alt="une image" usemap="#ubordeaux1" src="images/ubordeaux.gif" height="100" />   <!-- ATTENTION A BIEN CHANGER LE CHEMIN DE L'IMAGE -->
   
   <map name="ubordeaux1">
    <area shape="rect" href="http://www.u-bordeaux.fr" title="Site Université Bordeaux" target="_blank" coords="0,150,250,151" alt="Université Bordeaux"/>    <!-- coords="start_x, total_y, total_x, start_y" -->
   </map>
   <img alt="une image" usemap="#fluxrss" style="float:right" src="images/rss.png" height="50" />
   <map name="fluxrss">
    <area shape="rect" href="fluxrss.xml" title="Flux RSS" target="_blank" coords="0,100,100,101" alt="Flux Rss"/>
   </map>
   <img alt="une image" usemap="#youtube" style="float:right" src="images/youtube.png" height="50" />
   <map name="youtube">
    <area shape="rect" href="http://www.youtube.com/?gl=FR&hl=fr" title="YouTube" target="_blank" coords="0,100,100,101" alt="YouTube"/>
   </map>
  </div>
  <div id="Insertion_Video1">
   <h6>BIENVENUE</h6>
   <iframe width="800" height="400" src="https://www.youtube.com/embed/RDocnbkHjhI" allowfullscreen></iframe>
  </div>
  
  
  <!-- VOICI LE TABLEAU QUI NE VEUT PAS S'AFFICHER LORSQU'IL VIENT APRES LA VIDEO... -->
  
  <div>     
     <h1>Cours</h1>
     <div class="tbl-header" id="Entête_tableau">
    <table>
      <thead>
     <tr>
       <th>Matière</th>
       <th>Chapitre</th>
       <th>Titre</th>
       <th>Information & Format</th>
       <th></th>
     </tr>
      </thead>
    </table>
     </div>
       <div class="tbl-content" id="Corps-du-tableau">
      <table>
        <tbody>
       <tr>
         <td>Chimie</td>        <!-- MATIERE -->
         <td>Chapitre 1</td>         <!-- CHAPITRE -->
         <td>Voyage au coeur de l'atome</td>         <!-- TITRE -->
         <td>Semestre 1 - MISIPCG</td>                <!-- INFORMATIONS -->
         <td> <a href="D:/Tom/Site_Cremi/Cours/Chapter1_Chemistry.pdf" rel="nofollow noopener noreferrer" target="_blank" title="Chapitre 1">Version PDF</a></td>                <!-- FORMAT -->
       </tr>
       <tr>
         <td>Chimie</td>        <!-- MATIERE -->
         <td>Chapitre 2</td>         <!-- CHAPITRE -->
         <td>Classification Périodique</td>         <!-- TITRE -->
         <td>Semestre 1 - MISIPCG</td>                <!-- INFORMATIONS -->
         <td> <a href="D:/Tom/Site_Cremi/Cours/Chapter2_Chemistry.pdf" rel="nofollow noopener noreferrer" target="_blank" title="Chapitre 2">Version PDF</a></td>                <!-- FORMAT -->
       </tr>
       <tr>
         <td>Biologie Parcours International</td>        <!-- MATIERE -->
         <td>Unicell</td>         <!-- CHAPITRE -->
         <td>Cholesterol</td>         <!-- TITRE -->
         <td>Semestre 1 - PARCOURS INTERNATIONAL</td>                <!-- INFORMATIONS -->
         <td> <a href="D:/Tom/Site_Cremi/Cours/Flyer_Cholesterol.pdf" rel="nofollow noopener noreferrer" target="_blank" title="Flyer Cholesterol">Version PDF</a></td>                <!-- FORMAT -->
       </tr>
        </tbody>
      </table>
       </div>
  </div>
</body>

</html>


page css:
h1{
  font-size: 30px;
  color: #fff;
  text-transform: uppercase ;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table{
  width:100%;
  table-layout: fixed;
}
.tbl-header{
  background-color: rgba(255,255,255,0.3);
 }
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
  border: 1px solid rgba(255,255,255,0.3);
}
th{
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
td{
  padding: 15px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;
  border-bottom: solid 1px rgba(255,255,255,0.1);
}

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: -webkit-linear-gradient(left, #FE005D, #25b7c4);
  font-family: Helvetica
}
section{
  margin: 50px;
}
::-webkit-scrollbar {
    width: 15px;
} 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
#Insertion_Video1{
 text-align:center;
}

h6{
 font-size: 53px;
 margin:15px;
 font-family: "helvetica";
 font-size: -webkit-xxx-large;
}

iframe{
 border-width:0px;
}


table{
 border-spacing : 0;
 border-collapse : collapse;
 padding:0; 
}
th {
    padding: 20px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
}

td {
    padding: 15px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 12px;
    color: #fff;
    border-bottom: solid 1px rgba(255,255,255,0.1);
}
0

Discussions similaires

generateur de combinaison du loto 5/90
Riccilo -
ccm81 -

3 réponses
Bibliothèque
cosjac85 -
renard bleu -

3 réponses