[CSS/HTML] float?
Résolu
small-princess16
-
small-princess16 -
small-princess16 -
Bonjour,
Je souhaiterais créer quelque chose dans ce style:
<a href="http://www.zimagez.com/zimage/26cf7484ee7304e027cd800f56350bdfe.php" target="blank" title="photo hebergée par zimagez"><img src="http://www.zimagez.com/miniature/26cf7484ee7304e027cd800f56350bdfe.jpg"></a>
Avec le logo MAHF, et à côté, du texte. Pour cela j'ai crée 2 div, un pour le logo, l'autre pour le texte, et j'ai mis un float:right; sur le texte, et mis des marges négatives en haut et à gauche pour qu'il se positionne à côté du logo. Malheureusement, cela ne fonctionne pas avec Firefox, mais fonctionne avec IE 6 (je suis sur windows 2000, pas moyen de mettre IE 7 ou 8).
Avec Firefox ça me donne cela:
<a href="http://www.zimagez.com/zimage/14dda3294639111644b18cf2f07d8eb29.php" target="blank" title="photo hebergée par zimagez"><img src="http://www.zimagez.com/miniature/14dda3294639111644b18cf2f07d8eb29.jpg"></a>
Auriez-vous une solution? Je suis désespérée! De plus, je ne gère pas bien les float!
Merci et bonne journée!
Je souhaiterais créer quelque chose dans ce style:
<a href="http://www.zimagez.com/zimage/26cf7484ee7304e027cd800f56350bdfe.php" target="blank" title="photo hebergée par zimagez"><img src="http://www.zimagez.com/miniature/26cf7484ee7304e027cd800f56350bdfe.jpg"></a>
Avec le logo MAHF, et à côté, du texte. Pour cela j'ai crée 2 div, un pour le logo, l'autre pour le texte, et j'ai mis un float:right; sur le texte, et mis des marges négatives en haut et à gauche pour qu'il se positionne à côté du logo. Malheureusement, cela ne fonctionne pas avec Firefox, mais fonctionne avec IE 6 (je suis sur windows 2000, pas moyen de mettre IE 7 ou 8).
Avec Firefox ça me donne cela:
<a href="http://www.zimagez.com/zimage/14dda3294639111644b18cf2f07d8eb29.php" target="blank" title="photo hebergée par zimagez"><img src="http://www.zimagez.com/miniature/14dda3294639111644b18cf2f07d8eb29.jpg"></a>
Auriez-vous une solution? Je suis désespérée! De plus, je ne gère pas bien les float!
Merci et bonne journée!
4 réponses
-
N'importe, les deux fonctionnent de la même manière:
<div><img style="float:left;" src="..." alt="..."/>bla bla bla</div>
OU<div> <div style="float:left;"><img src="..." alt="..."/></div> <div>bla bla bla</div> </div>
-
Bonjour,
Ce fonctionnement est normal, c'est IE6 qui ne gère pas bien.
Le mieux est, dans le code, de mettre l'image, PUIS le texte, et mettre un float:left à l'image. le texte se placera directement à droite de l'image, sans avoir besoin de marges négatives ou quoi que ce soit.
Pour info, le float:left ou float:right fait que l'élément se situera à gauche ou à droite du(des) prochain(s) élément(s). il est donc normal qu'avec un float:right le texte en question se situe tout à droite du conteneur.
Pour bien apprendre le fonctionnement des float, n'hésite pas à faire une page vide pour faire des tests. -
Merci pour ta réponse!
Tu parles de mettre l'image puis le texte dans le même div...? -
