JeuWeb - Crée ton jeu par navigateur
[Résolu] Accoler une iframe et un div - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu] Accoler une iframe et un div (/showthread.php?tid=1748)



[Résolu] Accoler une iframe et un div - Argorate - 28-03-2008

Bonjour, j'ai un petit soucis technique:
J'ai une iframe, et il me faut acoller un div a celle-ci.
alors je met le div en absolute et cela marche tres bien sous IE, mais comme d'hab FF non, donc quelqu'un a t-il une solution?

merci.


RE: Acoller une iframe et un div - Sephi-Chan - 28-03-2008

Peux-tu nous donner le code HTML et le code CSS ? Et aussi nous détailler un peu plus ce que tu veux ?
Accoler ça ne veut rien dire, comme ça. Accoler quel bord du div à quel bord de l'iframe ?


Sephi-Chan, mais tu sais, les iframes… Non j'déconne :p


RE: Acoller une iframe et un div - Argorate - 28-03-2008

lol Big Grin bien, j'ai pas fait un feuille css juste pour ça, alors voila se que j'ai:

Code :
<iframe name="iframejeu" src="iframejeu.php" height="776" width="833" frameborder="0"></iframe>
<div style="color: #FFFFFF; border-style:ridge; width:140px; height:776px; background-image:url(\'images/menudroite.gif\'); z-index:2; position:absolute;">...</div>

donc c'est plutot simple, il me faut ça:

--------- -----
| IFRAME | DIV |
| IFRAME | DIV |
| IFRAME | DIV |
| IFRAME | DIV |
| IFRAME | DIV |
| IFRAME | DIV |
--------- -----

d'autres questions?^^


RE: Acoller une iframe et un div - Sephi-Chan - 28-03-2008

Si tu souhaite utiliser les position absolues, voilà une piste :

Code :
<div class="bloc">
    <div class="iframe">
        <div>
            Lipsum dolor sit amet.
        </div>
    </div>
    <div class="div">
        <div>
            Lipsum dolor sit amet.
        </div>
    </div>
</div>

<div class="bloc">
    <div class="iframe">
        <div>
            Lipsum dolor sit amet.
        </div>
    </div>
    <div class="div">
        <div>
            Lipsum dolor sit amet.
        </div>
    </div>
</div>

Le CSS :

Code :
div.bloc {
    clear: both;
    border: 1px solid #000;
    position: relative;
    margin-bottom: 10px;
    width: 500px;
}

    div.bloc div.iframe {
        background: red;
        width: 70%;
    }
    
    div.bloc div.div {
        position: absolute;
        top: 0;
        margin-left: 70%;
        background: blue;
        width: 30%;
    }

Mais il y a bien d'autre méthode, plus efficaces, si tu ne souhaite pas forcément utiliser de positionnement absolue.


Sephi-Chan


RE: Acoller une iframe et un div - Argorate - 29-03-2008

Si tu as une meillieur méthode, je t'en prit, explique moi comment faire.


RE: Acoller une iframe et un div - Argorate - 30-03-2008

se serait mieux que je puisse avoir la meillieur methode maintenant, histoire que je me lance pas dans se que tu as mis au dessus pour rien, si y a mieux a faire. merci.


RE: Acoller une iframe et un div - Sephi-Chan - 30-03-2008

Code :
* {
    margin: 0;
    padding: 0;
    text-align: justify;
}

#conteneur {
    position: relative;
}

#conteneur div {
    margin-left: 500px;
}

#conteneur p {
    position: absolute;
    width: 500px;
    background: red;
}

Code :
<div id="conteneur">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus euismod. Etiam id urna sed metus lacinia condimentum. Suspendisse id nisi. Duis non eros. Vestibulum justo sapien, mattis vitae, porttitor id, blandit qui s,urna. Morbi consequat eros a dui.</p>

    <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus euismod. Etiam id urna sed metus lacinia condimentum. Suspendisse id nisi. Duis non eros.</div>

</div>

Je n'exclue pas qu'il y a des petites retouches à faire, au niveau des marges, notamment. Pour les contrer il faudra englober les éléments dans un bloc conteneur qui aura les propriétés de marges voulues. Enfin, tu trouvera. Smile

Finalement, la récente lecture d'un article m'a fait préféré la position absolute, d'un point de vue sémantique du CSS.


Sephi-Chan