IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Affichage d'une image à la place des puces


Sujet :

CSS

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Points : 11
    Points
    11
    Par défaut Affichage d'une image à la place des puces
    Bonjour à tous,

    Je voulais remplacer les traditionnelles puces de listes et mettant à la place une autre image.

    Je pense savoir le faire, mais y a rien qui s'affiche.

    Le code ci-dessous est un exemple de ce que je voudrais faire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     
    <style type="txt/css">
    #content ul li{
     list-style: circle;
     list-style-image: url(fleche.gif);
     list-style-position: outside;}
    </style>
     
    </head>
     
    <body>
     
    <div id="content">
     
    <ul>
    	<li>Accueil</li>
    		<ul>
    			<li>Historique</li>
    			<li>Contact</li>
    				<ul>
    					<li>Contact avec le Webmaster</li>
    					<li>Forum</li>
    					<li>Livre d'or</li>
    				</ul>
    		</ul>
    </ul>
     
    </div>
     
    </body>
    </html>
    S'il y a une erreur, franchement je ne vois pas où ???

    Si vous pouviez m'aider en m'apportant vos lumières !

    Merci d'avance.

    Cordialement, QI9859

  2. #2
    Membre émérite
    Avatar de Nesmontou
    Homme Profil pro
    Architecte logiciel
    Inscrit en
    Septembre 2004
    Messages
    1 612
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Architecte logiciel
    Secteur : Finance

    Informations forums :
    Inscription : Septembre 2004
    Messages : 1 612
    Points : 2 969
    Points
    2 969
    Par défaut
    Salut, il ne faudrait pas remplacer
    par
    ?
    Le style s'applique sur la balise ul et non sur li.

    Bon développement

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Points : 11
    Points
    11
    Par défaut
    Citation Envoyé par Nesmontou
    Salut, il ne faudrait pas remplacer
    par
    ?
    Le style s'applique sur la balise ul et non sur li.

    Bon développement
    Non, j'avais déjà essayé comme ça.

    En fait, c'est le <li>...</li> qui supporte la puce !

  4. #4
    Membre actif
    Inscrit en
    Novembre 2006
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 206
    Points : 231
    Points
    231
    Par défaut
    Il manque un doctype, une parenthèse fermante pour #content ul li, un contrôle des margins (marge à gauche suffisante) et paddings.
    La meilleure solution c'est peut-être de mettre l'image en background pour li.

  5. #5
    Membre à l'essai
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Points : 11
    Points
    11
    Par défaut
    Citation Envoyé par Dan_A
    Il manque un doctype, une parenthèse fermante pour #content ul li, un contrôle des margins (marge à gauche suffisante) et paddings.
    La meilleure solution c'est peut-être de mettre l'image en background pour li.
    Non toutes le () ou {} sont en place, et en ce qui concerne margin et padding, ici, ça n'a aucune importance puisque ce n'est pas un essai de mise en page.

    Le prb est tout autre parce que quand je mets directement dans une balise <li style="list-style-image:url(./images/fleche.gif)">....</li>, c'est OK.

    Donc, à mon avis cela vient de <style type="txt/css">....</style>, mais où et comment !!!!
    Je ne vois rien du tout.

  6. #6
    Membre averti
    Homme Profil pro
    Consultant ERP
    Inscrit en
    Mai 2006
    Messages
    257
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Consultant ERP
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2006
    Messages : 257
    Points : 318
    Points
    318
    Par défaut
    Il faut que tu vérifie est ce que l'image fleche.gif se trouve bien dans le mêmedossier que la feuille de style, si non tu entre son adresse complète ok.
    Il faut que tu met list-style-image:url(image/fleche.gif); le problême vient de là.
    et pour list-style-image... c le bon code

  7. #7
    Membre à l'essai
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Points : 11
    Points
    11
    Par défaut
    Citation Envoyé par othmane126
    Il faut que tu vérifie est ce que l'image fleche.gif se trouve bien dans le mêmedossier que la feuille de style, si non tu entre son adresse complète ok.
    Il faut que tu met list-style-image:url(image/fleche.gif); le problême vient de là.
    et pour list-style-image... c le bon code
    C'est fait tout ça !

    J'y comprends de - en -

  8. #8
    Membre averti
    Homme Profil pro
    Consultant ERP
    Inscrit en
    Mai 2006
    Messages
    257
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Consultant ERP
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2006
    Messages : 257
    Points : 318
    Points
    318
    Par défaut
    Dans le code que tu as mis tout à l'heure tu as mis
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <style type="txt/css">
    #content ul li{
     list-style: circle;
     list-style-image: url(fleche.gif);
     list-style-position: outside;}
    </style>
     
    </head>
    Il faut que tu mets
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <style type="txt/css">
    #content ul li{
     list-style: circle;
     list-style-image: url(image/fleche.gif);
     list-style-position: outside;}
    </style>
     
    </head>

  9. #9
    Membre à l'essai
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Points : 11
    Points
    11
    Par défaut
    Citation Envoyé par othmane126
    Dans le code que tu as mis tout à l'heure tu as mis
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <style type="txt/css">
    #content ul li{
     list-style: circle;
     list-style-image: url(fleche.gif);
     list-style-position: outside;}
    </style>
     
    </head>
    Il faut que tu mets
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <style type="txt/css">
    #content ul li{
     list-style: circle;
     list-style-image: url(image/fleche.gif);
     list-style-position: outside;}
    </style>
     
    </head>
    Si j'ai changé le chemin de l'image, c'est parce que ça n'allait pas avec le rép. images, donc j'ai essayé sans le répertoire.
    Ca ne va toujours pas bien que l'image existe à la racine et dans le répertoire.

    Et en plus, le "list-style" et le "list-style-position" ne sont d'aucune utilité; enfin je pense...

  10. #10
    Membre averti
    Homme Profil pro
    Consultant ERP
    Inscrit en
    Mai 2006
    Messages
    257
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Consultant ERP
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2006
    Messages : 257
    Points : 318
    Points
    318
    Par défaut
    Essai ce code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <style type="txt/css">
    li.taclasse{
     list-style: circle;
     list-style-image: url(fleche.gif);
     list-style-position: outside;}
    </style>
    ou
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <style type="txt/css">
    ul.taclasse{
     list-style: circle;
     list-style-image: url(fleche.gif);
     list-style-position: outside;}
    </style>
    Et tu ajoute dans tes listes
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul class="taclasse">ldjlksdjlq</ul>
    Ou
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <li class="taclasse">ldjlksdjlq</ul>
    Les deux marches bien

  11. #11
    Membre à l'essai
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Points : 11
    Points
    11
    Par défaut
    Citation Envoyé par othmane126
    Essai ce code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <style type="txt/css">
    li.taclasse{
     list-style: circle;
     list-style-image: url(fleche.gif);
     list-style-position: outside;}
    </style>
    ou
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <style type="txt/css">
    ul.taclasse{
     list-style: circle;
     list-style-image: url(fleche.gif);
     list-style-position: outside;}
    </style>
    Et tu ajoute dans tes listes
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul class="taclasse">ldjlksdjlq</ul>
    Ou
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <li class="taclasse">ldjlksdjlq</ul>
    Les deux marches bien
    Non ça marche pas.
    Pour infos dans les codes, à ma connaissance, si limitée soit-elle, un <UL> et toujours accompagné d'un <LI> et ce dernier qui contient les puces.

  12. #12
    Membre averti
    Homme Profil pro
    Consultant ERP
    Inscrit en
    Mai 2006
    Messages
    257
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Consultant ERP
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2006
    Messages : 257
    Points : 318
    Points
    318
    Par défaut
    Oui ja sais c par ce que j'ai fais du copier coller quand j'écrivais le message.
    En tout cas pour le code que je t'ai donné il marche très bien chez moi. Bonne chance

  13. #13
    Membre à l'essai
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 19
    Points : 11
    Points
    11
    Par défaut
    Citation Envoyé par othmane126
    Oui ja sais c par ce que j'ai fais du copier coller quand j'écrivais le message.
    En tout cas pour le code que je t'ai donné il marche très bien chez moi. Bonne chance
    OK ! mais chez moi ça marche pas. Je vais désactiver le firewall et vider le cache, on verra bien.

  14. #14
    Membre émérite
    Avatar de Nesmontou
    Homme Profil pro
    Architecte logiciel
    Inscrit en
    Septembre 2004
    Messages
    1 612
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Architecte logiciel
    Secteur : Finance

    Informations forums :
    Inscription : Septembre 2004
    Messages : 1 612
    Points : 2 969
    Points
    2 969
    Par défaut
    Argh, je viens de voir l'erreur !!!

    Tu as écrit
    alors qu'il faut écrire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <style type="text/css">
    Tu as oublié le e de text/css

    Bon développement

    PS : ça marche aussi avec #content ul {

Discussions similaires

  1. Réponses: 6
    Dernier message: 08/04/2013, 14h18
  2. bug affichage d'une image à la place d'une autre
    Par cilies38 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 22/04/2012, 09h37
  3. Réponses: 1
    Dernier message: 15/06/2008, 12h32
  4. Réponses: 3
    Dernier message: 26/05/2008, 21h31
  5. Réponses: 7
    Dernier message: 17/05/2007, 17h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo