Positionnement absolu d'une image

infomamy · Message par **infomamy** » 16 févr. 2012, 10:10

Bonjour
J'ai voulu utiliser la propriété Dissociation du texte dans Kompozer (version 0.8b3) avec une image en .png de façon que l'image se superpose au texte.
Dans le volet Conception : pas de problème, l'effet est réussi. Mais dans les navigateurs, l'image n'est plus positionnée à l'endroit souhaité. En décalant l'image dans le mode Conception, j'ai réussi à obtenir ce que je voulais. Ce n'est plus du WYSIWYG ! Avec Internet Exporer 9 ou Google Chrome cela rend bien. Firefox par contre interprète en décalé.
Mes questions :
- Cette fonction Dissocier du texte est-elle fiable ?
- Y a-t-il une propriété à ajouter à la position Absolute (traduite par Kompozer lors de la dissociation de texte) pour obtenir un meilleur résultat d'affichage dans les navigateurs ? Définir un index Z ? (il faudrait que je comprenne à quoi cet Index Z correspond et ce n'est pas le cas !)
Merci à ceux qui pourront m'expliquer
Cordialement

Message par **Ymai** » 16 févr. 2012, 23:13

infomamy a écrit :Bonjour
J'ai voulu utiliser la propriété Dissociation du texte dans Kompozer (version 0.8b3) avec une image en .png de façon que l'image se superpose au texte.
Dans le volet Conception : pas de problème, l'effet est réussi. Mais dans les navigateurs, l'image n'est plus positionnée à l'endroit souhaité. En décalant l'image dans le mode Conception, j'ai réussi à obtenir ce que je voulais. Ce n'est plus du WYSIWYG ! Avec Internet Exporer 9 ou Google Chrome cela rend bien. Firefox par contre interprète en décalé.
Mes questions :
- Cette fonction Dissocier du texte est-elle fiable ?

Je pense avoir longtemps milité pour la disparition de cette fonctionnalité héritée de NVU. Sans grand succès.

- Y a-t-il une propriété à ajouter à la position Absolute (traduite par Kompozer lors de la dissociation de texte) pour obtenir un meilleur résultat d'affichage dans les navigateurs ? Définir un index Z ? (il faudrait que je comprenne à quoi cet Index Z correspond et ce n'est pas le cas !)

Le z-index correspond à la coordonnée selon un axe Z, c'est-à-dire sur la profondeur.
http://www.alsacreations.com/astuce/lir ... index.html

Message par **chinon37** » 17 févr. 2012, 13:57

Bonjour,
Pour qu'un texte soit "posé" sur une image, rien de tel qu'une image de fond pour le bloc contenant le texte .

infomamy · Message par **infomamy** » 18 févr. 2012, 09:44

Bonjour
Merci Ymai et Chinon pour vos réponses.
Ce que je souhaitais faire en "WYSISWYG, c''était coller une image sur un texte (l'annulation d'une conférence, par exmple comme ICI). Mais cela ne semble pas évident.

Merci pour ce Forum à tous ses participants.

Message par **Ymai** » 18 févr. 2012, 12:18

Bonjour
Je suis moi-même surpris de la simplicité de la solution.
L'image est fixée dans le paragraphe où elle doit apparaître.
En feuille de style, on définit une "class" contenant les directives:

Code : Tout sélectionner

position: absolute;
left: 400px; #par exemple

Puis on attribue la "class". correspondante à l'image qui doit couvrir le texte.
Bien évidemment, il doit s'agir d'une image transparente (GIF ou PNG).
Ce qui donne quelque chose du genre:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>test</title><style type="text/css">
.imageSup {
  position: absolute;
  left: 400px;
}

</style></head><body>
<p>bla Bla bla bla Bla bla bla Bla bla bla bla Bla bla bla Bla
bla bla Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla bla
bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p>
<p><img class="imageSup" src="images/confirme.png" alt="confirme" style="width: 246px; height: 89px;">Bla
bla bla Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla bla
bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla
bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla bla
Bla bla bla Bla bla bla Bla
 </p>
</body></html>

J'étais intimement persuadé que le positionnement absolu de l'image ne pouvait se faire que si elle se trouvait elle-même dans un bloc positionné.
A remarquer que c'est la solution qui figure aussi dans l'exemple donné, sauf qu'on y a ajouté une valeur pour la propriété "top" de l'image, mais que l'on peut supprimer sans souci. C'est même mieux car on est ainsi certain que l'image n'ira pas se ballader sur un autre paragraphe en cas de redimensionnement de la fenêtre.
Testé sous FF, Opera et Chromium. Je crains IE.

infomamy · Message par **infomamy** » 19 févr. 2012, 09:37

Bonjour Ymai
Vraiment super ! Cela fonctionne ! Et cela directement dans Kompozer. Merci !

Bonne journée

Message par **Ymai** » 19 févr. 2012, 11:53

infomamy a écrit :Bonjour Ymai
Vraiment super ! Cela fonctionne ! Et cela directement dans Kompozer. Merci !
Bonne journée

Confirmation aussi sous IE? Si quelqu'un pouvait tester...
Mon inquiétude vient de cette lecture:

NOTE : les blocs positionnés en "absolu" ou "fixé" sortent du flux naturel et échappent quelque peu à cette règle.
Ils ne sont alors plus dépendant des éléments frères.
Pour se placer, un tel bloc se réfère non pas à son Parent direct, mais au premier Ancêtre positionné qu'il rencontre.

http://www.alsacreations.com/article/li ... tie-1.html
Dans le cas présent, l'élément parent et seul ancêtre est <p> qui n'est pas positionné... Je reste dubitatif. Mais je torture la page dans tous les sens, sans casser la mécanique. Y compris en englobant le paragraphe dans un <div> positionné. Cela fonctionne dans tous les cas (sous FF).

infomamy · Message par **infomamy** » 19 févr. 2012, 16:31

Confirmation aussi sous IE? Si quelqu'un pouvait tester...

J'ai testé dans IE9 sous Windows Seven, dans FF et aussi dans Google Chrome. Cela fonctionne vraiment bien. L'image peut être placée pratiquement à l'endroit souhaité.
Par contre, il faut que la nouvelle classe créée pour l'image soit obligatoirement contenue dans une Feuille de style interne et non pas dans la feuille de style externe, sinon cela ne fonctionne pas. Cela me semble d'ailleurs logique ... Quoique ?

Merci encore Ymai

Message par **Ymai** » 19 févr. 2012, 16:52

infomamy a écrit :Quoique ?

Après test, je me permets d'infirmer. En tous les cas, sous FF, Chromium et Opera.

infomamy · Message par **infomamy** » 19 févr. 2012, 17:53

Après test, je me permets d'infirmer. En tous les cas, sous FF, Chromium et Opera.

Très juste ! Je viens de refaire ... Pas de problème avec la feuille de style externe avec IE9. J'avais dû faire de mauvaises manips !

Encore merci !

Geckozone

Positionnement absolu d'une image

Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Re: Positionnement absolu d'une image

Qui est en ligne ?