[Résolu] Accoler une iframe et un div

[Argorate]

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.

[Sephi-Chan]

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

[Argorate]

lol 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?^^

[Sephi-Chan]

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

[Argorate]

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

[Argorate]

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.

[Sephi-Chan]

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.

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