Bonjour,
J'ai commencé à créer mon premier site (qui doit en fait me servir de page-perso-fourre-tout), comme j'ai du son à faire découvrir j'ai mis un player mp3 en flash mais je me suis heurté au fait qu'en cliquant sur un lien le player était rechargé et donc le morceau en cours de lecture coupé, pas cool
Je pensais avoir résolu le problème en mettant le contenu du site dans une iframe et effectivement ça fonctionne, à un petit détail près : les options de configuration des .div des pages s'éxecutant dans l'iframe ne veulent pas s'appliquer.
Une bonne page de code vaut bien des discours, voilà de quoi il s'agit (au passage je suis preneur de toutes critiques constructives
) :
Code de index.html :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" type="text/css" href="divindex.css">
<title>INDEX</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="bandeau">BANDEAU</div>
<div id="menu">MENU
<p><a href="livreor.php" target="frame">Livre d'or</a></p>
<p><object CODE DU PLAYER MP3 />
</object></p>
</div>
<div id="contenu">
<iframe name="frame" src="accueil.html" width="800px" height="800px" align="center" scrolling="no">Votre navigateur ne supporte pas les iframes.</iframe>
</div>
<div id="piedpage">FOOTER</div>
</body>
</html>
Code de divindex.css :
Code : Tout sélectionner
div {
text-align:center;
background-color:#000000;
background-attachment:fixed;
background-position:50% 50%;
background-repeat:no-repeat;
background-image:url(images/background.jpg);
color:#FFFFFF;
}
div#bandeau {
width:100%;
height:100px;
}
div#contenu {
width:100%;
height:800px;
}
div#piedpage {
clear:both;
width:100%;
height:80px;
}
div#menu {
float:left;
width:200px;
height:800px;
}
Code de livreor.php :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" type="text/css" href="divlivreor.css">
<title>Livre d'or</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Livre d'or</h1>
<div id="part_haut">
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=BDD', 'LOGIN', 'MDP');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
$req = $bdd->query('SELECT pseudo, contenu, date FROM livreor ORDER BY date DESC');
while ($donnees = $req->fetch())
{
?>
<?php echo htmlspecialchars($donnees['pseudo']); ?>
<em>le <?php echo $donnees['date']; ?></em>
<p>
<?php
echo nl2br(htmlspecialchars($donnees['contenu']));
?>
<br />
</p>
<?php
}
$req->closeCursor();
?>
</div>
<div id="part_bas">
<form method="post" action="target.php">
<?php
$date = date("m-d-y-H-i-s");
?>
<p><input type="text" name="pseudo" /></p>
<p><textarea name="contenu" rows="8" cols="45"></textarea></p>
<p><input type="submit" value="Valider" /></p>
</form>
</div>
</body>
</html>
code de divlivreor.css :
Code : Tout sélectionner
div {
text-align:center;
color:#FFFFFF;
}
div#part_haut {
width:200px;
height:200px;
}
div#part_bas {
width:200px;
height:200px;
}
Les options de divindex.css s'appliquent correctement à la page index.html et l'iframe s'éxecute correctement, le souci se pose quand la page livreor.php doit s'ouvrir dans l'iframe impossible d'obtenir les deux partie (part_haut et part_bas) demandées par divlivreor.css et je ne comprends pas du tout pourquoi.
Je pense que vous devez avoir une idée assez précise du rendu que je souhaite obtenir (si ce n'est pas le cas, demandez et j'apporterai les précisions nécessaires) donc si l'un d'entre vous aurait le début du commencement d'une solution ce serait sympathique.
Merci d'avance.
Bonjour,
J'ai commencé à créer mon premier site (qui doit en fait me servir de page-perso-fourre-tout), comme j'ai du son à faire découvrir j'ai mis un player mp3 en flash mais je me suis heurté au fait qu'en cliquant sur un lien le player était rechargé et donc le morceau en cours de lecture coupé, pas cool :cry:
Je pensais avoir résolu le problème en mettant le contenu du site dans une iframe et effectivement ça fonctionne, à un petit détail près : les options de configuration des .div des pages s'éxecutant dans l'iframe ne veulent pas s'appliquer.
Une bonne page de code vaut bien des discours, voilà de quoi il s'agit (au passage je suis preneur de toutes critiques constructives :) ) :
Code de index.html :
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" type="text/css" href="divindex.css">
<title>INDEX</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="bandeau">BANDEAU</div>
<div id="menu">MENU
<p><a href="livreor.php" target="frame">Livre d'or</a></p>
<p><object CODE DU PLAYER MP3 />
</object></p>
</div>
<div id="contenu">
<iframe name="frame" src="accueil.html" width="800px" height="800px" align="center" scrolling="no">Votre navigateur ne supporte pas les iframes.</iframe>
</div>
<div id="piedpage">FOOTER</div>
</body>
</html>[/code]
Code de divindex.css :
[code]div {
text-align:center;
background-color:#000000;
background-attachment:fixed;
background-position:50% 50%;
background-repeat:no-repeat;
background-image:url(images/background.jpg);
color:#FFFFFF;
}
div#bandeau {
width:100%;
height:100px;
}
div#contenu {
width:100%;
height:800px;
}
div#piedpage {
clear:both;
width:100%;
height:80px;
}
div#menu {
float:left;
width:200px;
height:800px;
}
[/code]
Code de livreor.php :
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" type="text/css" href="divlivreor.css">
<title>Livre d'or</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Livre d'or</h1>
<div id="part_haut">
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=BDD', 'LOGIN', 'MDP');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
$req = $bdd->query('SELECT pseudo, contenu, date FROM livreor ORDER BY date DESC');
while ($donnees = $req->fetch())
{
?>
<?php echo htmlspecialchars($donnees['pseudo']); ?>
<em>le <?php echo $donnees['date']; ?></em>
<p>
<?php
echo nl2br(htmlspecialchars($donnees['contenu']));
?>
<br />
</p>
<?php
}
$req->closeCursor();
?>
</div>
<div id="part_bas">
<form method="post" action="target.php">
<?php
$date = date("m-d-y-H-i-s");
?>
<p><input type="text" name="pseudo" /></p>
<p><textarea name="contenu" rows="8" cols="45"></textarea></p>
<p><input type="submit" value="Valider" /></p>
</form>
</div>
</body>
</html>[/code]
code de divlivreor.css :
[code]div {
text-align:center;
color:#FFFFFF;
}
div#part_haut {
width:200px;
height:200px;
}
div#part_bas {
width:200px;
height:200px;
}
[/code]
Les options de divindex.css s'appliquent correctement à la page index.html et l'iframe s'éxecute correctement, le souci se pose quand la page livreor.php doit s'ouvrir dans l'iframe impossible d'obtenir les deux partie (part_haut et part_bas) demandées par divlivreor.css et je ne comprends pas du tout pourquoi.
Je pense que vous devez avoir une idée assez précise du rendu que je souhaite obtenir (si ce n'est pas le cas, demandez et j'apporterai les précisions nécessaires) donc si l'un d'entre vous aurait le début du commencement d'une solution ce serait sympathique.
Merci d'avance.
