Superposition d'images en CSS

[fredm]

Bonjour,

Ce sujet a maintes fois été évoqué, cependant je n'arrive pas superposer correctement les images sur mon site car la hauteur de l'image de base est dynamique.
Les images suivantes sont en position:relative mais leurs positions sont par rapport au bas de la première image, si c'était relatif au coin gauche le problème serait résolu.
Sur cette page, pour la référence 40042, la loupe est au milieu.
Sur cette page, pour la référence 20291, le texte n'est pas bien en haut de l'image.

Je voudrais "SIA" en haut à gauche, la loupe en haut à droite, et le texte "vendu/option" en haut.

Quelqu'un a-t-il une idée ?

Merci.

 

[allignol]

Bonjour,

Dans tes css (menu.css), passes

table#liste tr td

en

position:absloute;

, puis tes images

.loupe

et

.sia

en

position:absolute;

aussi. La loupe en top:0 et right:0 et la sia en top:0 et left:0

Ajoutes une classe à ta balise div pour le texte, puis position:absolute aussi. top:0 left:0

Ca devrait passer comme ça.

 

[fredm]

Bonjour,

Je viens d'essayer ta solution et ça ne marche pas, Ca m'a donné un truc catastrophique:

table#liste tr td {
	/*position: relative;*/
	/*padding: 0px;*/
	vertical-align: top;
	padding-bottom: 1em;
	position:absolute;
}
/* Pour la loupe et le sia */
table#liste tr td img {
	position: relative;
}
table#liste tr td img.photo {
	width: 150px;
}
table#liste tr td img.loupe {
	right: 0;
	top: 0;
	z-index: 103;
	position:absolute;
}
table#liste tr td img.sia {
	top: 0;
	left: 0;
	z-index: 103;
	position:absolute;
}

 

[poulpe]

y a beaucoup de problèmes dans la facon dont tu as structuré ton html,
mais le quickfix pour faire ce que tu veux :

table#liste tr td img.loupe {
    left: 390px;
    position: absolute;
}

table#liste tr td {
    position: relative;

J ai pas recopie toute la css mais ca marchait sous FF.

 

[fredm]

Merci d'avoir essayé mais ça ne marche toujours pas, ça me donne ceci:

table#liste tr td {
	position: relative;
	/*padding: 0px;*/
	vertical-align: top;
	padding-bottom: 1em;
}
/* Pour la loupe et le sia */
table#liste tr td img {
	position: relative;
}
table#liste tr td img.photo {
	width: 150px;
}
table#liste tr td img.loupe {
    left: 390px;
    position: absolute;
}
table#liste tr td img.sia {
	top: -130px;
	right: 40px;
	z-index: 103;
}

Effectivement le problème doit se situer dans mon code html. Peut-être je devrais positionner les images supplémentaires par rapport à un point fixe comme par exemple la cellule de droite du tableau (celle où est écrit la description)...?

 

[Savoy]

Tu devrais virer les tableaux et les passer en div ou faire des listes.

Après tu peux mettre chaque élément en background avec une position top left bottom etc... et jouer sur le z-index ça devrait marcher (à vérifier qd même avec IE...)

 

[fredm]

Effectivement ça semble être la solution mais j'aurais quand même voulu résoudre ce problème en apparence simple sans être obligé de tout changer. Puis à priori les tableaux sont recommandés dans ce type d'affichage ..?

 

[dolmenhir]

... j'aurais quand même voulu résoudre ce problème en apparence simple...

mais ce n'est justement pas si simple, vu les problèmes d'apparence... et la clarté (pureté ?) du code y contribue fortement.
Les conseils précédents de nettoyage du code me semble être un pré-requis pour solutionner efficacement ton problème.

Une méthode stricte également sera nécessaire.
Si tu veux que tes pages soient bien calibrées, les éléments qui la composent doivent l'être aussi.
Ta loupe n'est pas toujours correctement positionnée car la hauteur des images n'est pas standard.
Soit tu forces cette hauteur dans ta css

.vignette { heigth:100px}

Soit tu retailles les images.

une 'tite boite d'aspirine sera la bienvenue quand tu devras vérifier l'affichage avec différents navigateurs... :roll:

 

[fredm]

Effectivement la hauteur des images est variable, d'où le problème.
Mais je veux garder la possibilité de mettre des images de tailles différentes.

Donc s'il n'y a pas moyen de positionner les images supplémentaires par rapport au coin gauche de la cellule du tableau qui contient l'image, je pense que la seule solution est de les positionner par rapport à un autre point fixe comme la cellule juste à droite.

 

[dolmenhir]

Dans ce cas, place d'abord l'image de ta loupe dans la cellule, en float ou mets un text-align sur le td de la cellule.
Puis place ta photo en position relative par rapport à la loupe, avec un top à 0.
Enfin, utilise les z-index pour superposer le tout dans le bon ordre.
ça devrait, théoriquement, fonctionner.