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

HTML Discussion :

placer une petit image devant chaque lien


Sujet :

HTML

  1. #1
    HwRZxLc4
    Invité(e)
    Par défaut placer une petit image devant chaque lien
    Bonjour,

    J'aimerais savoir comment on fais pour placer une image différente devant chaque lien de menu en les alignent verticalement au textde manière a les avoir centré.

    j'ai cherché du coté des puves en css, le problème est que chasue image est différente, donc problème

    du coté de html, la fonction middle ne me centre pas trop bien le text.

    Voila, je vous remercie de votre aide.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 819
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 819
    Points : 64 726
    Points
    64 726
    Billets dans le blog
    1
    Par défaut
    reagrde du coté des li avec list-style ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    juillet 2005
    Messages
    1 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2005
    Messages : 1 221
    Points : 472
    Points
    472
    Par défaut
    il y a absmiddle aussi. De toutes façon ces histoires de centrage, ça rend fou, comment tu fais en cas de changement de taille de police et tout ? Même si elle est encore centrée, l'image est toute petite par rapport au texte c'est ridicule.

    Plus c'est léger, sans fioriture, meilleurs c'est je crois.
    C'est pas parce que j'ai tort que vous avez raison.

  4. #4
    HwRZxLc4
    Invité(e)
    Par défaut
    enfait, mon idée c'est comme sur ce site la, le menu catégorie

    http://www.crystalxp.net/galerie/fr.cat.3.htm

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 819
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 819
    Points : 64 726
    Points
    64 726
    Billets dans le blog
    1
    Par défaut
    Bingo ...
    je gagne quoi ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <ul>
    					<li><a href='/fr.htm'>Accueil</a></li>
    					<li><a href='http://forum.crystalxp.net'>Forum</a></li>
    					<li><a href='/bricopack/fr.htm'>BricoPacks</a></li>
     
    					<li><a href='/galerie/fr.htm'>Galerie</a></li>
    					<li><a href='/tuto/fr.htm'>Tutoriaux</a></li>
    					<li><a href='http://tux.crystalxp.net/'>Tux Factory</a></li>
    					<li><a href='http://mascot.crystalxp.net/'>Mascot Factory</a></li>
    					<li></li>
     
     
     
    			</ul>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  6. #6
    HwRZxLc4
    Invité(e)
    Par défaut
    tu t'es trompé de menu, je parle de celui a gauche sur la millieux de la page

    il ne me rèste plus qu'a savoir comment mètre une image différente...

  7. #7
    Membre habitué
    Inscrit en
    mai 2006
    Messages
    200
    Détails du profil
    Informations personnelles :
    Âge : 35

    Informations forums :
    Inscription : mai 2006
    Messages : 200
    Points : 199
    Points
    199
    Par défaut
    Pour faire ce menu tu vas devoir faire une classe par l'igne ou alors enlever la puce (list-style-type:none dans le css) et mettre une image <img src="chemin de l'image"/> juste avant le texte :


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <ul>
         <li><img src="chemin de l'image1"/><a href="#">lien1</a></li>
         <li><img src="chemin de l'image2"/><a href="#">lien2</a></li>
    </ul>
    Avec un bout de code ou une URL on vous aide plus facilement

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 819
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 819
    Points : 64 726
    Points
    64 726
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    ul {
    	list-style-image: url('....');
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  9. #9
    HwRZxLc4
    Invité(e)
    Par défaut
    ok, mais il ne risque pas d'y avoir de conflic avec le mème procédé pour chaque image ?

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 819
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 819
    Points : 64 726
    Points
    64 726
    Billets dans le blog
    1
    Par défaut
    un peu d'magination que diable !!!

    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
    <style type='text/css'>
    #li1 {
    	list-style-image:url('snow.gif')
    }
    #li2 {
    	list-style-image:url('snow1.gif')
    }
    </style>
    </head>
     
    <body>
    <ul>
    <li id="li1">coucou</li>
    <li id="li2">coucou</li>
    </ul>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    HwRZxLc4
    Invité(e)
    Par défaut
    Yééé sa c'est une réponce en béton.....

    Un mega tres grand merci

Discussions similaires

  1. Placer une div image en absolute responsive
    Par Independant44 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 20/11/2013, 20h12
  2. preload avec une petite image d'attente
    Par sooprano dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 08/02/2011, 11h00
  3. Combobox avec une image devant chaque ligne
    Par vexal dans le forum Composants VCL
    Réponses: 7
    Dernier message: 09/02/2008, 12h22
  4. Comment ajouter une petite image dans un Trichedit.
    Par Ardely dans le forum Delphi
    Réponses: 30
    Dernier message: 23/03/2007, 16h57

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