Discussion :

[jlb59]

Bonjour à tous,

J'ai voulu afficher des flèches dans un menu déroulant en les spécifiant dans le Css que j'avais fait.
CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.fleche-bb{
background-image:url(./css/menu/images/fleche-bb.gif) no-repeat;
border:none;
width:9px;
height:9px;
}

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span class="fleche-bb">&nbsp;</span>

Comme je suis en train de valider en Strict (beaucoup d'erreur), je me suis dit que c'était peut-être une des erreurs possible, parce qu'avant j'affichais l'image directement et je n'avais pas de problème d'affichage.

Par contre maintenant et avec le "<span class...>" y a plus rien.

Aidez-moi SVP parce que là, je me sens un peu paumé ?

Merci d'avance.

[Erwan31]

Bonjour,
je suis pas sure que ta technique soit la plus recommandée.
Pourrais tu donner l'ensemble de ton code?

Les span sont des éléments de niveau inline, ils n'acceptent donc pas les propriétés
de taille. Tu dois donc en faire une boite de bloc via un display:block ou un float:left/right selon le cas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.fleche-bb{
display:block;
background: url(./css/menu/images/fleche-bb.gif);
border:none;
width:9px;
height:9px;
}

Supprimes ton nbsp au passage

[jlb59]

Bonjour,
je suis pas sure que ta technique soit la plus recommandée.
Pourrais tu donner l'ensemble de ton code?

Le reste du code est similaire à ce que j'ai mis dans mon post.

Les span sont des éléments de niveau inline, ils n'acceptent donc pas les propriétés
de taille. Tu dois donc en faire une boite de bloc via un display:block ou un float:left/right selon le cas.

J'ai essayé avec "display:block;" et comme ça n'allait pas j'ai changé par "float...".
Bien que le graphisme ne change pas, il n'y a toujours pas d'affichage d'images.

[Strix]

Salut

Avant toute chose et au vu de la construction de ton site, essaye

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: url(menu/images/fleche-bb.gif);

Car à moins d'utiliser l'url rewriting, c'est juste le chemin de ton image par rapport à ton CSS qui est incorrect

[jlb59]

Salut

Avant toute chose et au vu de la construction de ton site, essaye

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: url(menu/images/fleche-bb.gif);

Car à moins d'utiliser l'url rewriting, c'est juste le chemin de ton image par rapport à ton CSS qui est incorrect

Non Strix, comme mon site est simple, ça va pas marcher comme ça !

PS : c'est quoi url rewriting ?

[Candygirl]

Les span sont des éléments de niveau inline, ils n'acceptent donc pas les propriétés
de taille. Tu dois donc en faire une boite de bloc via un display:block ou un float:left/right selon le cas.

+1

Autrement il y aun erreur classique dans le code que tu as posté ci-dessus:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-image:url(./css/menu/images/fleche-bb.gif) no-repeat;

Tu utilises la propriété background-image qui n'accepte qu'un seul paramètre, l'url de l'image. En ajoutant la valeur pour le background-repeat, tu rends ton css invalide et probablement non interprèté par bien des navigateurs. SI tu veux renseigner les deux, tu dois utiliser la propriété raccourcie background:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background:url(./css/menu/images/fleche-bb.gif) no-repeat;

[jlb59]

+1

Autrement il y aun erreur classique dans le code que tu as posté ci-dessus:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-image:url(./css/menu/images/fleche-bb.gif) no-repeat;

Tu utilises la propriété background-image qui n'accepte qu'un seul paramètre, l'url de l'image. En ajoutant la valeur pour le background-repeat, tu rends ton css invalide et probablement non interprèté par bien des navigateurs. SI tu veux renseigner les deux, tu dois utiliser la propriété raccourcie background:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

background:url(./css/menu/images/fleche-bb.gif) no-repeat;

C'est bien noté Candygirl et te remercie beaucoup de cette info.

++

[corrector]

Les span sont des éléments de niveau inline, ils n'acceptent donc pas les propriétés
de taille. Tu dois donc en faire une boite de bloc via un display:block

Est-ce que tous navigateurs permettent ça (changer le display d'un élément)? Est-ce que le résultat est prévisible?

Pourquoi ne pas utiliser div tout simplement?

[jlb59]

Est-ce que tous navigateurs permettent ça (changer le display d'un élément)? Est-ce que le résultat est prévisible?

Pourquoi ne pas utiliser div tout simplement?

Ben ! comme le principe fontionne pour afficher des flags après le lien, je me suis dis qu'il serait bien de faire la même chose pour ce menu déroulant dynamique. mais...

Avant, je faisais comme tu dis, et ça marchais très bien, les flèches étaient bien positionnées, maintenant, c'est une autre paire de manches !!!!.

[Erwan31]

Est-ce que tous navigateurs permettent ça (changer le display d'un élément)? Est-ce que le résultat est prévisible?

Pourquoi ne pas utiliser div tout simplement?

Bonjour,
on fait appel au display par exemple quand un élément ne peut être imbriqué
dans un autre (un div dans un a par exemple) dans ce cas il vaut mieux
passer par un span et le faire se comporter comme un élément de rendu bloc.

Le display d'un élément est prédéfini dans la feuille de style du navigateur
(Firefox, Safari...) ou via son moteur de rendu interne (IE, Opera). Ce sont
les styles UA (User Agent: navigateurs, lecteur d'écran...) par default que
l'auteur du document ou l'utilisateur peut très bien décider de modifier si
besoin. Les reset CSS par exemple de l'auteur permettent justement d'annuler certains
styles par default, ben là c'est la même chose mais au niveau du display.

Le résultat obtenu est bien plus prévisible que s'il y a des erreurs d'imbrication comme cité plus haut.

[jlb59]

Bonjour,
on fait appel au display par exemple quand un élément ne peut être imbriqué
dans un autre (un div dans un a par exemple) dans ce cas il vaut mieux
passer par un span et le faire se comporter comme un élément de rendu bloc.

Le display d'un élément est prédéfini dans la feuille de style du navigateur
(Firefox, Safari...) ou via son moteur de rendu interne (IE, Opera). Ce sont
les styles UA (User Agent: navigateurs, lecteur d'écran...) par default que
l'auteur du document ou l'utilisateur peut très bien décider de modifier si
besoin. Les reset CSS par exemple de l'auteur permettent justement d'annuler certains
styles par default, ben là c'est la même chose mais au niveau du display.

Le résultat obtenu est bien plus prévisible que s'il y a des erreurs d'imbrication comme cité plus haut.

Hou ! T'a l'air compliqué...
Je me doute que pour toi c'est clair, mais là, j'ai du mal à percuter !...

[Erwan31]

Hou ! T'a l'air compliqué...
Je me doute que pour toi c'est clair, mais là, j'ai du mal à percuter !...

Désolé si c'est pas assez clair, je me rends pas trop compte.
Qu'est ce que tu comprends pas?

[corrector]

Le résultat obtenu est bien plus prévisible que s'il y a des erreurs d'imbrication comme cité plus haut.

Ah OK, je ne suggérais pas d'utiliser un div là où il n'est pas permis, ni d'écrire du HTML non valide.

Je n'avais pas vu à quel niveau du document l'élément span dont on parle était utilisé (pas vu d'exemple de HTML dans la discussion).