Partage
  • Partager sur Facebook
  • Partager sur Twitter

image imposible a modifier avec width

    15 mars 2018 à 11:39:19

    Bonjour c'est le deuxième sujet que je lance sur le même problème, alors j'ai essayer le verificator et tout corriger mon code html et css fonctionne bien, néanmoins quelque soit l'image elle s’affiche en tout petit et ne veut pas être modifier par width pour je ne sais quelle raison voila mes code :
    <!DOCTYPE html>
    	<html>
    		<head>
    			<meta charset='utf-8' /> <!-- language pour le pc -->
    			<link rel="stylesheet" href="test.css" /> <!-- lien vers fichier css -->
    			<title>  B4nkaii </title> <!-- nom du site -->
    		</head>
    		<body>
    				<div class="top"> <!-- regroupe le logo + le titre -->
    				<span class="epee">
    					<img src="epee.png" alt="image d'une épee">
    				</span>
    					<h1> B4nkaii </h1> <!-- titre principal du site -->
    				<table>
    					<tr> <!-- première ligne du tableau -->
    						<th> <!-- première cellule du tableau -->
    							anime
    						</th>
    						<th>
    							news
    						</th>
    						<th>
    							ost
    						</th>
    						<th>
    							top
    						</th>
    						<th>	
    							quiz
    						</th>
    						<th>		
    							forum
    						</th>
    					</tr>
    				</table>
    				<audio controls="controls">
    					<source src="onepiece.mp3">
    				</audio>
    				</div>
    				<div class="img2">
    					<img src="tokyoghoul.jpg" alt="une image pour vous souhaier la bienvenue">
    				</div>
    				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    				</body>
    	</html>
    body
    {
    	background-image:url("205913.jpg"); /*  image de fond de page     */
    	background-attachment: fixed;
    }
    
    .top
    {
     	padding: 0px 0px 0px 0px;
     	margin: -7.2px -7px 0px -7px ;
     	background-color: #DD0F3D; /* couleur de fond  */
     }
    
    @font-face
    {
    	font-family: "MisterVampire"; /* ajoute une police atypique */
    	src: url("MISTV___.TTF"); /* l'emplacement + le nom de ma police */
    }
    
    h1
    {
    	
    	color: black;
    	float: right; /*  placer l'élement html a droite de l'autre élement */
    	text-indent: -700px; /* coller le titre a gauche de l'image */
    	font-family: MisterVampire; /* police d'écriture  */
    	position: relative; /* positionner le text par rapport a sa place de base */
    	top: 40px; /* descendre le texte de 10 px */
    }
    img
    {
    	width: 100px; /* reduire l'image en largeur */
    	
    }
    
    .img2
    {
    	width: 100%;
    }
    
    audio
    {
    	position: relative;
    	top: 2px;
    	left: 1220px;
    
    }
    
    th
    {
    	text-decoration: underline; /* surligne  */
    	text-decoration-color: black; /* couleur de la ligne */
    	text-decoration-style: double; /* style ligne double */
    	background-color: #0089DB;  /*  couleur en hexa    */
    	text-transform: uppercase; /* mettre les cellules en maj */
    	position: relative; 
    	left: 580px;
    	top: 37px;
    	border: 1px solid black; /* cree une bordure  */
    	font-size: 20px; /* modifie la taille de police   */
    }


    • Partager sur Facebook
    • Partager sur Twitter
      15 mars 2018 à 16:58:06

      Essaye de mettre ton class="img2" dans la balise de ton image. ^^
      • Partager sur Facebook
      • Partager sur Twitter
      Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
        15 mars 2018 à 17:02:45

        En effet
        width: 100%

        est appliqué sur la div parente, il faut l'appliquer sur l'image

        .img2 img


        et img2 est plus un id qu'une class CSS... Le principe d'une class est de pouvoir être utilisé à plusieurs endroits de ton code, l'id quand à lui est unique.

        -
        Edité par nossibe 15 mars 2018 à 17:09:41

        • Partager sur Facebook
        • Partager sur Twitter
          16 mars 2018 à 10:35:36

          Oui effectivement, je vous remercie néanmoins width n'en fais toujours qu'a sa tête il me redimensionne la largeur ainsi que la hauteur de l'image.
          • Partager sur Facebook
          • Partager sur Twitter
            16 mars 2018 à 10:43:41

            Après tu peux adapter comment tu gères ton image, si ton site est cherché principalement sur PC tu peux utiliser les pixels et ainsi gérer pour les PC, cependant sur smartphone tes images auront les mêmes proportions donc tu te retrouveras avec des images immenses.

            Ensuite tu peux gérer la largeur utilisée par ton image avec un col-md-? (ou ? est un chiffre entre et 12) si tu te sert de bootstrap. ^^

            Est ce que tu voudras que ton site soit utilisé sur tout les formats?

            • Partager sur Facebook
            • Partager sur Twitter
            Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
              16 mars 2018 à 18:05:45

              oui ce serait un plus, a quoi sert bootstrap ?
              • Partager sur Facebook
              • Partager sur Twitter
                19 mars 2018 à 10:46:18

                Re bonjour, voila autre petit problème j'ai crée une balise qui me sert d'en tête pour mon site, et je voulais écrire un texte de bienvenue en-dessous de celle-ci j'ai donc créer un autre div dans lequel j'ai mit mon paragraphe car je veux le mettre sur une bande contenant une image comme j'ai dit cette bande ce trouvera en-dessous de mon en-tête problème quand j'actualise ma page rien n’apparaît comme si le paragraphe était en-dessous de mon en-tête mais pourtant je ne pense pas avoir fait d'erreur dans mon code le voici :
                <!DOCTYPE html>
                	<html lang='fr-FR'>
                		<head>
                			<meta charset='utf-8'>
                			<meta name='viewport' content="width=device-width, initial-scale= 1.0">
                				<link rel='stylesheet' href='acceuil-anime classeroom.css'>
                			<title>anime classeroom</title>
                		</head>
                	<!--///////////////////////////////////////////////////////////////////////////-->	
                
                		<body>
                			<div class="top">
                					<img src='koro_sensei__normal____assassination_classroom_by_ovieswifty-d9px182.png' alt='logo du site'>
                					<p> anime classeroom </p>
                				<table role="presentation">
                					<tr>
                						<th>
                							anime
                						</th>
                						<th>
                							news
                						</th>
                						<th>
                							ost
                						</th>
                						<th>
                							top
                						</th>
                						<th>
                							quiz
                						</th>
                						<th>
                							forum
                						</th>
                					</tr>
                				</table>
                			</div>
                			<div id="img2">
                				<img src="Hamatora gif 1.gif" alt="décoration">
                			</div>
                				<audio controls="controls">
                					<source src="onepiece.mp3">
                					<source src="onepiece.mp3.ogg">		
                			<div id="bienvenue">
                				<img src="3265425230_1_5_pKmjlhjE" alt="décoration">
                				<p> Bienvenue sur mon site et merci pour votre soutien </p>
                			</div>
                		</body>
                	</html>
                body{
                	
                	background-color: orange;
                }
                
                .top{
                	background-opacity: 0.7;
                	background-repeat: no-repeat;
                	background-size: 100%;
                	background-image:url("uneassclassok-790x454.jpg");
                	width: 100%;
                	height: 301px;
                	border: 2px solid black;
                }
                
                img{
                	width: 400px;
                	height: 300px;
                }
                
                p{
                	text-transform: uppercase;
                	display: inline;
                	font-family: impact normal;
                	font-size: 50px;
                	position: relative;
                	bottom: 253px;
                	left: 300px;
                	color: #FF01FF;
                }
                
                th{
                	background-color: white;
                	position: relative;
                	left: 740px;
                	bottom: 60px;
                	border: 2px solid black;
                	font-size: 30px;
                }
                
                	th:hover{
                		background-color: orange;
                	}
                
                audio{
                	width: 400px;
                	position: relative;
                	top: 300px;
                	left: 404px;
                	float: right;
                }
                
                #img2{
                	border: 1px solid black;
                	position: relative;
                	bottom: 1px;
                	left: 4px;
                	float: right;
                }
                
                #bienvenue{
                		
                }


                • Partager sur Facebook
                • Partager sur Twitter
                  19 mars 2018 à 12:26:45

                  Ne manquerait-il pas une balise de fermeture pour audio ?
                  • Partager sur Facebook
                  • Partager sur Twitter
                    19 mars 2018 à 13:43:42

                    effectivement ^^ merci de ton aide ;) , autre petit problème si tu a encore du temps je voudrait créer une page dans une page c'est a dire comme sur : http://www.neko-san.fr/ (un peu comme les bordures bleu de chaque cote et le contenue au centre), j'ai essayer en centrant mon contenu est rajoutant un background-color sur les élément dans une div et même en redimensionnant le background-color mais rien n'a faire sa ne marche pas --' aurait tu une soulution ?
                    • Partager sur Facebook
                    • Partager sur Twitter
                      19 mars 2018 à 13:45:39

                      Utilise bootstrap, c'est très pratique pour faire ce genre de format. ^^

                      Tu pourras réguler la largeur du contenu ainsi que le design. ;)

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                        19 mars 2018 à 13:50:49

                        désolé d'être compliqué mais y'aurait t'il une solution sans utiliser bootstrap, car sa me compliquerait plus la vie qu'autre chose j'ai déjà beaucoup de code en tête alors le code bootstrap et un peu déstabilisante ^^ merci d'avance
                        • Partager sur Facebook
                        • Partager sur Twitter
                          19 mars 2018 à 14:00:04

                          Tu as juste à le télécharger et appliquer 2/3 "col-md-2". :)

                          Mais après sinon tu peux gérer la taille avec les pixels ou laisser une marge, j'ai pas d'idée de code précise car je fonctionne pas mal avec bootstrap. :)

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                            19 mars 2018 à 14:22:18

                            Tu as presque trouvé la solution à ton propre problème Cédric...

                            Utilise les outils de développement de ton navigateur pour observer le site que tu as donné en exemple.

                            En passant ta sourie au dessus du code depuis la fenêtre "Inspecteur", tu peux trouver quel élément gère l'espace à droite et à gauche... Dans notre cas c'est la balise <div id="body">

                            Il te suffit donc de regarder quelles règles css sont appliquées sur cette balise. Dans notre cas je vois :

                            #body {
                                width: 1150px;
                                height: 100%;
                                margin: auto;
                            }

                            Et voila... tu sais comment ils ont fait... il faut ensuite adapter en fonction des tailles d'écran mais tu as le début de la solution ;)

                            • Partager sur Facebook
                            • Partager sur Twitter
                              19 mars 2018 à 14:34:05

                              Merci de ta réponse =) il y'a peu de temps j'ai reçu une réponse du site concerné qui m'a expliqué qu'il utiliser des balise <iframe>, j'ai donc mis mon code html dans une balise <iframe>, mais rien... un cadre vide, je suis donc passé de Google chrome a moz, mais rien non plus...pourtant mon code me semble correct, merci du conseils je vais inspecter leur code pour voir comment eux l'on insérer ;) en attendant voici mon code :

                              <!DOCTYPE html>
                              	<html lang='fr'>
                              		<head>
                              			<meta charset='utf-8'>
                              			<meta name='viewport' content="width=device-width, initial-scale= 1.0">
                              				<link rel='stylesheet' href='acceuil-anime classeroom.css'>
                              			<title>anime classeroom</title>
                              		</head>
                              		<body>
                              			<iframe src="acceuil-anime classeroom.html" width="100%" height="500"
                              			<img src="koro_sensei__normal____assassination_classroom_by_ovieswifty-d9px182.png" alt="logo du site" sandbox>
                              				<p> anime classeroom </p>	
                              				<table>
                              					<tr>
                              						<th> anime </th>
                              						<th> new </th>
                              						<th>  ost </th>
                              						<th> top </th>
                              						<th>  quiz </th>
                              						<th>  forum </th>
                              					</tr>
                              				</table>
                              			</iframe>
                              		</body>
                              	</html>



                              • Partager sur Facebook
                              • Partager sur Twitter
                                19 mars 2018 à 14:42:33

                                Regarde sur cette page, tu as les attributs de ta balise<iframe>.
                                • Partager sur Facebook
                                • Partager sur Twitter
                                Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                                  19 mars 2018 à 14:53:00

                                  Bizarre ,  rien a faire il y'a bien une cadre (une fenêtre) qui apparait mais rien dedans alors que je lui indique bien ce qu'il doit afficher, j'ai essayer en mettant mon code html dans ses balises mais rien pareille pour une simple image ??
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    19 mars 2018 à 15:00:29

                                    Tu as essayé de mettre des attributs dans ta balise iframe?

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                                      19 mars 2018 à 15:07:32

                                      Oui, j'ai utiliser l'attribut src, pour intégrer mon code mais rien et j'ai regarder un peu la liste des attribu restant mas pour l'instant je pense qu'il n'y arien d'autre d'utile.
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        19 mars 2018 à 15:11:05

                                        Sur la page que je t'ai envoyée regarde si tu as pas un attribut pour ta balise iframe qui te permettrai d'afficher ta photo. Genre frameborder ou un truc du genre.

                                        -
                                        Edité par GuillaumeGarnier11 19 mars 2018 à 15:11:48

                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                        Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                                          19 mars 2018 à 15:16:42

                                          C'est bon je te remercie ;) j'ai enfin trouvé ! , j'avais juste pas comprit le système des fichier imbriqué, sa a mis du temps a monter ^^
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            19 mars 2018 à 15:17:19

                                            Pas de souci, continue bien. ;)

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                            Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                                              19 mars 2018 à 16:43:20

                                              encore un problème sans solution c'est mon en-tête j'ai réussi a la créer dans un iframe mais sur le coté il y'a comme une petite marge transparente, j'ai vérifier si j'avais oublier quelque chose comme un
                                              margine dans un body mais rien...je ne trouve pas ? :

                                              <!DOCTYPE html>
                                              	<html lang='fr'>
                                              		<head>
                                              			<meta charset='utf-8'>
                                              			<meta name='viewport' content="width=device-width, initial-scale= 1.0">
                                              			<link rel='stylesheet' href='acceuil-anime classeroom.css'>
                                              			<title>anime classeroom</title>
                                              		</head>
                                              		<body>
                                              			<div id="top">	
                                              				<img src="koro_sensei__normal____assassination_classroom_by_ovieswifty-d9px182.png" alt="logo du site">
                                              				<p> anime classeroom </p>	
                                              				<table>
                                              					<tr>
                                              						<th> anime </th>
                                              						<th> new </th>
                                              						<th>  ost </th>
                                              						<th> top </th>
                                              						<th>  quiz </th>
                                              						<th>  forum </th>
                                              					</tr>
                                              				</table>
                                              			</div>
                                              		</body>
                                              	</html>
                                              body{
                                              	background-image: url("605585.jpg");
                                              	background-repeat: no-repeat;
                                              	background-attachment: fixed;
                                              	background-size: 100%;
                                              }
                                              
                                              .iframe1{
                                              	margin: -7px 0px 0px 250px;
                                              	width: 1000px;
                                              	height: 250px;
                                              }
                                              #top{
                                              	background-size: 100%;
                                              	background-image:url("uneassclassok-790x454.jpg");
                                              	margin: -8px 0px 0px 0px
                                              }
                                              
                                              img{
                                              	margin: -8px 0px 0px -9px;
                                              	height: 258px;
                                              	width: 260px;
                                              }
                                              
                                              p{
                                              	color: #0008ff;
                                              	font-size: 25px;
                                              	font-family: THE_JACATRA;
                                              	text-transform: uppercase;
                                              	position: relative;
                                              	left: 450px;
                                              	bottom: 250px;
                                              }
                                              
                                              th{
                                              	font-size: 25px;
                                              	position: relative;
                                              	left: 445px;
                                              	bottom: 125px;
                                              	background-color: white;
                                              	border: 2px solid black;
                                              }
                                              
                                              th:hover{
                                              	background-color: orange;
                                              }
                                              @font-face{
                                              	font-family: THE_JACATRA;
                                              	src: url("THE_JACATRA.otf");
                                              }
                                              <!DOCTYPE html>
                                              	<html lang='fr'>
                                              		<head>
                                              			<meta charset='utf-8'>
                                              			<meta name='viewport' content="width=device-width, initial-scale= 1.0">
                                              			<link rel='stylesheet' href='anime classeroom-index.css'>
                                              			<title>anime classeroom</title>
                                              		</head>
                                              		
                                              		<body>
                                              			<iframe src="anime classeroom-index.html" scrolling="no" class="iframe1">
                                              			</iframe>
                                              		</body>
                                              	</html>






                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                19 mars 2018 à 17:26:23

                                                Tu as essayé de mettre ton entête à part du body. Je veux dire dans deux <div> différentes.

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                                                  19 mars 2018 à 17:50:55

                                                  je pense que tu a raison mais j'ai beau réfléchir je vois pas comment isoler le body avec un div ??

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

                                                  c'est bon j'ai trouver tout venait de mon top margin j'ai oublier d'attribuer une valeur au coté droit de mon en-tête ^^ merci quand même

                                                  -
                                                  Edité par cédricforgeront 19 mars 2018 à 17:54:53

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                    19 mars 2018 à 17:55:55

                                                    Je suis pas sur mais grossièrement, voila comment je le verrai:

                                                    <div>

                                                            ton entête

                                                    <div>

                                                    <body>

                                                             ton body

                                                    </body>

                                                    Pour moi ton entête doit être indépendante du body, c'est comme ça que je le vois.

                                                    Y a pas de souci. :)

                                                    -
                                                    Edité par GuillaumeGarnier11 19 mars 2018 à 17:56:35

                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                                                      19 mars 2018 à 18:58:29

                                                      Hello,

                                                      Je ne comprends pas trop pourquoi tu utilises une ifram, c'est une technique ancienne qui est déconseillée maintenant.

                                                      La div d'entête doit absolument se trouver dans le body.

                                                      Pour retirer la petite marge transprente il faut ajouter la propriété margin: 0; à ta class body.

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        20 mars 2018 à 0:50:49

                                                        Re bonjour tout le monde, alors me voila avec une question plutôt curieuse : j'ai commencé a crée un site qui fonctionne avec des iframe, en gros chaque carrée sur ma page contener un autre de mes fichier et donc d'autre fichier css...., au final je me suis retrouvé avec 5 fichier html, 5 fichier css bourré de code et quand j'ai commencé a faire de l’ordre je me suis posé une question existentielle quelle fichier dois-je ouvrir au final pour avoir l’intégralité de mon code ? au final je me suis embrouiller tout seul et je dois tout recommencé :(

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

                                                        je ne maitrise pas encore php, je suis full html et css, et un site que j'aime bien utilise des iframe pour intégrer une page dans une page et ducoup c'est un peu la première méthode que je connaisse ;) maintenant je me demande comment faire en sorte qu’un fichier utilise le code des autres pages ?

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

                                                        Bon...l’accueil de mon site est désormais terminer, mais je rencontre un autre problème j'ai créer mon accueil a l'aide de plusieurs iframe et mon menu ce trouve dans l'un d'entre elle..jusque la tout va bien, sauf que quand je met un href pour changer de fichier dans mon index donc dans le fichier qui est dans mon iframe l'iframe de celui ci disparait mais pas les autre iframe et moi je voudrait que toute la page iframe comprit disparaisse pour mettre du nouveau contenue jai cherche partout en vain je ne vois pas comment faire ?? voici mes codes :

                                                        <!DOCTYPE html>
                                                        	<html lang='fr'> <!-- pour mettre mon site en francais -->
                                                        		<head>
                                                        			<meta charset='utf-8'>
                                                        			<meta name='viewport' content="width=device-width, initial-scale= 1.0"> <!-- adaptation a tous les formats -->
                                                        			<link rel="stylesheet" href="fonddepage.css">
                                                        			<title> anime classeroom </title>
                                                        		</head>
                                                        		 
                                                        		 <!-- fond de page -->
                                                        		<body>
                                                        			<iframe src="index.html" scrolling="no" class="index" name="index"> <!-- 1ère iframe -->
                                                        			</iframe>
                                                        			<iframe src="iframe1.html"  scrolling="no" class="iframe1" name="iframe1"> <!-- 2ème iframe -->
                                                        			</iframe>
                                                        			<iframe src="iframe2.html" scrolling="no" class="iframe2" name="iframe2">  <!-- 3ème iframe -->
                                                        		   	</iframe>
                                                        		</body>
                                                        	</html>
                                                        	
                                                        body{
                                                        	background-size: 100%;
                                                        	background-repeat: no-repeat;
                                                        	background-image: url("fond.jpg");
                                                        }
                                                        
                                                        /*  fond de page */
                                                        .index{
                                                        	margin: -7px 0px 0px 250px;
                                                        	width: 1000px;
                                                        	height: 250px;
                                                        }
                                                        
                                                        .iframe1{
                                                        	margin: -7px 0px 0px 250px;
                                                        	width: 1000px;
                                                        	height: 250px;
                                                        }
                                                        
                                                        .iframe2{
                                                        	margin: -7px 0px 0px 250px;
                                                        	width: 500px;
                                                        	height: 250px;
                                                        }
                                                        
                                                        
                                                        <!DOCTYPE html>
                                                        	<html lang='fr'>
                                                        		<head>
                                                        			<meta charset='utf-8'>
                                                        			<meta name='viewport' content="width=device-width, initial-scale= 1.0">
                                                        			<link rel='stylesheet' href="index.css">
                                                        			<link rel="stylesheat" href="fonddepage.html">
                                                        			<title> anime classeroom </title>
                                                        		</head>
                                                        		<body>
                                                        			<!-- Index -->
                                                        			<div id="top">	
                                                        				<img src="logo.jpg" alt="logo du site"> <!-- logo  du site -->
                                                        				<p>🔪 anime classeroom  🔪</p>	<!-- titre de l'index -->
                                                        				<ul>
                                                        					<li> <a href="fonddepage2.html"> anime </a> </th> <!-- lien vers une autre page vierge -->
                                                        					<li> new   </li>   
                                                        					<li> ost   </li>
                                                        					<li> top   </li>
                                                        					<li> quiz  </li>
                                                        					<li> forum </li>
                                                        				</ul>
                                                        				<audio id="audio1" controls="controls" autoplay>
                                                        					<source src="onepiece.mp3">
                                                        					<source src="onepiece.ogg">
                                                        				</audio>
                                                        				<audio id="audio2" controls="controls">
                                                        					<source src="Shokugeki No Soma - The Secret Ingredient Called Victory Extended.mp3">
                                                        					<source src="Shokugeki No Soma - The Secret Ingredient Called Victory Extended.ogg">
                                                        				</audio>
                                                        				<audio id="audio3" controls="controls">
                                                        					<source src="Dragonball Super - Ultra Instinct Reborn (HQ Recreation).mp3">
                                                        					<source src="Dragonball Super - Ultra Instinct Reborn (HQ Recreation).ogg">
                                                        				</audio>
                                                        				<audio id="audio4" controls="controls">
                                                        					<source src="[Epic] Kuroko no Basket Season 2 OST - Daiki Aomine (III).mp3">
                                                        					<source src="[Epic] Kuroko no Basket Season 2 OST - Daiki Aomine (III).ogg">
                                                        				</audio>
                                                        			</div>
                                                        			
                                                        
                                                        			
                                                        
                                                        			
                                                        #top{
                                                        	background-repeat: no-repeat;
                                                        	background-size: 100%;
                                                        	background-image: url("1443109100768-1080x380.jpg");
                                                        	margin: -8px -8px 0px 0px
                                                        }
                                                        
                                                        img{
                                                        	background-color: black;
                                                        	margin: -8px 0px 0px -9px;
                                                        	height: 258px;
                                                        	width: 265px;
                                                        }
                                                        
                                                        p{
                                                        	color: #0008ff;
                                                        	font-size: 40px;
                                                        	font-family: LuckiestGuy-Regular;
                                                        	text-transform: uppercase;
                                                        	position: relative;
                                                        	left: 400px;
                                                        	bottom: 290px;
                                                        }
                                                        
                                                        ul{
                                                        	list-style-type: none;
                                                        	font-size: 25px;
                                                        	position: relative;
                                                        	left: 490px;
                                                        	bottom: 171px;
                                                        }
                                                         li{
                                                         	padding: 0px 0px 0px 5px ;
                                                         	margin: 0px 0px 0px 2px ;
                                                         	display: inline;
                                                         	border: 2px solid black;
                                                         	background-color: white;
                                                         }	
                                                         
                                                         ul a {
                                                         	text-decoration: none;
                                                         }	
                                                        	
                                                        	li:hover{  
                                                        		background-color: orange; /* donne un effect orange a l'approche de la souris */
                                                        	}
                                                        
                                                        
                                                        @font-face{   /* police atypique  */
                                                        	font-family: LuckiestGuy-Regular;
                                                        	src: url("LuckiestGuy-Regular.ttf");
                                                        }
                                                        
                                                        #audio1{
                                                        	border: 2px solid black;
                                                        	position: relative;
                                                        	left: 256.5px;
                                                        	bottom: 230px;
                                                        	height: 40px;
                                                        	width: 50px;
                                                        }
                                                        
                                                        #audio2{
                                                        	border: 2px solid black;
                                                        	position: relative;
                                                        	left: 256.5px;
                                                        	bottom: 230px;
                                                        	height: 40px;
                                                        	width: 50px;
                                                        }
                                                        
                                                        #audio3{
                                                        	border: 2px solid black;
                                                        	position: relative;
                                                        	left: 256.5px;
                                                        	bottom: 230px;
                                                        	height: 40px;
                                                        	width: 50px;
                                                        }
                                                        
                                                        #audio4{
                                                        	border: 2px solid black;
                                                        	position: relative;
                                                        	left: 256.5px;
                                                        	bottom: 230px;
                                                        	height: 40px;
                                                        	width: 50px;
                                                        }
                                                        
                                                        
                                                        <!DOCTYPE html>
                                                        	<html lang='fr'>
                                                        		<head>
                                                        			<meta charset='utf-8'>
                                                        			<meta name='viewport' content="width=device-width, initial-scale= 1.0">
                                                        			<link rel="stylesheet" href="iframe1.css">
                                                        			<title> anime classeroom </title>
                                                        		</head>
                                                        		
                                                        		<!-- iframe1 -->
                                                        		<body>
                                                        			<img src="suoh_mikoto_render_by_skyxblue-d7gebb1.png" alt="deco">
                                                        			<p> Bienvenue sur anime classeroom <br />
                                                        			Merci de ton soutien <span class="love"> ❤ </span> </p>
                                                        		</body>
                                                        	</html>
                                                        body{
                                                        	background-repeat: no-repeat;
                                                        	background-size: 100%;
                                                        	background-image: url("nuage.png");
                                                        }
                                                        
                                                        img{
                                                        	height: 350px; 
                                                        	width: 300px;
                                                        }
                                                        
                                                        p{
                                                        	font-family: LuckiestGuy-Regular;
                                                        	font-size: 40px;
                                                        	position: relative;
                                                        	left: 280px;
                                                        	bottom: 300px;
                                                        }
                                                        
                                                        .love{
                                                        	color: red; /* mettre le coeur en rouge  */
                                                        }
                                                        
                                                        @font-face{
                                                        	font-family: LuckiestGuy-Regular;
                                                        	src: url("LuckiestGuy-Regular.ttf");
                                                        }
                                                        <!DOCTYPE html>
                                                        	<html lang='fr'>
                                                        		<head>
                                                        			<meta charset='utf-8'>
                                                        			<meta name='viewport' content="width=device-width, initial-scale= 1.0">
                                                        			<link rel="stylesheet" href="iframe2.css">
                                                        			<title> anime classeroom </title>
                                                        		</head>
                                                        		<body>
                                                        			<img src="depositphotos_89906694-stock-photo-empty-yellow-sticky-note.jpg" alt="info" class="img1">
                                                        			<p> mise a jour : 1.0. <br /> statut : en cours de maintenance.</p>
                                                        			<img src="Icone_Cible.svg.png" alt="déco" class="cible1">
                                                        			<img src="Icone_Cible.svg.png" alt="déco" class="cible2">
                                                        		</body>
                                                        	</html>
                                                        <!DOCTYPE html>
                                                        	<html>
                                                        		<head>
                                                        			<meta charset="utf-8">
                                                        			<meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                        			<link rel="stylesheet" href="anime.css">
                                                        			<title> anime classeroom </title>
                                                        		</head>
                                                        		
                                                        		<!-- page vierge anime -->
                                                        		<body>
                                                        			<iframe src="anime.html" scrolling="no" class="anime" name="anime"> <!-- 1ère iframe -->
                                                        			</iframe>
                                                        		</body>
                                                        	</html>
                                                        body{
                                                        	background-size: 100%;
                                                        	background-repeat: no-repeat;
                                                        	background-image: url("fond.jpg");
                                                        }
                                                        .anime{
                                                        	margin: -7px 0px 0px 250px;
                                                        	width: 1000px;
                                                        	height: 250px;
                                                        }








                                                        -
                                                        Edité par cédricforgeront 21 mars 2018 à 12:53:18

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                          20 mars 2018 à 8:10:51

                                                          Tu dois avoir une fichier qui utilise le code des autres page normalement, c'est ce qui organise ta page. Tu utilises des includes normalement.
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                          Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.
                                                            20 mars 2018 à 8:29:49

                                                            Bonjour,

                                                            question naïve : pourquoi des iframes ? Pourquoi ne pas faire des include() avec PHP par exemple ? Les iframes, c'est terriblement restrictif.

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter

                                                            Pas d'aide concernant le code par MP, le forum est là pour ça :)

                                                            image imposible a modifier avec width

                                                            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                            • Editeur
                                                            • Markdown