28234 sujets

CSS et mise en forme, CSS3

[Résolu] N'afficher qu'une partie d'une image, ça fonctionne pas

Bonsoir,

Je souhaite n'afficher qu'une partie d'une image et j'essaye donc d'adapter ce qu'on m'a un jour donné : http://jsfiddle.net/4kF7n/1/

Cependant ça ne fonctionne pas et je ne sais pas pourquoi. Je peux certes vous passer le code mais je ne suis pas sûre que ça suffise, il vous faudra peut-être les images aussi non ? Si vous souhaitez recevoir le dossier, vous pouvez m'envoyer un mp avec votre adresse mail.

Merci d'avance : 

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Trions nos déchets</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="tri.css" />
	</head>
	<body>
		<div id="fond">
			<div id="dechets">
			</div>
		</div>
		
		<script type="text/javascript" src="tri.js">
		</script>
	</body>
</html>


#fond
{
	width:100%;
	height:100%;
	position:absolute;
	/*left:15%;*/
	background: url(images/poubelles.png) no-repeat center center;
	background-size:contain;
	/*max-width:800px;*/
	max-height:600px;
}

#dechets
{
	width:10%;
	height:20%;
	position:relative;
	top:40%;
	left:44%;
	background:url(images/dechets.png) no-repeat center center;
	background-position: -0px -0px; 
	background-size:contain;
}

Il n'y a pas encore de Javascript.

Merci encore

Bonne nuit
Modérateur
Bonsoir !

Pour exploiter un sprite il faut donner à l'élément la taille de l'image que tu veux faire apparaître.
Par exemple tu as un sprite de 10px par 20px (deux images de 10px par 10px collées). Pour ne faire apparaître qu'une seule de ces deux images, le bloc qui aura le sprite en background devra avoir une largeur et une hauteur de 10px (le reste dépassant, il ne s'affichera pas).

Dans l'exemple que tu prends regarde la taille des div et joue avec pour comprendre comment ça marche.
Dans ton code les conteneur on comme tailles des width et height à 100% ou 10% (ce qui ne correspond pas du tout a la taille des images que tu veux afficher !

J’espère avoir été clair, il est tard Smiley biggol

Bonne continuation
Bonjour,

Merci c'est bien ce que je me disais. Mais alors comment faire pour garder les proportions quand on fait varier la taille de la fenêtre ?

Merci
Arf de l'anglais... Bon tant pis, faut bien que je m'y mette un jour... Merci ^^ Je vais essayer

Edit : zut de zut j'y comprends rien... Smiley ohwell
Modifié par Ccile13 (19 Dec 2013 - 20:25)
Bonsoir,

Apparemment ce que tu tentes de faire devrait fonctionner si ce ne sont pas des sprites.

background-size:contain; n'est pas tout a fait compatible avec l'idée de faire du sprite responsive.

le background-size exprimée en pourcentage le serait beaucoup plus . En maitrisant le ratio hauteur/largeur de l’élément ou afficher ton sprite , ce serait un plus ( comme dans cet exemple : http://codepen.io/gc-nomade/pen/Hezro sprite baser sur cette image http://i.stack.imgur.com/2xDHJ.png)

Alors , oui , nous mettre a dispo tes images (ou similaires en tailles et représentatives des zone de sprite si ... sprite) permettrait de te répondre clairement sur là ,où tu fais une erreur Smiley smile , mis a prt que contain est incompatible avec l'idée de cacher en partie l’image.
Modifié par gc-nomade (19 Dec 2013 - 21:13)
Désolée je suis fatiguée et je crois que ça n'aide pas à la compréhension.

Qu'entends-tu par "si ce ne ceux pas des sprites" et par sprite responsive ? (je cherche en même temps).

Comment vous transmettre les images ? (je suis pas une douée ? oui je sais...)

Merci
re,

pardon , alors un sprite est une image composée de plusieurs images.
On utilise ce genre d'image pour n'en charger qu'une au lieu de plusieurs. Ton exemple en lien , a , je pense, produit plus de confusion que d'aide a cerner ton problème. Il utilise justement ce sprite :
http://sdz-upload.s3.amazonaws.com/prod/upload/google-sprites.png

Pour le responsive, on entend par la qu'un ou plusieurs éléments s'adaptent a l'espace de l'affichage (dimension, affichage, organisation, contenu, etc ..), ton code basé sur du pourcentage, suggère qu'il se redimensionne en fonction de la fenêtre.

Pour tes images , tu peut joindre a ton post une ou plusieurs images :
"forum en mode:'repondre au sujet '" a écrit :
Joindre une image : Envoyer une image sur le forum pour qu'elle apparaisse dans le message.

++
Modifié par gc-nomade (19 Dec 2013 - 23:10)
C'est bien mon but... Ne charger que cette image upload/50936-dechets.png plutôt que toutes les petites et n'afficher qu'un déchet à la fois... (l'image des poubelles est celle-là upload/50936-poubelles2.png )
L'image de fond fait (la vraie car celle montrée est plus petite) 822*600, tous les déchets font 108*120 et l'image qui les rassemble : 540*360
Bonjour,

Je comprend mieux et c'est effectivement le background-size qui ne convient pas , ainsi que la proportion hauteur/largeur du dechet qui pose probleme avec le height:XX%;

J'envisagerer plutôt quelque chose comme ceci baser sur l'image du forum:
#dechets
{
	width:10%;
	padding-top:12%;/* prend la la largeur comme reference , voir sur W3C le clacul des marge verticales en % */
	position:relative;
	top:40%;
	left:44%;
	background:url(http://forum.alsacreations.com/upload/50936-dechets.png) ;
	background-position: -0px -0px; 
	background-size:600%; /* pas de contain ou cover qui affichera toute l'image */
}

++
exemple pour jouer avec : http://codepen.io/anon/pen/tfCLh
Modifié par gc-nomade (20 Dec 2013 - 07:23)
D'accord merci beaucoup.
Pourquoi aurais-je besoin du W3C pour calculer ? (je dis ça sans malice hein...)

Merci encore j'essaye au mieux

Edit : il y a superposition, mais avec z-index ça ne fait rien... Smiley ohwell
Je comprends rien au code... Fichtre de fichtre... Quand je change quelque chose ça ne fait pas ce à quoi je m'attends...

Edit bis : Avec le code du site ça va mieux...

Bon après quelques manips, ça va mieux... Mais quand l'écran a une certaine largeur/longueur, il y a superposition... Et je ne sais pas quoi faire... Merci encore
Modifié par Ccile13 (20 Dec 2013 - 12:35)
bonsoir,
désolé de ne pas être plus présent, mon job se passe lon du PC Smiley smile .
Tu as effectivement un problème de superposition car ton image de fond en background-size:contain; (pour garder son ratio) va quoiqu'il arrive , se réduire a la hauteur ou largeur de la page pour rester entièrement visible dans l'espace XY a 100% de la fenêtre que tu imposes.

Je comprend que tu veuilles contenir ton image de fond dans la fenêtre sans avoir a imposé une barre de défilement, mais il te faut alors, soi imposé une hauteur mini, ou forcé l'affichage sur un ratio/proportion identique a ton image pour que les proportion restent inchangé.

Selon les recommandations du W3C (suivies par les navigateurs) , les marges internes ou externes verticales exprimée en % se basent sur la largeur du parent. Ce qui donnent finalement la possibilité de donner une hauteur en fonction d'une largeur et de maintenir un ratio largeur/hauteur qui ne change pas. Cette méthode a ma préférence a celle d'un min-height dont on ne peut hériter et qui ne serait pas fiable pour le deuxième élément à afficher.

Je te propose donc de forcer un ratio d'affichage pour l’élément de fond auquel on donne une largeur et une marge interne vertical.
La largeur héritable , permet de donner une largeur relative a celle du parent et de répéter l’opération de marge interne pour retrouver le ratio nécessaire a l'affichage du sprite (la c'est simple, chaque sprite occupe le même espace 108/120px
Pour le calcul du background-size, on ne s'attache qu'a la premiere valeur (largeur) donc pour un sprite qui occupe 1/20eme de la largeur on donne a l'image un background-size de 500%. (ce qui en cache 400% , 4/20eme).
retest avec tes images du forum et mon point de vue ( sans vouloir l'imposer : ) ) http://codepen.io/anon/pen/CyJEk

une fois le sprite posé, il te suffit de modifier le background-position pour afficher la portion que tu veut, voir les class .lxcxdans l'exemple.

++
Bonjour,

T'en fais pas, on a tous une vie non ? ^^

Merci beaucoup, ça fonctionne parfaitement.
Mais j'ai encore deux questions, la première est peux-tu me donner les "formules" pour pouvoir faire seule les prochaines fois ou au moins m'indiquer où les trouver ?
Ensuite, est-ce préférable de créer plusieurs classes et de les changer dans le code html pour changer l'image ou changer directement le background_position du "dechet" ?

Merci beaucoup encore une fois
Bonsoir,

pour la formule c'est simple, tu divise hauteur par largeur et le resultat te donnera en pourcentage la hauteur par rapport a la largeur
ex : (Hauteur)365px / (Largeur)500px = 0.73 , 365 fait 73% de 500.
Ensuite pour dessiner un rectange vide de 500px X 365px grace au mecanisme de calcul des marges vertical il suffit d'avoir un parent avec la largeur et l'enfant avec une marge vertical interne ou externe de 73% . en changeant la largeur du parent, le ratio est conservé . http://codepen.io/anon/pen/jhngl

Pour les class, c'est toi qui voit ce qui te semble le plus pratique en fonction de tes besoins.
++

<edit> Explication supplementaire sur le calcul du padding top du premier exemple.
Dans le premier exemple , le div qui affiche l'image est redimensionné a moitié de la largeur de la page, il faut donc réduire d'autant la marge vertical qui elle se base sur le parent (body) non réduit en largeur
100/50=2
on divise donc par 2 aussi la valeur du padding vertical , fortuitement ça nous donner 50% et 36.5% prêtant à confusion pour la methode de calcul avec la taille de base de 500x365 Smiley smile

Il s'agit la d'un <div> qui fait 100% de largeur par defaut, pour un element flottant ou une boite en ligne, il aurait lui donner une valeur .

En utilisant un pseudo element , en inline-block ou float , la largeur de référence devient celle de l'element, le pseudo-element etant enfant de son conteneur, et cela, en lui donnant une largeur de zero, permet d'ajouter a coté du contenu dans la boite qui , alors n'as plus besoin d'etre vide Smiley smile , on peut alors , par exemple faire des petit carré ou ronds avec un ou plusieurs caractéres au centre :http://codepen.io/gc-nomade/pen/qJAGr
Modifié par gc-nomade (21 Dec 2013 - 17:49)
Bonjour Ccile13, j'ai aussi rencontré le même problème avec vous, l'image montre une partie de Chi, et puis je régler la taille de la frontière, cela n'a pas fonctionné. En fait, pas tout simplement redimensionner, j'ai aussi besoin de calculer les marges et à l'extérieur de l'intérieur, je me sens bien du mal, mais ici j'ai trouvé un moyen de résoudre le problème, vous remercie de votre question.[&#20195;&#30721;= CSS] [/&#20195;&#30721;]
Sujet clos
Aller à