[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!
A voir également:
- [CSS/HTML] float?
- Editeur html - Télécharger - HTML
- Espace en html ✓ - Forum HTML
- Espace html ✓ - Forum Webmastering
- Html download - Télécharger - HTML
- /Var/www/html/index.html ✓ - Forum Linux / Unix
4 réponses
N'importe, les deux fonctionnent de la même manière:
OU
<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.
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.
