Menu html

aquaculteur -  
notobe Messages postés 2222 Statut Membre -
Bonjour,

je commence a m'amuser avec le html, mais je n'ai pas encore trouver la façon pour me faire ce type de menu comme celui-la

http://www.passionbassin.com/

je parle du menu a la windows , tu glisses ta souris a une place et tu vois rapidement les sous menus ainsi de suites.

Je demande donc votre aide pour essayer de réaliser sa

Eric
Configuration: Windows XP
Firefox 3.5.5

9 réponses

  1. Pilow Messages postés 410 Statut Membre 71
     
    Bonjour

    Pour ça il faut que tu regarde du coté du CSS
    Je ne sais pas si tu as commencé à l'utiliser ou pas
    0
  2. Aquaculteur
     
    salut

    malheureusement, je ne sais pas encore comment travailler avec ce code la.

    est-ce qui a un site site simple comme celui de comment ca marche au niveau du Html, étape par étape, mais pour le css

    Bonne journé
    0
  3. arthezius Messages postés 3756 Statut Membre 475
     
    Oui tu peux commencer par regarder sur le Site du zero.
    0
  4. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  5. globbersthemes
     
    <!--voici un menu deroulant en vertical que tu peux texter-->

    div id="menu">
    <ul class="niveau1">
    <li><a href="menu 1">menu 1</a></li>
    <li class="sousmenu"><a href="menu 2">menu 2</a>
    <ul class="niveau2">
    <li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
    <li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
    </ul>
    </li>
    <li><a href="menu 3">menu 3</a></li>
    <li class="sousmenu"><a href="menu 4">menu 4</a>
    <ul class="niveau2">
    <li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>
    <ul class="niveau3">
    <li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
    <li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
    <li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
    </ul>
    </li>
    <li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
    </ul>
    </li>
    <li><a href="menu 5">menu 5</a></li>
    </ul>
    </div>

    <!--le css-->
    width: 100px;
    }

    div#menu ul {
    padding: 0;
    width: 100px;
    border:1px solid;
    margin:0px;
    }

    div#menu ul li {
    position:relative;
    list-style: none;
    border-bottom:1px solid;
    }

    div#menu ul ul {
    position: absolute;
    top: 0;
    left: 100px;
    }

    div#menu ul ul {
    position: absolute;
    top: 0;
    left: 100px;
    display:none
    }

    div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
    div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
    display:block;
    }

    div#menu li a {
    text-decoration: none;
    }

    globbers, http://www.globbersthemes.com
    0
  6. Aquaculteur
     
    salut

    je travaille sur sa depuis 2-3 heures, et je viens de comprendre quelque choses, que je ne comprend pas depuis un certain temps

    sa prend un fichier Html

    et un fichier css on dirait
    celon se site la

    https://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/

    Est-ce que je me trompe

    Est-ce qui est possible de juste avoir un document avec le Html et le Css.
    Surement, mais comment il se réalise,

    0
    1. notobe Messages postés 2222 Statut Membre 213
       
      Si tu en es à te demander comment insérer un code CSS, même la page que tu indiques est déjà un peu trop complexe... (même si elle est très bien) Enfin, disons que tu mets la charrue avant les bœufs.

      Et je ne parle même pas d'un menu déroulant : là tu grilles carrément les étapes !

      Donc, pour débuter en CSS :
      https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3#part_13663 (qui t'a déjà été suggéré)
      http://css.mammouthland.net/
      0
  7. Ozimandias Messages postés 528 Statut Membre 46
     
    Le css peut s'ajouter dans la page HTML avec les balises style, ça donne un truc du genre : (a placer dans le head)

    <style type="text/css">
    <!--

    body {
    ......
    ......
    ......
    .......
    .......
    }
    -->

    </style>
    0