{CSS} Une image sur l'autre Fermé

Question

Bonsoir, j'ai un problème de CSS qui m'empêche d'avancer.

Sur ma home page, j'ai généré des images pour catégorie avec le plug in Category Icons.
Seulement j'aimerai les placer SUR l'image.

J'imagine que c'est pas trop clair, http://www.musthaveonline.fr/futur/  ce le sera plus.

Quelqu'un pourrai m'aider s'il vous plait ?

Merci d'avance =)

Posotaz · Answer

Salut :-)

Alors premièrement je constate une mauvaise utilisation des ID dans tes "box_categorie"... en effet, un ID sert à identifier un élément de façon unique, or, toi tu utilises le même ID pour tous tes "box_categorie". Tu devrais utiliser l'attribut "class", autrement le ".box_categorie" défini dans le CSS n'est rattaché à rien... j'étais d'ailleurs entrain de devenir dingue à ne pas comprendre pourquoi je n'avais aucun pouvoir sur cette zone.

Une fois que tu auras corrigé ceci, l'astuce c'est de placer la zone "catégorie" en retrait négatif. J'ai tenté un "top: -60px" et ça a l'air d'être correctement positionné sur le coin inférieur gauche de la vignette.

J'espère avoir été clair, à bientôt !

alexislevrai · Answer

Merci pour ton aide, je viens d'essayer ceci, mais ça ne fonctionne pas =(
#box_categorie{ 
	  top: -60px;
	  z-index:2; 
	  bottom:0; left:0; 
}

j'ai aussi mis class pour tout mes span sauf celui de l'image car sinon mon image n'est plus à l'échelle.

Posotaz · Answer

Hi, A partir du moment où tu mets "#", tu fais référence à un ID... or, si tu as suivi mon conseil de changer id en class, tu devais conserver le "." ;-) Ca ne peut pas ne pas fonctionner, j'ai testé directement sur ta page avec FireBug et je n'ai pas changé grand chose. Donc, pour récapituler : Tous les deviennent et .box_categorie reste .box_categorie

alexislevrai · Answer

GRRRRRR ! c'est pas faisable, ça ne veux pas marcher.

Pourtant je respecte ce que tu m'as dit a la regle.

Posotaz · Answer

Yop, désolé, j'ai oublié de te dire que j'avais rajouté ça :

position:relative;

alexislevrai · Answer

Génial merci beaucoup tu peux pas savoir a quel point tu me "sauve".

Je suis un tout nouveaux dans la CSS (ca doit se voir) et je cherche depuis cet aprem' 15h comme bouger ce bandeau.

C'est génial.

Et tu saurais pas au passage comment je peux mettre au premier plan ma "bordure d'image" qui est actuellement  derrière.
#box_cadreimage { 
	 z-index:2; 
	 background-image:url('media/cadre.png'); 
	 height:120px; 
	 width:180px; 
	 padding:5px; 
	 margin-bottom:10px; 
} 

PS: ah et je peux pas m'évaluer, mais il est très tordu mon codage ou ca tiens la route ?

Encore merci beaucoup.

Posotaz · Answer

:-) Heureux pour toi.

Je comprends ce que tu veux faire avec la bordure mais le problème ce n'est pas qu'elle est en dessous... c'est qu'elle n'a pas assez de place pour s'afficher. C'est une image de fond de 184x124 et les images de fond ne peuvent être redimensionnées, donc il faut que ton cadre soit aussi grand que 184x124... et tu ne peux pas non plus les superposer sur chaque image (on n'appelle pas ça image de fond pour rien :D)... ce qui fait que même si tu réussissais à l'afficher, tu n'aurais pas l'effet de "clip" voulu et ce serait pas joli du tout... du coup ce n'est possible à faire qu'en définissant cette image x fois à part et en venant la positionner (toujours par la technique des z-index, de la position relative et des retraits négatifs) explicitement par dessus (exactement comme on vient de faire pour les catégories) mais j'ai peur que ça devienne compliqué... je t'avoue ne jamais avoir joué sur les superpositions auparavant, du moins pas plus que ça.

En ce qui concerne le code je trouve juste dommage que tu mélanges des styles un coup dans la page HTML et un coup dans la CSS, sinon pour le reste c'est très clair, j'ai pas eu difficile pour m'y retrouver.

Bon courage pour la suite, le design est très joli !

alexislevrai · Answer

Je pense avoir la solution, je vais faire une "grande" image en png que je vais mettre en supperposition en l'insérent tout simplement avec un <img src="..."/>

Et justement, je viens d'enlever le style de mon code html, (il était là car au début que je ne comprenais rien je le fesais générer par iWeb et copié le code. maintenant j'ai progréssé =D donc je clarifie le tout).

J'ai pas tout a fait compris l'histoire de background etc mais c'est pas bien grave.

En tout cas merci beaucoup, j'ai pas mal avancé, juste que le titre du post ne s'alligne pas correctement, je sais pas pourquoi :S

Merci beaucoup pour ton aide. SI jamais un jour tu as besoin d'aide au niveau du design, pub, demande moi ;) http://www.paperdonut.com

{CSS} Une image sur l'autre

8 réponses

Discussions similaires