Page 1 sur 1

Problème iframe et css

Posté : 05 sept. 2010, 11:50
par EW
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 : 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.

Re: Problème iframe et css

Posté : 06 sept. 2010, 08:54
par EW
problème résolu, il y avait juste diverses erreurs au niveau de la gestion des dimensions dans le div, il manquait également un bloc div pour englober les "part_haut_ et "part_bas", rien de bien méchant en sommes, il faut juste que je penses à dormir un peu plus #-o