Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[CSS] position: relative sur une image

2 réponses
Avatar
Salagir
Je cherche à placer des images très précisément dans ma page.
Pouvez vous m'aider ?

Ce que je fais, pour toutes, c'est que je les déplace de leur point
d'appel pour les mettre par-dessus le reste à un autre endroit.

Mais à l'affichage final, il y a un "trou" là où a été appelé l'image. A
cet endroit j'aurai voulu du texte (puisque l'image n'est plus là,
"taken out of the flow" comme ils disent sur le site du w3c)

Ca n'apparait plus si j'utilise absolute, mais je ne peux pas l'utiliser
(je déplace les images depuis leur point de départ..)

Exemple:
fdlksjflkdsjfldksfjld jdsk fdlskfj dlskf lkdfds #####
dsmlkfdls fmldskfld mfl dmsfl dms fsdm fmls fml #####
fjkdsfidsfjldksfjlsdifjdlkfjdlsfkdslfjdsifjldskfjldsf
fldisjflsdk fksdjflsdf ds fkjsdhfkdsjlfk jsdlfj lds l

l'image est en float: right, dans un <p> qui prends pas toute la place
sur la page.

Avec un position: relative, je veux la déplacer à droite, et ca rends ca:

fdlksjflkdsjfldksfjld jdsk fdlskfj dlskf lkdfds
dsmlkfdls fmldskfld mfl dmsfl dms fsdm fmls fml #####
fjkdsfidsfjldksfjlsdifjdlkfjdlsfkdslfjdsifjldskfjldsf #####
fldisjflsdk fksdjflsdf ds fkjsdhfkdsjlfk jsdlfj lds l

Je ne veux pas le trou...
De plus, si 2 paragraphes de ce style se suivent avec peu de texte, les
images se gènent l'une l'autres avant d'être déplacées (alors que
normalement, elles devraient se chevaucher tout simplement)

Résultat dans ce cas:
ldkjsflkdjslfkdjsl ####
dsljkqdlskd jqlsids $$$$ ####
$$$$
Au lieu de (voulu):

ldkjsflkdjslfkdjsl ####
dsljkqdlskd jqlsids $$$$
$$$$

Une solution est de faire un tableau, mais vous aurez bien compris que
je veux éviter cela.

==== code ====

<p><img src="aaa"> fdksjflkdsjfkdsfj[...]</p>

p { margin-right: 50px }
img {
float: right;
position: relative;
right: -50px;
top: +1em;
}

--
++++++++ Zelda, Dragon Ball, Mana and my (art)work at www.salagir.com ++++++++
The software required Win95 or better, so I installed Linux.

2 réponses

Avatar
Nicolas Moreau
Salagir wrote:

Ce que je fais, pour toutes, c'est que je les déplace de leur point
d'appel pour les mettre par-dessus le reste à un autre endroit.

Mais à l'affichage final, il y a un "trou" là où a été appelé l'image. A
cet endroit j'aurai voulu du texte



As tu essayé avec des marges négatives ?

--
Nicolas Moreau
Avatar
Nicolas Moreau
Le 11/07/2003 11:20, Salagir a écrit :

As tu essayé avec des marges négatives ?



Non... quand même pas... Ce serai.. mal... ??



c'est le côté obscure de margin :)

Bon, ca marche d'enfer!



Il y a quand même des limitations sous IE/Win, par exemple si l'élément
sur lequel tu appliques la marge négative doit "dépasser" un élément
contenant, ex:

<div style="width:30%;border:1px solid
red;margin-left:20%;padding:1em;">
<div style="margin:0 -2em;border:1px solid green">
Texte
</div>
</div>


--
Nicolas Moreau