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 :

[HTML] Comment faire ce genre de Menu ?


Sujet :

HTML

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut [HTML] Comment faire ce genre de Menu ?
    Salut à tous,
    Après quelques mois en standby, grace à votre aide, j'ai créé un site web il y a de celà plusieurs mois.
    Je reviens une fois de plus sur votre forum afin d'obtenir des informations.
    En effet je voudrai savoir comment réaliser ce genre de MENU.
    1- En fait, un Menu qui au passage de la souris affiche toutes les rubriques du sous-Menu.
    2- Un Menu estéthiquement joli, très bien encadré avec des bords arrondis.
    3- Un Menu avec des couleurs personnalisées.
    4- Un Menu horizontal.
    Merci à Tous !

    Ah, oui je voudrai savoir si c'est du javascript, ou et comment pourrai je trouver un modèle de code permettant de réaliser exactement ce joli MENU, très bien encadré et arrondi ?

    Merci !

    PS : J'ai oublié de vous donné l'adresse du modèle de Menu que je veux faire exactement : ICI le modèle de menu que je veux faire

  2. #2
    Membre chevronné Avatar de Strix
    Inscrit en
    Novembre 2006
    Messages
    632
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 632
    Par défaut
    Salut.

    T'as essayé une recherche Google avec Menu et CSS ?

    Tu vas voir, c'est sympa

    Après tu peux tenter un recherche menu déroulant sur le forum...
    Ces 2 recherches résolvent les points 1 et 4
    Avec bords arrondis dans la partie CSS ou HTML, le point 2 est résolu.

    Qu'entends-tu par "Un Menu avec des couleurs personnalisées." ?

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Ben en fait quand je parle de Menu , avec des couleurs personnalisées, je veux dire par là, que le menu aura une apparence avec des couleurs que j'aurai choisi moi.
    Sinon, je entrain d'étudier le code CSS du MENU, c'est assez chaud.
    Il y a certaines choses que je ne comprends pas. Ici le code

    Comment faire pour voir à quoi correspond les images des liens se trouvant dans le code que le webmaster a établi ?
    Par exemple, ces adresses suivantes sont dans le code, mais je ne sais pas comment voir le fichier png.
    Liens se trouvant dans le code résultant d'une image :
    //s8.s-sfr.fr/css/img/nav-top/menu_sub_menu_right.png
    //s5.s-sfr.fr/css/img/nav-top/menu_right_hover.png
    Quand je rajoute çà dans ma barre d'adresse, çà donne alors :
    http://www.sfr.fr//..._menu_right.png
    Et même en enlevant un slash devant le lien, çà fonctionne pas, impossible de voir l'image :
    http://www.sfr.fr/s..._menu_right.png

    Merci !

  4. #4
    Membre chevronné Avatar de Strix
    Inscrit en
    Novembre 2006
    Messages
    632
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 632
    Par défaut
    Alors je prends ton message à l'envers

    Le lien est celui-ci : http://s5.s-sfr.fr/css/img/nav-top/menu_right_hover.png

    Avant de t'attaquer au code CSS de SFR, jette un œil ici (sans Javascript).

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Ok merci, mais c'est vraiment pas simple ses codes à ce web master !!!
    Je vais encore me creuser la tête environ 4 semaines !

  6. #6
    Membre chevronné Avatar de Strix
    Inscrit en
    Novembre 2006
    Messages
    632
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 632
    Par défaut
    Citation Envoyé par °°° Zen-Spirit °°°
    mais c'est vraiment pas simple ses codes à ce web master !!!
    Lesquels de codes ?

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Citation Envoyé par Strix
    Lesquels de codes ?
    Je parles du code CSS correspondant au MENU du site SFR :
    Ici le code
    C'est assez lourd à comprendre et à analyser.

  8. #8
    Membre chevronné Avatar de Strix
    Inscrit en
    Novembre 2006
    Messages
    632
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 632
    Par défaut
    Citation Envoyé par °°° Zen-Spirit °°°
    Je parles du code CSS correspondant au MENU du site SFR :
    Ici le code
    C'est assez lourd à comprendre et à analyser.
    C'est bien pour ça que je t'ai donné 2 liens qui sont la base des menus déroulants !

  9. #9
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Salut tout le monde !
    1- J'ai un petit soucis à comprendre un code Css par rapport à son fichier HTML.
    En fait sur ce site, entre les rubriques du Menu, il y a des petites barres qui les sépares, mais en regardant le code HTML et le code CSS, je ne vois pas comment le webmaster définie ces petites barres afin qu'elles apparaissent.
    Pouvez vous m'aidez à comprendre et à trouver dans ce code ce qui fait que ces petites barres apparaissent :

    Code HTML :
    <ul id="navigation">
    <li id="navhome"><a href="/">Accueil</a></li>
    <li id="nav1"><a href="/articles">Tous les articles</a></li>
    <li id="nav2"><a href="/ressources">Ressources</a></li>
    <li id="nav3"><a href="/colophon">À propos du site</a></li>
    <li id="nav4"><a href="/contact">Contact</a></li>
    </ul>

    Code CSS :


    /* ------------------------------------------
    /* Navigation
    /* ------------------------------------------
    */
    #navigation {
    width: 700px;
    height: 25px;
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    list-style: none;
    background: #FFF url(/pompage_v3/nav.gif) no-repeat;
    }

    #navigation li {
    height: 25px;
    margin: 0;
    padding: 0;
    float: left;
    text-indent: -9000px;
    }

    #navigation a {
    display: block;
    height: 100%;
    }

    #navigation li a:link, #navigation li a:visited {
    color: #FFF;
    text-decoration: none;
    font-variant: small-caps;
    font-weight: bold;
    }
    #navhome {
    width: 80px;
    background: url(/pompage_v3/nav_home.gif) no-repeat;
    }
    #nav1 {
    width: 142px;
    background: url(/pompage_v3/nav_articles.gif) no-repeat;
    }
    #nav2 {
    width: 101px;
    background: url(/pompage_v3/nav_ressources.gif) no-repeat;
    }
    #nav3 {
    width: 85px;
    background: url(/pompage_v3/nav_aprop.gif) no-repeat;
    }
    #nav4 {
    width: 78px;
    background: url(/pompage_v3/nav_contact.gif) no-repeat;
    }
    2- D'autres par rapport à ce même site, le webmaster a mis dans son code HTML, au début ceci :


    <div id="header">
    <h1>Pompage</h1>
    </div> <!-- fin #header -->
    Mais à aucun moment je ne vois le titre Pompage en texte !!!
    Le gros titre pompage qu'il y a sur le site en haut à droite est une image !

    Merci de m'aider à comprendre, car çà me bloque dans ma progression.

  10. #10
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Aussi, sur ce site là : Cours CSS
    Dans la partie du cours sur Display : je n'arrive pas à avoir le mêe résulatat que le webmaster à mis comme résultat final :

    Donc voici ce que je mets dans mon code HTML :
    <!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <title>essai3</title>
    <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1"/>
    <meta name="Description" content="blabla">
    <link rel="stylesheet" media="screen" type="text/css" title="essai3.css" href="essai3.css" />
    <link rel="shortcut icon" href="favicon.ico" >

    </head> <!–– Fin de la balise Head ––>



    <body> <!–– Début de la balise Body ––>

    <div id="display">
    <p>
    <a href="http://www.w3.org/">Le site du W3C</a>
    <a href="http://www.w3.org/TR/CSS21/">Recommandations CSS2</a>
    <a href="http://www.w3.org/Style/CSS/current-work#CSS3">Recommandations CSS3</a>
    </p>
    <hr />
    <ul>
    <li><a href="http://www.w3.org/">Le site du W3C</a></li>
    <li><a href="http://www.w3.org/TR/CSS21/">Recommandations CSS2</a></li>
    <li><a href="http://www.w3.org/Style/CSS/current-work#CSS3">Recommandations CSS3</a></li>
    </ul>
    </div>

    </body>

    </html>
    Et dans mon code CSS :
    #display p.block a {
    display:block;
    width:180px;
    border:1px solid #E8E8E8;
    padding:3px 10px;
    background-color: #DCDCDC;
    }
    #display li {
    display:inline;
    background:url(nav.png) no-repeat 0 50%;
    padding-left:10px;
    }
    Merci !

  11. #11
    Modérateur
    Avatar de blueice
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2003
    Messages
    3 494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2003
    Messages : 3 494
    Par défaut
    En fait sur ce site, entre les rubriques du Menu, il y a des petites barres qui les sépares, mais en regardant le code HTML et le code CSS, je ne vois pas comment le webmaster définie ces petites barres afin qu'elles apparaissent.


    Mais à aucun moment je ne vois le titre Pompage en texte !!!
    Le gros titre pompage qu'il y a sur le site en haut à droite est une image !

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    #home h1 {
    	width: 216px;
    	height: 145px;
    	margin: 0 0 0 481px;
    	padding: 0px;
    	background: url(/pompage_v3/pompage.gif) no-repeat bottom;
    	text-indent: -9000px;
    }
    Dans la partie du cours sur Display : je n'arrive pas à avoir le mêe résulatat que le webmaster à mis comme résultat final :
    Sois plus clair

  12. #12
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Salut tout le monde !
    Merci d'avoi répondu Blueice.
    Citation Envoyé par blueice
    Sois plus clair
    1- En fait ce que je veux dire, c'est que par rapport au cours que le webmaster donne sur l'utilisation de "DISPLAY", et il donne un exemple concernant le résultat final, quand on utilise exactement les codes qu'il donne dans son cours ( résultat qui se trouve au dessus du code ).
    Sauf que j'ai mis exactement sur ma page HTML et dans mon code CSS les mêmes codes que lui, mais je n'ai pas le même résultat que son exempàle à lui.
    Je vous remets ici le lien de son cours CSS sur DISPLAY

    2- Concernant le
    <div id="header">
    <h1>Pompage</h1>
    </div> <!-- fin #header -->
    Je ne comprends pas ce que tu veux dire, car j'ai revérifié, mais c'est bien une image, et non un titre concernant le texte où c'est écrit "POMPAGE" sur son site.
    Mais à aucun moment je ne vois le titre Pompage en texte, concernant son code où c'est écrit h1 !!!

    Merci !

  13. #13
    Modérateur
    Avatar de blueice
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2003
    Messages
    3 494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2003
    Messages : 3 494
    Par défaut
    Je ne comprends pas ce que tu veux dire, car j'ai revérifié, mais c'est bien une image, et non un titre concernant le texte où c'est écrit "POMPAGE" sur son site.
    C'est bien une image, mais pour rendre la chose accessible, ils ont rajouté le texte, de sorte que si l'image n'apparait le texte vient à la place.

    Pour ton histoire pas envie de chercher le pourquoi du comment, fais ton propre menu, je te donne un exemple :
    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
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Untitled</title>
        <style type="text/css" title="text/css">
    /* <![CDATA[ */
     
    * { margin:0; padding:0; }
    body { background: #f0e7d7; }
    ul#navlist
    {
    text-align:left;
    list-style:none;
    width: 20%;
    }
     
    ul#navlist li
    {
    display: block;
    }
     
    ul#navlist li a
    {
    display: block;
    width: 100%;
    padding: 0.5em 0 0.5em 2em;
    border-width: 1px;
    border-color: #ffe #aaab9c #ccc #fff;
    border-style: solid;
    color: #777;
    text-decoration: none;
    background: #f7f2ea;
    }
     
    ul#navlist li a { width: auto; }
     
    ul#navlist li#active a
    {
    background: #f0e7d7;
    color: #800000;
    }
     
    ul#navlist li a:hover, ul#navlist li#active a:hover
    {
    color: #800000;
    background: transparent;
    border-color: #aaab9c #fff #fff #ccc;
    }
    /* ]]> */
    </style>
    </head>
    <body>
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    </ul>
    </body>
    </html>

  14. #14
    Membre Expert
    Avatar de kaiser59
    Homme Profil pro
    Inscrit en
    Novembre 2005
    Messages
    1 264
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Novembre 2005
    Messages : 1 264
    Par défaut
    Salut,

    Tu devrais trouver ton bonheur dedans :
    http://css.maxdesign.com.au/listamatic/

  15. #15
    Membre émérite Avatar de FraK
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2005
    Messages
    828
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2005
    Messages : 828
    Par défaut
    tu peux aussi télécharger un .exe qui construira ton menu tel que tu le souhaites vraiment niveau design
    si tu n'es pas à l'aise avec le code, c'est une tres bonne option
    DHTML Menu Builder
    Infographiste / Webdesigner / Intégrateur (un peu Développeur aussi si on peut dire ;p)
    On me trouve souvent dans la partie Hardware, Systèmes et Logiciels ou encore Webmasters - Développement Web et surtout dans le forum Wordpress.
    »» Mon Blog Musical (drumnbass)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [HTML] comment faire un lien sur un bouton en HTML
    Par info_plus dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 05/07/2007, 14h53
  2. Quelqu'un sait comment faire ce genre de popup
    Par Fabouney dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 25/04/2007, 18h56
  3. [HTML] Comment faire une arborescence en html
    Par jehlg dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 07/02/2006, 23h55
  4. [HTML] Comment faire pour mettre de la musique sur un site
    Par Gray Man dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 11/12/2005, 18h13
  5. Comment faire une Barre de Menu?
    Par gamerome dans le forum OpenGL
    Réponses: 5
    Dernier message: 18/02/2005, 14h46

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