28172 sujets

CSS et mise en forme, CSS3

Bonsoir,

Je tente de mettre une classe et un id (ou une ?) sur une div mais ça ne fonctionne pas... J'ai cherché sur le net et apparemment, c'est censé fonctionner mais je ne vois pas où est le problème.

Voici le code et les images sont ici : http://forum.alsacreations.com/topic-4-70091-1-Resolu-Nafficher-quune-partie-dune-image-ca-fonctionne-pas.html

<!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' class='banane'>
			</div>
		</div>
		
		<script type="text/javascript" src="tri.js">
		</script>
	</body>
</html>


#fond 
{
	background: url(http://forum.alsacreations.com/upload/50936-poubelles2.png) no-repeat center center;
	width:50%;
	padding-top:36.5%;/* ratio image = (500px X 365px) */
	margin:auto;
	background-size:100%;
	position:relative;
}

#dechets 
{
	position:absolute;
	top:40%;
	left:42%;
	width:10.8%;
	padding-top:12%;/* ratio sprite = 108 X 120 */
	background:url(http://forum.alsacreations.com/upload/50936-dechets.png);
	background-size:520%;
	background-position: 50% 0%  /*pas de 25% en 25% et de 50% en 50%*/
}

.eau
{
	background-position: 0% 0%;
}

.banane
{
	background-position: 25% 0%;
}


Merci d'avance
Hello,

Un identifiant Smiley cligne
J'ai l'habitude d'écrire, et je ne pense pas être le seul, les valeurs d'attribut entre guillemets (id="..." , class="...", style="...", etc...) plutôt qu'entre des apostrophes, a priori, la documentation officielle (sous réserve de vérification et sous couvert de la fatigue Smiley lol ) ne légifère pas clairement sur le choix de l'un ou l'autre ou en tout cas ne les interdit pas...
Quoiqu'il en soit l'usage le plus répandu semble être le guillemet, ce que tu fais par ailleurs pour ton identifiant "fond" juste au dessus...
Fais le test et tiens-nous informé Smiley cligne
Modifié par 6l20 (23 Dec 2013 - 11:52)
Bonjour Smiley biggrin

En fait guillemet ou apostrophe, l'un ou l'autre n'a aucune incidence sur le fonctionnement de ton CSS le tout est de ne pas les mixer pour la même valeur..
Je pense que c'est plus un problème ailleurs...

Si c'est le positionnement de la banane qui pose problème, essaies de mettre !important à la fin de ta ligne css , cela a pour effet de forcer la priorité de la propriété par rapport aux autres.

[#violet].banane[/#]
[#violet]{[/#]
	background-position: 25% 0% [#red]!important;[/#]
[#violet]}[/#]


Tiens nous au courant Smiley cligne
Modérateur
6l20 a écrit :

Un identifiant Smiley cligne
J'ai l'habitude d'écrire, et je ne pense pas être le seul, les valeurs d'attribut entre guillemets (id=&quot;...&quot; , class=&quot;...&quot;, style=&quot;...&quot;, etc...) plutôt qu'entre des apostrophes, a priori, la documentation officielle (sous réserve de vérification et sous couvert de la fatigue Smiley lol ) ne légifère pas clairement sur le choix de l'un ou l'autre ou en tout cas ne les interdit pas...


Pour être rigoureux, il est bien entendu interdit d'utiliser des apostrophes:
upload/32231-apostrophe.png
Par contre, les guillemets doubles ou simples (droits) sont absolument libres, en html ou xhtml. Un peu comme dans beaucoup de langages de programmation…

Pour ton problème, j'ai fait quelque tests, et l'image ne semble pas s'afficher… alors qu'elle devrait. J'ai changé l'adresse de l'image par une autre et là ça s'affiche. Peut-être que ces images ont un problème? qu'elles sont corrompues d'une certaine manière qui pose problème au moteur css…
kustolovic a écrit :


Pour être rigoureux, il est bien entendu interdit d'utiliser des apostrophes:
upload/32231-apostrophe.png
Par contre, les guillemets doubles ou simples (droits) sont absolument libres, en html ou xhtml. Un peu comme dans beaucoup de langages de programmation…


Pour être rigoureux à mon tour: le caractère unicode U+0027 est effectivement une apostrophe et non un guillement simple droit qui ne veut rien dire. Un guillemet double ou simple est effectivement pour les citations donc à ne pas utiliser dans les codes mais il est toujours toujours toujours courbé! un guillemet simple et une apostrophe incurvée sont l'exact même chose (unicode U+0019) contrairement à l'Apostrophe (unicode U+0027) qui est le caractère droit " ' " et que tout utilisateur de clavier azerty retrouve en touche " 4 " en haut, dans un soucis de standard. Pour effectuer une apostrophe de citation ou un guillemet simple, comme tu le montres dans ta magnifique image, il faut donc utiliser les caractères ` et ' le premier étant unicode U+0018 et le deuxième l'unicode U+0019 .
kustolovic a écrit :
Pour être rigoureux, il est bien entendu interdit d'utiliser des apostrophes:
Par contre, les guillemets doubles ou simples (droits) sont absolument libres, en html ou xhtml. Un peu comme dans beaucoup de langages de programmation…

"Single quote", "apostrophe","guillemets simple"... faites votre choix camarades Smiley lol

Pour être rigoureux (après un peu de sommeil) Smiley cligne
Start tag
Attributs
The Syntax, Vocabulary and APIs of HTML5 (Dev)
Donc au delà, des soucis d’appellation, de traduction, d'écart de langage, et autres habitudes personnelles, nous sommes globalement d'accord pour dire : don't care Smiley cligne

Encore une fois, l'usage le plus répandu et l'utilisation du "double quote" (guillemets ou ce que vous voudrez Smiley lol ), de là à en faire une bonne pratique, un standard...

@Ccile13 : ne pointe pas tes images vers le forum alsacreations mais plutôt vers ton serveur de test, ton espace personnel, etc... Smiley cligne
Bonjour,

Ah oui je me disais bien que id était un diminutif mais je savais plus de quoi ^^ Merci.

Alors, au départ j'avais mis " " et pour tester j'ai mis des simples. L'adresse pointée en interne est sur mon ordinateur et ça ne change rien. J'ai testé avec !important et là ça fonctionne, mais comment ça se fait ?

Merci
Modérateur
Au temps pour moi, les images bugguaient sur mes tests parce qu'elles étaient en 403 forbidden. Smiley langue

@Ccile13: Pour en revenir aux moutons. Le problème vient de la priorité des sélecteurs. La déclaration avec un ID a plus de poids qu'une déclaration avec classe et donc c'est cette première qui gagne.

!important permet de passer par dessus les règles de priorités, mais généralement il vaut mieux l'éviter, (hormis à des fins de tests comme ici).

par exemple si tu écris :


#dechet.banane {
	background-position: 25% 0%;
}


cela permettra de passer par-dessus la déclaration dans #dechets de manière propre et simple.

pour mieux comprendre les règles de priorités, un article simple (qui prend ton cas en exemple):
http://jeremie.patonnier.net/post/2009/08/18/La-preseance-des-selecteurs-CSS

Et un article un peu plus avancé:
http://openweb.eu.org/articles/cascade_css

edit: complètement grillé Smiley langue
Modifié par kustolovic (23 Dec 2013 - 21:47)
Merci à tous ^^ Et puis c'est pas grave si quelqu'un a été plus vite que vous, vous pouvez quand même poster non ? ^^

De bonnes fêtes de fin d'année