Superposition d'images

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Blustuff
Gecko
Messages : 51
Inscription : 15 mars 2005, 01:10

Superposition d'images

Message par Blustuff »

Bonsoir,

Je suis confronté à des problèmes étranges de comportement du navigateur.

En particulier dans mon cas, je cherche à superposer des images dans un tableau, en nombre indeterminé. Il y a une méthode simple pour superposer trois images, si l'une est commune : définir une image comme background du tableau, l'une comme background d'une cellule et une image pysique.

Firefox est incroyablement rapide pour modifier l'attribut "background" d'une cellule, même si malheureusement il me semble que cet attribut est en abandon.

Si l'on veut superposer plus d'images, il faut recourir au positionement des élements via le couple d'attribut de style "position: absolute; z-order: x;"

Si je me trompe jusque là, je suis prêt à l'admettre, et ca m'arrangerai d'ailleurs énormément !

La pratique devient plus douloureuse. Voici donc les comportements étranges :
  • Marge inattendue :

    http://blustuff.free.fr/galerien/index.htm

    Cet exemple montre une image toute verte avec une bordure bleu dans une case à la bordure rouge. Un espace intérieur à la cellule et extérieur à l'image apparaît. La seule solution que je connais à ce système (trouvée par un utilisateur d'un autre forum) consiste à définir une marge négative :

    Code : Tout sélectionner

    margin-bottom: -5px;
    J'aimerais savoir si c'est la seule solution, et pourquoi ce comportement à lieu.
  • Images qui se font la malle :

    http://blustuff.free.fr/galerien/test.htm

    J'attendrais en fait du navigateur qu'il affiche le S bleu dans la case noire entre les cases vertes, or celui-çi descend. De même le S bleu plus haut aurait du être superposé au II. Je ne sais pas vraiment ce que dit le consortium pour le positionement absolue sans mention de position. (top, left, etc.)

    Là encore, j'aimerais comprendre le comportement du navigateur, ainsi que peut être une solution de rechange. Je ne suis pas capable de fournir des mention top, left, etc. parce que la position des élements varie suivant la taille de la fenêtre etc.

Blustuff.
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

Marge inattendue
Souviens toi de tes cours d'écriture à l'école. Tu écrivais sur une ligne et certaines lettres dépassaient en bas sous la ligne comme par exemple p ou q. Là ton image est posée sur la ligne et l'espace en dessous est ménagé pour le bas de ces lettres. Pour éviter cela tu peux mettre un code

Code : Tout sélectionner

img
{
	vertical-align:bottom
}
au lieu d'une marge négative. Ça "pose" l'image en bas de la cellule au lieu de sur la ligne d'écriture.

Images qui se font la malle
Je ne sais pas exactement ce que disent les directives mais il me semble que la position:absolute est définie par rapport à l'angle supérieur gauche de ta fenêtre. Donc sans spécifier de top ou left ça n'a pas trop de sens et la propriété devrait être ignorée ou l'image placée dans cet angle comme si les valeurs étaient nulles. Je ne sais pas pourquoi FF lui donne juste un décalage vers le bas.
Quant au S du haut pour moi il est superposé au II.
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Re: Superposition d'images

Message par SIBELIUS »

Blustuff a écrit : Si l'on veut superposer plus d'images, il faut recourir au positionement des élements via le couple d'attribut de style "position: absolute; z-order: x;"
"z-order" n'existe pas. Il s'agit de "z-index" ;)
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
Blustuff
Gecko
Messages : 51
Inscription : 15 mars 2005, 01:10

Message par Blustuff »

Certes, mais ca ne résoud pas mon problème :p

Merci pour les lettres qui dépassent de la ligne, ca donne une solution qui a des chances de fonctionner sur plus de navigateurs.
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

Je ne vois pas bien où tu veux aller.
Si j'ai bien compris ton S ne bouge pas, tu veux qu'il reste dans la case. Supprime lui simplement la proprité position:absolute et c'est ce qu'il fera. Le z-index n'a pas besoin de position:absolute pour être pris en compte.
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Message par SIBELIUS »

SB a écrit : Le z-index n'a pas besoin de position:absolute pour être pris en compte.
Si, en tout cas, l'élément doit être positionné (absolu, relatif ou fixé)
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

Positionné oui, mais pas en absolute. Un position:relative sans mettre de décalage devrait faire l'affaire.
Blustuff
Gecko
Messages : 51
Inscription : 15 mars 2005, 01:10

Message par Blustuff »

SB a écrit :Le z-index n'a pas besoin de position:absolute pour être pris en compte.
Vous avez tout à fait raison. Le position absolute est là pour que les images se superpose, ainsi z-index devient interessant. Il est vrai que l'on peut toujours spécifier un z-index, mais si les images ne se superposent pas, ce n'est pas vraiment utile.

Il faut donc au contraire spécifier un décalage :

Code : Tout sélectionner

<img src="image.gif" syle="z-index: 2;"/><img src="image.gif" style="position: relative; left: -20px; z-index: 1;"/>
Peut être me suis-je trompé, mais z-index n'a aucun effet ici. S'il est une règle précise telle que l'ordre prévaut, pourquoi pas, sinon...
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

tout simplement, sans rien changer à ton css

<body>
<p class "table"><img src="image.gif" width="48" height="48" alt="image"/></p>
</body>
Blustuff
Gecko
Messages : 51
Inscription : 15 mars 2005, 01:10

Message par Blustuff »

Pour des raisons liées à la génération dynamique, le tableau doit impérativement être gardé.
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

génération dynamique? explique...merci
regarde là aussi
http://openweb.eu.org/articles/tableaux_css/
Blustuff
Gecko
Messages : 51
Inscription : 15 mars 2005, 01:10

Message par Blustuff »

Génération via Javascript. Le paramètre de rapidité de génération entre en compte.
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

on peut tout faire avec les css, sans java

c'est ça que tu veux ???

----------
http://ottomar.chez.tiscali.fr//tableau/tableaux.html
---------
marche aussi sur ie et kmeleon et netscape
un p'tit coup de 'webDeveloper' pour éditer le css
----------
tiscali m'emm...avec ses bas de page
------------
et on peut faire xhtml sans la 'table' juste avec des <div>
--------------
me suis trompé de post, m... :lol:
Blustuff
Gecko
Messages : 51
Inscription : 15 mars 2005, 01:10

Message par Blustuff »

Java est un langage de programmation, html & css des langages de description. Il est tout à fait absurde de parler de ce que l'on peut faire avec Javascript qu'on ne pourrait pas faire avec html & css. Le Javascript va servir à générer de l'html. Ce n'est qu'en cette relation logique qu'il faut parler.

La solution que vous proposez a en fait déjà été proposée sur un autre forum et retenue. Néanmoins, elle comporte un inconvénient majeur : il faut modifier le style et non l'attribut src. Ce qui est beaucoup plus lent pour des raisons que j'ignore. Je cherche donc à voir s'il existe des alternatives.
Avatar de l’utilisateur
ottomar
Varan
Messages : 1145
Inscription : 09 janv. 2005, 07:31

Message par ottomar »

pourtant...
les .css sont excessivement 'légers' et ils allègent le code

arguments
et alsaCréations
Dernière modification par ottomar le 18 mars 2005, 09:02, modifié 2 fois.
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités