image imposible a modifier avec width

<< 1 2

DevingProjects

20 mars 2018 à 9:27:59

Bonjour

Y en a qui sont un peu craintifs de PHP...

GuillaumeGarnier11

20 mars 2018 à 9:46:01

En effet, si c'est juste pour un site statique, y a pas de mal. Le dynamique viendra après.

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

cédricforgeront

20 mars 2018 à 11:17:54

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 ?

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

merci quand même

-
Edité par cédricforgeront 20 mars 2018 à 13:33:39

GuillaumeGarnier11

20 mars 2018 à 13:02:37

En php j'aurais fait avec des includes, mais en html je sèche un peu, je me souviens plus comment faire.

Après rien ne t'empêche de regarder sur internet ou sur les cours OC.

Les erreurs permettent de progresser, mais progresser n'empêche pas de faire des erreurs.

cédricforgeront

20 mars 2018 à 14:56:27

Bon me voila sur un problème coriace, quand j'ouvre mon fichier : fonddepage.html, je vois bien mes balise iframe (les 3), mais a 'l’intérieur il y'a ce message : L’adresse n’a pas été reconnue / Firefox ne sait pas ouvrir cette adresse voici mes code --' :

<!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="fond de page.css">
			<title> anime classeroom </title>
		</head>
		 
		 <!-- fond de page -->
		<body>
			<iframe src="C:\Users\easy\Documents\Programmation Web\projet-web\index.html" scrolling="no" class="index"> <!-- 1ère iframe -->
			</iframe>
			<iframe src="C:\Users\easy\Documents\Programmation Web\projet-web\iframe1\iframe1.html" scrolling="no" class="iframe1"> <!-- 2ème iframe -->
			</iframe>
			<iframe src="C:\Users\easy\Documents\Programmation Web\projet-web\iframe2.html" scrolling="no" class="iframe2">  <!-- 3ème iframe -->
		   	</iframe>
		</body>
	</html>

body{
	background-image: url("C:\Users\easy\Documents\Programmation Web\image\605585.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100%;
}

/*  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='C:\Users\easy\Documents\Programmation Web\projet-web\index.css'>
			<link rel="stylesheet" href="C:/Users/easy/Documents/Programmation Web/projet-web/fonddepage/fonddepage.html">
			<title> anime classeroom </title>
		</head>
		<body>
			
			<!-- Index -->
			<div id="top">	
				<img src="C:\Users\easy\Documents\Programmation Web\image\logo.jpg" alt="logo du site"> <!-- logo  du site -->
				<p>🔪 anime classeroom  🔪</p>	<!-- titre de l'index -->
				<table>
					<tr>
						<th> <a href="anime.html"> anime </a> </th> <!-- lien vers une autre page vierge -->
						<th> new </th>
						<th>  ost </th>
						<th> top </th>
						<th>  quiz </th>
						<th>  forum </th>
					</tr>
				</table>
				<audio id="audio1" controls="controls" autoplay>
					<source src="C:\Users\easy\Documents\Programmation Web\ost\onepiece.mp3">
					<source src="C:\Users\easy\Documents\Programmation Web\ost\onepiece.ogg">
				</audio>
				<audio id="audio2" controls="controls">
					<source src="C:\Users\easy\Documents\Programmation Web\ost\Shokugeki No Soma - The Secret Ingredient Called Victory Extended.mp3">
					<source src="C:\Users\easy\Documents\Programmation Web\ost\Shokugeki No Soma - The Secret Ingredient Called Victory Extended.ogg">
				</audio>
				<audio id="audio3" controls="controls">
					<source src="C:\Users\easy\Documents\Programmation Web\ost\Dragonball Super - Ultra Instinct Reborn (HQ Recreation).mp3">
					<source src="C:\Users\easy\Documents\Programmation Web\ost\Dragonball Super - Ultra Instinct Reborn (HQ Recreation).ogg">
				</audio>
				<audio id="audio4" controls="controls">
					<source src="C:\Users\easy\Documents\Programmation Web\ost\[Epic] Kuroko no Basket Season 2 OST - Daiki Aomine (III).mp3">
					<source src="C:\Users\easy\Documents\Programmation Web\ost\[Epic] Kuroko no Basket Season 2 OST - Daiki Aomine (III).ogg">
				</audio>
			</div>
		</body>
	</html>

#top{
	background-repeat: no-repeat;
	background-size: 100%;
	background-image: url("C:\Users\easy\Documents\Programmation Web\image\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;
}

th{
	
	font-size: 25px;
	position: relative;
	left: 490px;
	bottom: 180px;
	background-color: white;
	border: 2px solid black;
}

	th:hover{  
		background-color: orange; /* donne un effect orange a l'approche de la souris */
	}

@font-face{   /* police atypique  */
	font-family: LuckiestGuy-Regular;
	src: url("C:\Users\easy\Documents\Programmation Web\font\LuckiestGuy-Regular.ttf");
}

#audio1{
	border: 2px solid black;
	position: relative;
	left: 256.5px;
	bottom: 220px;
	height: 40px;
	width: 50px;
}

#audio2{
	border: 2px solid black;
	position: relative;
	left: 256.5px;
	bottom: 220px;
	height: 40px;
	width: 50px;
}

#audio3{
	border: 2px solid black;
	position: relative;
	left: 256.5px;
	bottom: 220px;
	height: 40px;
	width: 50px;
}

#audio4{
	border: 2px solid black;
	position: relative;
	left: 256.5px;
	bottom: 220px;
	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="C:\Users\easy\Documents\Programmation Web\projet-web\iframe1\iframe1.css">
			<link rel="stylesheet" href="C:/Users/easy/Documents/Programmation Web/projet-web/fonddepage/fonddepage.html">
			<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>

#body2{
	background-repeat: no-repeat;
	background-size: 100%;
	background-image:url("C:\Users\easy\Documents\Programmation Web\image\ca8a6a7f8647ae3559b5d7b78df1ed1c.png");
}

.img2{
	height: 350px; 
	width: 300px;
}

.p2{
	font-family: LuckiestGuy-Regular;
	font-size: 40px;
	position: relative;
	left: 280px;
	bottom: 300px;
	animation-name: ;
}

.love{
	color: red; /* mettre le coeur en rouge  */
}

@font-face{
	font-family: LuckiestGuy-Regular;
	src: url("C:\Users\easy\Documents\Programmation Web\font\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="C:\Users\easy\Documents\Programmation Web\projet-web\iframe2.css">
			<link rel="stylesheet" href="C:/Users/easy/Documents/Programmation Web/projet-web/fonddepage/fonddepage.html">
			<title>anime classeroom</title>
		</head>
		<body>
			<img src="C:\Users\easy\Documents\Programmation Web\image\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="C:\Users\easy\Documents\Programmation Web\image\Icone_Cible.svg.png" alt="déco" class="cible1">
			<img src="C:\Users\easy\Documents\Programmation Web\image\Icone_Cible.svg.png" alt="déco" class="cible2">
		</body>
	</html>

body{
	background-image: url("C:\Users\easy\Documents\Programmation Web\image\Fond-BOIS-.jpg");
}

.img1{
	height: 220px;
	width: 300px;
	margin: 8px 0px 0px 100px;
}

p{
	position: relative;
	bottom: 150px;
	left: 150px;
}

.cible1{
	position: relative;
	bottom: 310px;
	left: 80px;
	height: 50px;
	width: 50px;
}

.cible2{
	position: relative;
	bottom: 110px;
	left: 320px;
	height: 50px;
	width: 50px;
}

DevingProjects

20 mars 2018 à 15:19:25

salut

es-tu certain que les chemins d'accès sont valides ?

Lamecarlate

20 mars 2018 à 15:35:54

Je pense que le plus sûr sera d'utiliser des chemins relatifs : les chemins absolus, surtout avec le format Windows, c'est pas idéal.

(et j'insiste : le menu fait avec un tableau, c'est non)

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

cédricforgeront

20 mars 2018 à 23:27:52

bon...sa y est ma page d’accueil est fini mais bien évidement autre problème qui s'en suit, j'ai ma page avec mes iframe, et sur cette page, un des iframe contient un menu qui redirige vers un autre fichier, une autre page, donc je me dit sa y est je clique dessus et j'ai une page vierge...ben non le iframe avec mon menu disparait mais pas les autre iframe en-dessous ni le fond d'ecrand de la page...j’avoue que pour ce coup je me suis renseigner un max, mais je ne trouve rien nul part peut être avez-vous la solution a mon gros problème comme d'hab 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;
}

<!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>

body{
	background-image: url("Fond-BOIS-.jpg");
}

.img1{
	height: 220px;
	width: 300px;
	margin: 8px 0px 0px 100px;
}

p{
	position: relative;
	bottom: 150px;
	left: 150px;
}

.cible1{
	position: relative;
	bottom: 310px;
	left: 80px;
	height: 50px;
	width: 50px;
}

.cible2{
	position: relative;
	bottom: 110px;
	left: 320px;
	height: 50px;
	width: 50px;
}

<!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;
}

<< 1 2