5568 sujets

Sémantique web et HTML

bonjour...sa y est ma page d’accueil est fini mais je recontre un gros probleme, 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 Smiley cligne comme d'hab voici mes codes :

//fonddepage.html

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

// fonddepage.css

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


// index.html 1ere iframe

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

// index.css


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

// iframe1.html 2eme frame

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


// iframe1.css

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");
}


// iframe2.html

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


//iframe2.css

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


//fonddepage2.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>

//fonddepage2.css

body{
background-size: 100%;
background-repeat: no-repeat;
background-image: url("fond.jpg");
}
.anime{
margin: -7px 0px 0px 250px;
width: 1000px;
height: 250px;
}

apres mon fichier anime qui fonctionne mal ducoup ^^