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 :

Faire un menu via des images


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Webmaster - Développeur/intégrateur web
    Inscrit en
    Septembre 2011
    Messages
    210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : Webmaster - Développeur/intégrateur web
    Secteur : Conseil

    Informations forums :
    Inscription : Septembre 2011
    Messages : 210
    Par défaut Faire un menu via des images
    Bonjour à tous !!

    Voilà j'ai un problème qui concerne à la fois le HTML et le CSS, je me suis lancé dans un truc que je pensais être tout con mais qui me donne du fil à retordre...

    J'ai fait les textes des liens de mon menu principal sous photoshop pour qu'ils ait de beaux effets...
    il faut donc que je créer mon menu en mettant les images exportées en tant que liens...

    Jusque là tout va bien mais j'aimerai que l'image change au survol, j'ai donc décidé de passer par le CSS est la propriété "background", j'ai créer 3 type d'images : les images transparentes (en PNG) qui serviront pour la partie HTML, les images pour les liens inactif, et les images pour les liens actifs et survolés... que j'utilise dans le CSS pour la partie background.

    Voici mon code HTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <html>
    <div id="hmenu">
     
    <ul class="hmenu">
    <li class="hmenu"><a id="hmenu-accueil" href="#" title="Accueil"><img src="hmenu/hmenu-transparent_accueil.png" /></a></li>
    <li class="hmenu"><a id="hmenu-presentation" href="#" title="Presentation"><img src="hmenu/hmenu-transparent_presentation.png" /></a></li>
    <li class="hmenu"><a id="hmenu-contact" href="#" title="Contact"><img src="hmenu/hmenu-transparent_contact.png" /></a></li>
    </ul>
    </div>
    </html>
    et mon code CSS :
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
     
    <style type="text/css">
    ul.hmenu
    {
            display:inline;
    }
    li.hmenu
    {
            display:inline;
            list-style:none;
            padding:0;
            margin:0;
    }
     
    a#hmenu-accueil:link, a#hmenu-accueil:visited
    {
            background:url('hmenu/hmenu_accueil.png') no-repeat scroll 0 0 transparent;
            padding:0;
            margin:0;
    }
    a#hmenu-accueil:hover, a#hmenu-accueil:active
    {
            background:url('hmenu/hmenu-activehover_accueil.png') no-repeat scroll 0 0 transparent;
            padding:0;
            margin:0;
    }
     
    a#hmenu-presentation:link, a#hmenu-presentation:visited
    {
            background:url('hmenu/hmenu_presentation.png') no-repeat scroll 0 0 transparent;
            padding:0;
            margin:0;
    }
    a#hmenu-presentation:hover, a#hmenu-presentation:active
    {
            background:url('hmenu/hmenu-activehover_presentation.png') no-repeat scroll 0 0 transparent;
            padding:0;
            margin:0;
    }
     
    a#hmenu-contact:link, a#hmenu-contact:visited
    {
            background:url('hmenu/hmenu_contact.png') no-repeat scroll 0 0 transparent;
            padding:0;
            margin:0;
    }
    a#hmenu-contact:hover, a#hmenu-contact:active
    {
            background:url('hmenu/hmenu-activehover_contact.png') no-repeat scroll 0 0 transparent;
            padding:0;
            margin:0;
    }
    </style>
    Le problème que j'ai c'est qu'aucun background ne s'affiche... ni à l'état inactif du lien ... ni à l'état actif. Les images de background sont pourtant bien chargées par le navigateur.

    Je ne vois pas de solution...

    merci pour votre aide,

    MICKAEL

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    - où sont les balises <head>? <body> ?
    - ton CSS est bien appelé dans la page ?
    - les chemins des images sont-ils les bons ? (dans le CSS = chemin entre le fichier CSS et le dossier des images)
    - ... ?

    PS : mettre la même class sur <ul> et sur <li> n'est pas une bonne idée.
    <ul class="hmenu">
    <li class="hmenu">

  3. #3
    Invité
    Invité(e)
    Par défaut
    1/ Quelques modification du code html :
    - mets les identifiants sur les <li> (et pas sur les <a>)

    - une seule image transparente est suffisante : vide.png (1px x 1px)

    - mets des alt="..." sur les images (texte alternatif, si l'image vide n'est pas trouvée
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <ul id="ulhmenu">
    	<li class="hmenu" id="hmenu-accueil"><a href="#" title="Accueil"><img src="hmenu/image-vide.png" alt="Accueil"/></a></li>
    	<li class="hmenu" id="hmenu-presentation"><a href="#" title="Presentation"><img src="hmenu/image-vide.png" alt="Presentation" /></a></li>
    	<li class="hmenu" id="hmenu-contact"><a href="#" title="Contact"><img src="hmenu/image-vide.png" alt="Contact" /></a></li>
    </ul>
    2/ code CSS :
    - li.hmenu : display:inline-block; + définir les dimensions

    - les id étant sur les <li>, enlever les a#hmenu-accueil -> #hmenu-accueil (ou li#hmenu-accueil si tu préfères, mais c'est la même chose)

    - indiquer les dimensions pour chaque image
    (image-vide.png, qui ne fait que 1x1 px, doit être dimensionné pour faire la taille des images en background) :
    #hmenu-accueil a img { width:...px; height:...px; }

  4. #4
    Membre éprouvé
    Homme Profil pro
    Webmaster - Développeur/intégrateur web
    Inscrit en
    Septembre 2011
    Messages
    210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : Webmaster - Développeur/intégrateur web
    Secteur : Conseil

    Informations forums :
    Inscription : Septembre 2011
    Messages : 210
    Par défaut
    Merci pour ta réponse Jerome,

    J'ai attribué les ID au <li> en appliquant tes corrections et j'ai attribué une classe "hmenu" au image, avec un paramètre "max-height" et "max-width",
    grâce à ces manipulations je peux désormais voir les images d'arrière-plan.

    Malheureusement ceci n’arrange pas mon affaire car les arrières plan sont attribués au <li> et donc il ne varie pas lorsque l'ont survole avec la sourie ou que le lien est actif...

    Alors comment faire pour faire la même chose avec les liens ??
    Sachant que j'ai réessayer en attribuant les ID les images transparentes continu de superposer les arrières-plans, malgré que la taille de celle-ci soit bien paramétrée...

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    => peux-tu montrer TON CODE ?

    Pour changer l'image au survol, c'est (plus ou moins) comme tu avais fait :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    li#hmenu-accueil
    {
    	background:url('hmenu/hmenu_accueil.png') 0 0 no-repeat;
    }
    li#hmenu-accueil:hover
    {
    	background:url('hmenu/hmenuhover_accueil.png') 0 0 no-repeat;
    }

  6. #6
    Membre éprouvé
    Homme Profil pro
    Webmaster - Développeur/intégrateur web
    Inscrit en
    Septembre 2011
    Messages
    210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Jura (Franche Comté)

    Informations professionnelles :
    Activité : Webmaster - Développeur/intégrateur web
    Secteur : Conseil

    Informations forums :
    Inscription : Septembre 2011
    Messages : 210
    Par défaut
    re,

    Bon c'est bon j'ai pu faire ce que je voulais, en fait j'ai pu attribué mes images de fond à mes liens en leurs mettant un inline-block à eux aussi, ce qui me permis de leurs donner une hauteur minimum afin que l'image de fond soit visible (a priori le problème venait de là...)

    Je vous donne le code :

    HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <div id="hmenu">
     
    <ul class="hmenu">
    <li  class="hmenu" id="hmenu-accueil"><a class="hmenu" id="hmenu-accueil"  href="index.php" title="Accueil"><img class="hmenu" id="hmenu_transparent_accueil" alt="accueil" src="hmenu/hmenu_transparent_accueil.png" /></a></li>
    <li  class="hmenu"  id="hmenu-presentation" ><a class="hmenu" id="hmenu-presentation" href="presentation.php" title="Presentation"><img class="hmenu" id="hmenu_transparent_presentation" alt="presentation" src="hmenu/hmenu_transparent_presentation.png" /></a></li>
    <li  class="hmenu" id="hmenu-contact" ><a  class="hmenu" id="hmenu-contact" href="contact.php" title="Contact"><img class="hmenu" alt="contact" id="hmenu_transparent_contact" src="hmenu/hmenu_transparent_contact.png" /></a></li>
    </ul>
     
    </div>
    CSS
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
     
    /* # Gestion de la Liste # */
    ul.hmenu
    {
    	display:inline-block;
    }
    li.hmenu
    {
    	list-style:none;
    	padding:0;
    	margin:0;
    	display:inline-block;
    }
     
    ul.hmenu
    {
    	display:inline;
    }
    li.hmenu
    {
    	list-style:none;
    	padding:0;
    	margin:0;
    	display:inline-block;
    	min-height:52px;
    }
     
     
    /* # Gestion des Liens # */
    a.hmenu
    {
    	display:inline-block;
    	height:52px;
    }
     
    a#hmenu-accueil:link, a#hmenu-accueil:visited
    {
    	background:url('hmenu/hmenu_accueil.png') no-repeat scroll 0 0 transparent;
    	padding:0;
    	margin:0;
    }
    a#hmenu-accueil:hover, a#hmenu-accueil:active
    {
    	background:url('hmenu/hmenu_activehover_accueil.png') no-repeat scroll 0 0 transparent;
    	padding:0;
    	margin:0;
    }
    a#hmenu-presentation:link 
    {
    	background:url('hmenu/hmenu_presentation.png') no-repeat scroll 0 0 transparent;
    	padding:0;
    	margin:0;
    }
    a#hmenu-presentation:hover, a#hmenu-presentation:active
    {
    	background:url('hmenu/hmenu_activehover_presentation.png') no-repeat scroll 0 0 transparent;
    	padding:0;
    	margin:0;
    }
    a#hmenu-contact:link, a#hmenu-contact:visited
    {
    	background:url('hmenu/hmenu_contact.png') no-repeat scroll 0 0 transparent;
    	padding:0;
    	margin:0;
    }
    a#hmenu-contact:hover, a#hmenu-contact:active
    {
    	background:url('hmenu/hmenu_activehover_contact.png') no-repeat scroll 0 0 transparent;
    	padding:0;
    	margin:0;
    }
     
    /* # Gestion des Images # */
    img.hmenu
    {
    	min-height:52px;
    }
     
    img#hmenu_transparent_accueil
    {
    	width: 120px;
    }
    img#hmenu_transparent_presentation
    {
    	width: 200px;
    }
    img#hmenu_transparent_contact
    {
    	width: 130px;
    }
    Voilà il me reste juste un problème, l'état "actif" des liens n'est pas pris en compte... je vais essayer de trouver mon erreur, si vous la voyez merci de me le dire...

Discussions similaires

  1. message d'alerte via des images
    Par nrdz83 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 06/06/2008, 13h32
  2. Réponses: 0
    Dernier message: 11/12/2007, 17h50
  3. ActionScript faire une transition entre des images
    Par Alexandrebox dans le forum Flash
    Réponses: 2
    Dernier message: 20/05/2007, 18h48
  4. Problème de création de bord de cadre via des images
    Par bilou95 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 10/04/2007, 11h19
  5. Réponses: 5
    Dernier message: 26/08/2006, 12h14

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