Insertion d'images en CSS

[Nenex]

Slt

Je bosse sur Dreamweaver et j'ai refait mon site avec du CSS et dernierement j'ai decouvert (faut dire que ca fait pas longtemps que je me suis vraiment penche sur le CSS), donc, j'ai decouvert l'insertion d'image et l'insertion d'images survolees avec le CSS. J'ai donc voulu refaire les liens et les images de deco de ma page d'accueil (page en ligne sans le CSS d'insertion des images).

Maintenant mon probleme. J'ai fait une page index sur laquelle je m'entraine. J'ai inserer 2 boutons, pour l'instant, mais ceux la n'apparaissent pas (dans la page en ligne c'est les boutons Commander et Mes Photos). L'image de decoration qui se trouve a cote du bouton Mes Photos n'apparait qu'en partie.

Voici les codes CSS :

Bouton Commander

a.bouton-commander:link {
	background-image: url(../elements-des-pages/accueil/bouton-commander-01.png);
	background-repeat:no-repeat;
	background-position:center;
}

a.bouton-commander:hover {
	background-image: url(../elements-des-pages/accueil/bouton-commander-02.png);
	cursor:default;
}

Bouton Mes Photos

a.bouton-mes-photos:link {
	width:233px;
	height:54px;
	background-image:  url(../elements-des-pages/accueil/boutons-index/bouton-mes-photos-01.png);
	background-repeat:no-repeat;
	margin: 0px 50px;
}
a.bouton-mes-photos:hover {
	width:233px;
	height:54px;
	background-image:  url(../elements-des-pages/accueil/boutons-index/bouton-mes-photos-02.png);
	cursor: default;
}

Image de decoration

.image-01 {
	background-image: url(../elements-des-pages/accueil/image-01.png);
	background-repeat:no-repeat;
	background-position:80% 100%;
}

Code dans le fichier html :

Code du bouton Commander (insere entre les balises <tr></tr>)

<td width="20%" height="23"><a href="../commander/index-commander.htm" class="bouton-commander"> </a></td>

Code du bouton Mes Photos (insere entre les balises <td></td>)

<a href="http://www.nenex-argazkia.com/coppermine/index.php" class="bouton-mes-photos"> </a>

Code de l'image de deco (insere entre les balises <td></td>, juste sous la precedente)

<div class="image-01"> </div>

Voila, j'espere que j'ai etais clair dans mes explications . J'ai regarde des sites avec des explications a ce sujet et je pensais avoir compris .

Merci d'avance pour votre aide.

[iNCiTE Web]

Salut

Il faut ajouter display:block dans les propriétés des boutons car la balise A n'est pas une balise bloc et donc ne peut pas prendre les dimensions de l'image, que tu dois d'ailleurs indiquer avec width et height.

Tu peux aussi réduire ton code :

.image-01 {
	background-image: url(../elements-des-pages/accueil/image-01.png);
	background-repeat:no-repeat;
	background-position:80% 100%;
}

à remplacer par

.image-01 {
	background: url(../elements-des-pages/accueil/image-01.png) no-repeat 80% 100%;
}

Et comme tes déclarations sont uniques (pour les boutons), utilises ID plutôt que CLASS :

#bouton-commander:link {
	background: url(../elements-des-pages/accueil/bouton-commander-01.png) no-repeat center;
}

et

<a href="http://www.nenex-argazkia.com/coppermine/index.php" id="bouton-mes-photos"> </a>

[Nenex]

Merci pour ta reponse.

Tu peux aussi réduire ton code :

.image-01 {
	background-image: url(../elements-des-pages/accueil/image-01.png);
	background-repeat:no-repeat;
	background-position:80% 100%;
}

à remplacer par

.image-01 {
	background: url(../elements-des-pages/accueil/image-01.png) no-repeat 80% 100%;
}

Je prefere ne pas reduire les codes car pour moi c'est plus clair par ligne. Comme je debute je prefere commencer comme ca. Je verais plus tard quand je commencerais a mieux maitriser le CSS . C'est vrais que ca allege mais j'ai pas enormement de code et mon site n'est pas specialement lourd. C'est pour ca que pour l'instant je prefere faire comme ca.

Et comme tes déclarations sont uniques (pour les boutons), utilises ID plutôt que CLASS :

#bouton-commander:link {
	background: url(../elements-des-pages/accueil/bouton-commander-01.png) no-repeat center;
}

et

<a href="http://www.nenex-argazkia.com/coppermine/index.php" id="bouton-mes-photos"> </a>

Je suis oblige d'utiliser Class car il y en aura d'autres. La il n'y a qu'un seul bouton car c'est pour tester, mais dans ma page definitive il y aura plusieurs boutons.

Salut

Il faut ajouter display:block dans les propriétés des boutons car la balise A n'est pas une balise bloc et donc ne peut pas prendre les dimensions de l'image, que tu dois d'ailleurs indiquer avec width et height.

J'ai rajoute display:block, les images apparaissent, mais j'ai quelque petits soucis :

1)

a.bouton-commander:link {
	background-image: url(../elements-des-pages/accueil/bouton-commander-01.png);
	background-repeat:no-repeat;
	background-position:center;
	display:block;
	width:180px; /* longueur */
	height:27px; /* hauteur */
}

a.bouton-commander:hover {
	background-image: url(../elements-des-pages/accueil/bouton-commander-02.png);
	cursor:default;
	width:180px;
	height:27px;
}

J'ai bien mis cursor:default; mais le curseur ne change pas.

2)

<td width="20%" height="23"><a href="../commander/index-commander.htm" class="bouton-commander"> </a></td>

Dans l'appercu j'ai remarque, a cote du bouton Commander come un petit point. J'ai supprime   et se petit point a disparu. Quand une balise est vide, c'est oblige de mettre   ? me semble avoir vu sur un site (me souviens plus lequel) qu'il valait mieux le faire pour ne pas laisser de balise vide.

3)

a.bouton-mes-photos:link {
	width:233px;
	height:54px;
	background-image:  url(../elements-des-pages/accueil/boutons-index/bouton-mes-photos-01.png);
	background-repeat:no-repeat;
	background-position:50% 50%;
	display:block;
}
a.bouton-mes-photos:hover {
	width:233px;
	height:54px;
	background-image:  url(../elements-des-pages/accueil/boutons-index/bouton-mes-photos-02.png);
	cursor: default;
}

Dans Dreamweaver elle apparait mais pas dans l'apercu.

4)

.image-01 {
	background-image: url(../elements-des-pages/accueil/image-01.png);
	background-repeat:no-repeat;
	display:block;
	width:151px; /* longueur */
	height:102px; /* largeur */
	background-position:80% 100%; /* distance gauche et haut */
}

Par contre, pour deplacer le bouton Commander et l'image de decoration c'est bien background-position ? car je modifie les pourcentages mais l'images et le bouton ne bouge pas .

[iNCiTE Web]

Je suis oblige d'utiliser Class car il y en aura d'autres. La il n'y a qu'un seul bouton car c'est pour tester, mais dans ma page definitive il y aura plusieurs boutons.

Oui et alors, chaque bouton est unique, possède sa propre image, donc il n'est utilisé qu'une fois dans la page (je crois) => ID

J'ai rajoute display:block, les images apparaissent, mais j'ai quelque petits soucis :

1)

a.bouton-commander:link {
	background-image: url(../elements-des-pages/accueil/bouton-commander-01.png);
	background-repeat:no-repeat;
	background-position:center;
	display:block;
	width:180px; /* longueur */
	height:27px; /* hauteur */
}

a.bouton-commander:hover {
	background-image: url(../elements-des-pages/accueil/bouton-commander-02.png);
	cursor:default;
	width:180px;
	height:27px;
}

J'ai bien mis cursor:default; mais le curseur ne change pas.

Ben oui, si tu veux une main, c'est "pointer" par exemple. "default" c'est la flèche classique... (sous Windows en tous cas)

2)

<td width="20%" height="23"><a href="../commander/index-commander.htm" class="bouton-commander"> </a></td>

Dans l'appercu j'ai remarque, a cote du bouton Commander come un petit point. J'ai supprime   et se petit point a disparu. Quand une balise est vide, c'est oblige de mettre   ? me semble avoir vu sur un site (me souviens plus lequel) qu'il valait mieux le faire pour ne pas laisser de balise vide.

C'est l'espace qui est souligné.

Dans la définition du lien dans la CSS, tu peux ajouter text-decoration: none pour le retirer.

3)

a.bouton-mes-photos:link {
	width:233px;
	height:54px;
	background-image:  url(../elements-des-pages/accueil/boutons-index/bouton-mes-photos-01.png);
	background-repeat:no-repeat;
	background-position:50% 50%;
	display:block;
}
a.bouton-mes-photos:hover {
	width:233px;
	height:54px;
	background-image:  url(../elements-des-pages/accueil/boutons-index/bouton-mes-photos-02.png);
	cursor: default;
}

Dans Dreamweaver elle apparait mais pas dans l'apercu.

Bah cette image apparait bien mais en plein milieu (au dessus des poneys), pas dans le menu... normal ?

4)

.image-01 {
	background-image: url(../elements-des-pages/accueil/image-01.png);
	background-repeat:no-repeat;
	display:block;
	width:151px; /* longueur */
	height:102px; /* largeur */
	background-position:80% 100%; /* distance gauche et haut */
}

Par contre, pour deplacer le bouton Commander et l'image de decoration c'est bien background-position ? car je modifie les pourcentages mais l'images et le bouton ne bouge pas .

[Nenex]

Oui et alors, chaque bouton est unique, possède sa propre image, donc il n'est utilisé qu'une fois dans la page (je crois) => ID

ID ne peut etre utilise qu'une seule fois dans un document (site du zero).

J'avais pas fait l'essai sous Internet Explorer 7 (IE). Habituellement j'utilise Firefox 3 (FF). Et je me rend compte que les problemes ne sont la que sous FF :

C'est l'espace qui est souligné.

Dans la définition du lien dans la CSS, tu peux ajouter text-decoration: none pour le retirer.

Ca au moins ca marche....sous IE . Sous FF je peux pas savoir l'image n'apparait pas.

Ben oui, si tu veux une main, c'est "pointer" par exemple. "default" c'est la flèche classique... (sous Windows en tous cas)

Sous IE ca marche, mais pas sous FF. Meme en modifiant l'apparence du curseur ca ne changait pas sous FF. Donc en regardant avec IE ca marche.

Bah cette image apparait bien mais en plein milieu (au dessus des poneys), pas dans le menu... normal ?

Oui c'est normal j'ai mis background-position a 50% 50%. Mais c'est pas definitif car c'etait juste pour voir si elle se deplacait. Par contre sous IE elle n'apparait pas en plein milieu, mais en haut a gauche. Alors que sous FF elle n'apparait pas du tout.

Pour les deplacements c'est bien background-position qu'il faut utiliser ?

[captain_torche]

ID ne peut etre utilise qu'une seule fois dans un document (site du zero).

Ne te méprends pas !

Tu peux utiliser plusieurs IDs dans ta page, tant que ceux-ci sont tous différents !

Un exemple :

<ul id="menu"><li id="element_1">élément 1</li><li id="element_2">élément 2</li></ul>

Ceci est parfaitement valable; bien qu'il y ait trois IDs, ils sont tous différents.

Par contre, un code comme celui-ci n'est pas valable :

<ul id="menu"><li id="element">élément 1</li><li id="element">élément 2</li></ul>

L'id "element" est utilisé deux fois. Dans ce cas, on utilise des classes :

<ul id="menu"><li class="element">élément 1</li><li class="element">élément 2</li></ul>

[iNCiTE Web]

ID ne peut etre utilise qu'une seule fois dans un document (site du zero).

Oui je sais bien, chaque bouton n'apparait qu'une seule fois dans la page, donc tu peux utiliser ID !

Sous IE ca marche, mais pas sous FF. Meme en modifiant l'apparence du curseur ca ne changait pas sous FF. Donc en regardant avec IE ca marche.

C'est cursor:pointer qu'il faut mettre, ça fonctionne pour tous.

Ce qui ne fonctionne QUE sur IE et pas sur FF risque de pas fonctionner non plus sur Opéra, Chrome, Safari etc...

Oui c'est normal j'ai mis background-position a 50% 50%. Mais c'est pas definitif car c'etait juste pour voir si elle se deplacait. Par contre sous IE elle n'apparait pas en plein milieu, mais en haut a gauche. Alors que sous FF elle n'apparait pas du tout.

Pour les deplacements c'est bien background-position qu'il faut utiliser ?

Oui mais ce n'est peut être pas la meilleure méthode. Je ne sais pas ce que tu veux faire exactement.

Ta page à l'air de bien s'afficher non ?

[Nenex]

Ne te méprends pas !

Tu peux utiliser plusieurs IDs dans ta page, tant que ceux-ci sont tous différents !

Un exemple :

<ul id="menu"><li id="element_1">élément 1</li><li id="element_2">élément 2</li></ul>

Ceci est parfaitement valable; bien qu'il y ait trois IDs, ils sont tous différents.

Par contre, un code comme celui-ci n'est pas valable :

<ul id="menu"><li id="element">élément 1</li><li id="element">élément 2</li></ul>

L'id "element" est utilisé deux fois. Dans ce cas, on utilise des classes :

<ul id="menu"><li class="element">élément 1</li><li class="element">élément 2</li></ul>

haaaa ok, j'avais pas compris comme ca. J'avais compris que c'etait ID qu'il ne fallait pas utiliser plusieurs fois. Mais class et ID c'est pratiquemet la meme chose, je peu utiliser l'un ou l'autre non ? (sauf si la aussi j'ai mal compris).

C'est cursor:pointer qu'il faut mettre, ça fonctionne pour tous.

Ce qui ne fonctionne QUE sur IE et pas sur FF risque de pas fonctionner non plus sur Opéra, Chrome, Safari etc...

ca je le sais . Mais je peux pas savoir si ca marche ou pas sous FF, les boutons n'apparaisant pas.

Je viens de voir ca sur zone CSS, que " background css est applicable sur presque toutes les balises HTML ou XHTML, elle est reconnue par tous les navigateurs." mais que " background peut poser des problèmes d'interprétations sous Nestcape, Firefox, Mozilla..". donc ca viendrais peut etre de ca ?

Oui mais ce n'est peut être pas la meilleure méthode. Je ne sais pas ce que tu veux faire exactement.

Ta page à l'air de bien s'afficher non ?

Je voudrais pouvoir deplacer dans les elements qui doivent se trouver dans cette zone, comme sur la page officielle. Sur cette page l'insertion des boutons et images a ete faite avec Dreamweaver. J'ai fait un tableau avec 6 cellules (qui lui se trouve deja dans un autre tableau). Je voudrais utiliser le CSS pour utiliser un tableau en moins. Dans la page que j'utilise pour m'entrainer (et apprendre), j'ai insere 1 seul bouton (Commander) et une seule image (le cheval). Donc c'est normal que dans cette page les autres boutons et images n'apparaissent pas.

Pour le deplacement, comme tu ma dit que c'est pas la meileur methode, j'ai un peu recherche. J'ai vire background-position et j'ai plutot mis

	position:absolute;
	left:30%;
	top:50%;

Et la ca marche sur IE et FF. Sous FF, au moins l'image du cheval, puisque le bouton n'apparait pas.

[iNCiTE Web]

haaaa ok, j'avais pas compris comme ca. J'avais compris que c'etait ID qu'il ne fallait pas utiliser plusieurs fois. Mais class et ID c'est pratiquemet la meme chose, je peu utiliser l'un ou l'autre non ? (sauf si la aussi j'ai mal compris).

Non, ID c'est pour identifier un élément unique, pour lui affecter un style, y accéder (en JS via documentGetElementById) alors que CLASS c'est pour pour affecter un style à un objet. Chaque élément doit être utilisé pour sa fonctionnalité..

Mais je peux pas savoir si ca marche ou pas sous FF, les boutons n'apparaisant pas.

Je viens de voir ca sur zone CSS, que " background css est applicable sur presque toutes les balises HTML ou XHTML, elle est reconnue par tous les navigateurs." mais que " background peut poser des problèmes d'interprétations sous Nestcape, Firefox, Mozilla..". donc ca viendrais peut etre de ca ?

Bah ils ne sont pas le code :

		<td width="20%" height="23"><a href="../commander/index-commander.htm" class="bouton-commander"> </a></td>
		<td width="20%"><div align="center"></div></td>
		<td width="20%"><div align="center"></div></td>
		<td width="20%"><div align="center"></div></td>
		<td width="20%"><div align="center"></div></td>

alors c'est plutôt normal qu'on ne les voit pas. Moi sous FF3, le curseur de change en doigt quand je viens sur "Commander".

Et sur la mauvaise interprétation de background, ça doit dater un peu...

Et la ca marche sur IE et FF. Sous FF, au moins l'image du cheval, puisque le bouton n'apparait pas.

Je te suis plus là, mois je vois un bouton "mes photos" et l'image du cheval.

Utiliser des tables pour faire de la mise en page n'est pas spécialement recommandé... d'ailleurs pourquoi veux-tu absolument utiliser background et pas img ? pour ne pas avoir de JS ?

[Nenex]

Bah ils ne sont pas le code :

		<td width="20%" height="23"><a href="../commander/index-commander.htm" class="bouton-commander"> </a></td>
		<td width="20%"><div align="center"></div></td>
		<td width="20%"><div align="center"></div></td>
		<td width="20%"><div align="center"></div></td>
		<td width="20%"><div align="center"></div></td>

alors c'est plutôt normal qu'on ne les voit pas. Moi sous FF3, le curseur de change en doigt quand je viens sur "Commander".

Dans ma reponse je me suis mal exprime. J'ai dit "...les boutons n'apparaisant pas." et j'aurais du ecrire "..le bouton n'apparaisant pas".Comme je disais dans ma reponse precedente, je ne fait que avec un 2 boutons pour tester : bouton Commander et Mes Photos. Entre temps j'ai carrement supprimer les autres boutons pour que ca soit plus clair aux essais.

La ca commence a me souler, les 2 boutons Commander et Mes Photos n'apparaissent plus. Se matin j'vais reussit a les faire aparaitre. Voici les codes, ca viendrait de la ?

Code CSS du bouton Commander :

a.bouton-commander:link {
	background-image: url(../elements-des-pages/accueil/bouton-commander-01.png);
	background-repeat:no-repeat;
	left:50%;
	display:block;
	text-decoration:none;
	width:180px; /* longueur */
	height:27px; /* hauteur */
}

a.bouton-commander:hover {
	background-image: url(../elements-des-pages/accueil/bouton-commander-02.png);
	cursor:pointer;
	width:180px;
	height:27px;
}

Code CSS du bouton Mes Photos :

a.bouton-mes-photos:link {
	width:233px;
	height:54px;
	background-image:  url(../elements-des-pages/accueil/boutons-index/bouton-mes-photos-01.png);
	background-repeat:no-repeat;
	position:absolute;
	left:25%;
	top:60%;
	display:block;
	text-decoration:none;
}
a.bouton-mes-photos:hover {
	width:233px;
	height:54px;
	background-image:  url(../elements-des-pages/accueil/boutons-index/bouton-mes-photos-02.png);
	cursor:pointer;
}

Code html des 2 boutons :

<td width="20%" height="23"><a href="../commander/index-commander.htm" class="bouton-commander"> </a></td>

<a href="http://www.nenex-argazkia.com/coppermine/index.php" class="bouton-mes-photos"> </a>

[iNCiTE Web]

On tourne en rond là...

Sur cette page j'ai bien un bouton "Commander" avec un rollover dans le menu, et un bouton "mes photos" au milieu de la page... ce qui correspond au code que je vois...

Quand ça fonctionnera, il faudra aussi corriger les erreurs : validateur W3c

[Nenex]

On tourne en rond là...

Sur cette pahe j'ai bien un bouton "Commander" avec un rollover dans le menu, et un bouton "mes photos" au milieu de la page... ce qui correspond au code que je vois...

Quand ça fonctionnera, il faudra aussi corriger les erreurs : validateur W3c

non on ne tourne pas vraiment en rond. C'est surtout que pour le probleme d'affichage des 2 bouton ca n'avance pas. J'ai mis dans un de mes messages que j'avais vue sur le site Zone CSS, que " background css est applicable sur presque toutes les balises HTML ou XHTML, elle est reconnue par tous les navigateurs." mais que " background peut poser des problèmes d'interprétations sous Nestcape, Firefox, Mozilla..". Je ne sais toujours pas si ca peux venir de ca. Et si oui, je ne sias vraiment pas comment faire.

Mais j'ai quand meme avancer car pour le curseur ca amrche et pour moi c'est plus clair et je peux deplacer le boutons Mes Photos et l'image du cheval.

Modifié 11 Décembre 2008 par Nenex

[iNCiTE Web]

Non background ne pose plus de problème... ça doit dater

Le problème est que JE VOIS LE BOUTON COMMANDER, que ce soit avec IE ou FF

[Nenex]

Non background ne pose plus de problème... ça doit dater

Le problème est que JE VOIS LE BOUTON COMMANDER, que ce soit avec IE ou FF

ok, mais moi je ne le vois plus (se matin je le voyais). Je te crois quand tu me dit que tu le vois, mais moi je le vois pas et j'aimerais bien savoir pourquoi, car d'autre ne le verrons pas. Tu vois le boutons Mes Photos ?

[iNCiTE Web]

Tu as quelles versions de FF et IE ?

Le bouton Mes photos était OK ce matin mais il je ne le vois plus : mais dans ta CSS il manque la déclaration ! (il y a juste le :hover)

[Nenex]

Tu as quelles versions de FF et IE ?

Le bouton Mes photos était OK ce matin mais il je ne le vois plus : mais dans ta CSS il manque la déclaration ! (il y a juste le :hover)

J'ai la version 3.0.4 de FF et la version 7 d'IE. La declaration :link est bien presente pourtant.

[iNCiTE Web]

Oui maintenant elle y est... moi je vois le bouton commande : tu as bien vidé tes caches etc ?

[Nenex]

oui j'ai vide le cache, mais c'est pareil. Je comprend pas. Je vais laisser un message sur le site de Geckozone. Ca doit venir de FF. A part me dire, comme toi, de vider le cache, je vois pas d'ou ca pourrais venir, mais bon on sais jamais.

Je te tiens au courant

[iNCiTE Web]

Bah attends tu me dis que tu as la même chose avec IE ?? donc c'est pas gecko

Tu as testé avec Opéra ou Safari par exemple ?

Tu peux aussi retirer toutes extensions ou créer un nouveau profil dans Firefox... essaie d'ajouter le bouton contact pour voir

[Nenex]

Bah attends tu me dis que tu as la même chose avec IE ?? donc c'est pas gecko

Tu as testé avec Opéra ou Safari par exemple ?

j'ai jamais dit que j'avais la meme chose sur IE. C'est justement le contraire, les boutons 2 apparaissent sur IE et pas sur FF. Et c'est que pour les 2 boutons et pas l'image du cheval. J'ai pas essayer avec safari ou opera. Je verais ca demain.

Tu peux aussi retirer toutes extensions ou créer un nouveau profil dans Firefox... essaie d'ajouter le bouton contact pour voir

Je vais inserer les autres boutons et les autres images de decoration pour voir, mais pas se soir j'ai pas trop envie de batailler. quand ca sera fait je viendrais prevenir ici.