Installation d'iframe problématique

par Eiffel01 Jeu 19 Fév 2015 - 17:24

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis que j'ai installé l'iframe
Lien du forum : http://hilarioyourcritique.forumactif.org/h3-colonne-de-navigation-site

Description du problème

Bonjour,
L'iframe que j'ai installé pose problème comme vous le voyez dans le lien fourni. Je veux que la barre de gauche présente à ce lien : http://hilarioyourcritique.forumactif.org soit faites sous iframe et que le résultat soit exactement le même. J'ai créé la barre sur cette page : http://hilarioyourcritique.forumactif.org/h2-colonne-de-navigation et je voudrais l'inséré dans la page d'accueil.

Code de la barre dans la page servant pour l'iframe :

Code:: <!DOCTYPE html> <html lang="fr"> <head> <title>Colonne de navigation</title> <meta charset="utf-8" /> <style> nav{ border: 1px solid gray; vertical-align: top; display: inline-block; width: auto; margin-left: 4%; height: 700px; background-image: url("http://illiweb.com/fa/pbucket.gif"); background-color: rgba(255,255,255,0.9); border-radius: 20px; position: fixed } .navsite_liens { padding-left: 10px; padding-right: 10px; font-size: 17px; padding-top: 4px } .navsite_liens:before { content: "✖ "; color: #803535; font-size: 14px } </style> </head> <body> <nav> <div style="text-align: center; margin-top: 6%"><img src="http://i38.servimg.com/u/f38/19/14/71/81/mini_b10.jpg" /></div> <div style="font-size: 8px; text-align: center; font-style: italic">Forum de <a href="http://www.forumactif.com" target="_blank">forumactif.com</a></div> <div style="text-align: center; font-size: 18px; color: #000000; font-family: georgia; margin-top: 15%; text-transform: uppercase; font-weight: bold"><i>Bonne visite</i></div> <div class="navsite_liens" style="margin-top: 40%"><a href="http://hilarioyourcritique.forumactif.org/h1-accueil">Accueil</a></div> <div class="navsite_liens"><a href="#">Plan du site</a></div> <div class="navsite_liens"><a href="#">Foire aux questions</a></div> <div class="navsite_liens"><a href="#">Contact</a></div> <div style="text-align: center; font-size: 18px; color: #000000; font-family: georgia; margin-top: 40%; text-transform: uppercase; font-weight: bold"><i>En partenariat</i></div> <center> <div style="margin-top: 5%"> <a href="http://hilarioyourcritique.forumactif.org/h1-accueil"> <img src="http://i38.servimg.com/u/f38/18/94/07/48/logoyc10.jpg" /></a> </div> </center> </nav> </body> </html>

Quelqu'un a-t-il la solution ?

par Eiffel01 Ven 20 Fév 2015 - 20:24

par Eiffel01 Sam 21 Fév 2015 - 23:06

par [Nihil] Lun 23 Fév 2015 - 0:34

L'iframe que j'ai installé pose problème comme vous le voyez dans le lien fourni.

Hum... Pourrais tu justement détailler ces problèmes ? Ce qui peut te sembler évident pour toi ne l'est pas forcément pour nous Smile

!

As tu pensé à donner des dimensions à ton iframe Smile

? Par exemple (ce sont de fausses valeurs, juste pour donner un exemple) :

Code:: <iframe src="page.html" width="300" height="300"></iframe>

Seconde petite chose, il faut que tu places en fixed ton élément sur la page qui accueille l'iframe, et non pas dans l'iframe.

par Eiffel01 Mer 25 Fév 2015 - 20:47

Oui, il y a bien des tailles ->

Code:: <nav> <iframe src="http://hilarioyourcritique.forumactif.org/h2-colonne-de-navigation" width="300" height="300"></iframe> </nav>

Le problème étant que la barre n'est pas à gauche du contenu, mais le contenu est en dessous. Un float: left ne résout pas le problème.

par [Nihil] Jeu 26 Fév 2015 - 12:50

Le float left ne marchera pas car l'élément après est trop large (avec sa marge, en jaune sur capture d'écran).

Essaye avec à la place float: left; mettre quelque chose comme

Code:: position: absolute; top: 20px; left: 20px;

par Eiffel01 Jeu 26 Fév 2015 - 19:06

Résultat impeccable, merci à toi.
Résolu

Installation d'iframe problématique