Création d'un menu deroulant et positionnement des divs. [Résolu]

Signaler
-
 Juval -
Bonjour,

En étant debutant dans le CSS, j'ai des problèmes avec les paramètres de ma feuille de styl, j'ai essayé de créer un menu déroulant (lorsqu'on passe la souris dessus il y a une liste d'onglet qui s'affiche) en CSS en suivant les tutos que j'ai trouvé sur internet mais en vain.

J'aimerai savoir s'il y a un problème au niveau de mon code CSS :

body {
 margin:0px;
 padding: 0px; 
}
nav {
 width:100%;
 background-color:#797979;
 top: 0px;
}
nav > ul::after {
 content: "";
 display: table;
 clear: both;

}

nav > ul {
 margin:0px;
 padding:0px;
}

nav > ul > li {
 float:left;
 position: relative;
}

nav li{ 
 list-style-type:none;
}

.subnew {
 display:none;
}

.subinfo {
 display:none;
}

div#footer { 
 text-align: center;
 background-color: #7fffbb;
 height: 60px;
 display: block;
 clear: both;
}

nav a{
 display: inline-block;
 text-decoration: none;
}

nav > ul > li > a {
 padding:20px 30px;
 color: #FFF;
}

nav li:hover .subnew{
 display: inline-block;
 position: absolute;
 top: 100%;
 padding: 0px;
 left:0px;
 z-index: 1000;
}

.subnew li {
 border-bottom: 1px solid #CCC;
}

.subnew li a {
 padding: 15px 30px;
 font-size: 13px;
 color: #7fffbb;
 width: 270px;
}


Le code HTML :
<html>
 <head>
  <title>Accueil</title>
  <link rel="stylesheet" type="text/css" href="style/style1.css" />
  <!--<script type="text/javascript" src="js/deroulant.js"></script>-->
 </head>
 <body>
  <nav>
   <ul>
     <li class="index"><a href="index.html">Accueil</a></li>
     
    <li class="new"><a href="news.html">Actualité</a></li>
      <ul class="subnew">
       <li href="">Association </li>
       <li href="">Activité</li> 
      </ul>
        
    <li class="info"><a href="info.html">Information</a></li>
      <ul class="subinfo">
       <li href="">Association</li>
       <li href="">Activité</li>
      </ul>
    
        <li class="orga"><a href="orga.html">Organisation</a></li>
     <li class="time"><a href="time.html">Calendrier</a></li>
     <li class="other"><a href="other.html">Autre </a></li>
     <li class="contact"><a href="contact.html">Contact</a></li>
   </ul>
 
  </nav>
 </body>
</html>




Et aussi, un autre problème celui du positionnement des "blocs", par exemple dans mon site j'ai mis un footer comme exemple mais je n'arrive pas à le placer correctement tout en bas de ma page web.


Merci.

2 réponses

Salut,
il n'y a rien dans votre CSS qui fait un menu déroulant.
Par contre il y a de fortes chances que le menu déroulant vienne du script JavaScript:
<!--<script type="text/javascript" src="js/deroulant.js"></script>-->

Celui étant en commentaire il ne sera pas utilisé.

Vous pouvez très bien faire un menu déroulant en pur CSS(sans JavaScript) il faut utiliser hover (pseudo classe pour le survol d'un élément)pour faire apparaître les éléments de menus(préalablement masqués) et les positionner en liste à côté hors ce n'est pas le cas ici.
Le JavaScript peut modifier le contenu HTML et le CSS que l'on veut lors d'un événement(comme le passage de la souris au dessus d'un élément ou la sortie de la souris de la zone) c'est donc un peu plus souple et performant.

Quelques exemples qui vous aideront en pur CSS donc sans passer par de la programmation(ce qu'il vaut mieux faire quand on est au top déjà en HTML et CSS car JavaScript permet avant tout de manipuler/modifier/ajouter/supprimer les éléments HTML et les règles CSS):
https://www.qwant.com/?q=menu+d%C3%A9roulant+en+CSS


Pour un élément en bas de page comme le footer dont vous parlez il suffit de le mettre à la suite en dernier dans le HTML. Bien sûr si vous avez des règles de positionnement comme "absolute" vous sortez du flot(enchaînement normal des éléments par ordre et imbricaiton) les éléments concernés donc il faudra en tenir compte. Il vaut mieux donc éviter sauf si c'est nécessaire.
Par exemple:

 position: absolute;
 top: 100%;

Indique une position absolue placée à 100% du sommet de la page, il sera donc toujours hors de la page puisque il n'y a rien au delà de 100% de la hauteur de la page.
Si d'autres éléments sont placés aussi en absolu à la suite(à 100% ou plus) ceux ci non plus ne seront pas visible.
Je suppose que dans l'exemple que vous avez utilisé ceci est changé par le JavaScript pour qu'il apparaissent dans la page lorsque l'on survole les menus. C'est une manière de planquer la liste déroulante et la faire apparaître quand c'est nécessaire en modifiant ce positionnement et le mettant par exemple à 0 du sommet au lieu de 100%.

Donc soit vous continuez sur l'exemple que vus avez utilisé et vous utilisez le JavaScript(correctement écrit et agissant sur ce qui est nécessaire bien sûr) ou vous passez à un menu déroulant CSS uniquement(voir lien vers exemples).

Voilà j'espère être clair, plus que recopiez le code CSS, HTML ou JS vous devez avant tout le comprendre ;)
Bonjour,

Je vous remercie de votre réponse et aussi du petit cours que vous m'aviez donné x).

Pour la partie menu deroulant :
Alors j'ai compris mon code, et aussi que les "sites" du lien que vous m'aviez envoyé correspondent à mon code que j'ai fait (un peu pres), mais le problème que j'ai là c'est que je n'arrive pas à afficher le "menu deroulant" avec hover.

Je me suis inspiré de la methode de ce site :
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

Mais en vain.

Je ne comprends pas pourquoi ç& ne marche pas. Peut etre un problème de navigateur?

body {
	margin:0px;
	padding: 0px; 
}
nav {
	width:100%;
	background-color:#797979;
	top: 0px;
	
}

nav > ul {
	margin:0px;
	height: 50px;
	position: relative;	
	text-align: center;
}

nav > ul > li {
	float:left;
	position: relative;
    left: auto;
	right: auto;
	margin-left: 6%;
	list-style-type:none;
}
.subnew {
	display:none;
}

.subinfo {
	display:none;
}
div#footer { 
	text-align: center;
	background-color: lightgrey;
	height: 30px;
	display: block;
	clear:both;
}

nav > ul > li > a {
	padding:20px 30px;
	color: #FFF;
	display: inline-block;
	text-decoration: none;
}

.onglet li a:hover {
 color:#FFD700;
 }


nav li a:hover{
	display: inline-block;
	position: absolute;
	top: 100%;
	padding: 0px;
	left:0px;
	z-index: 1000;
}



Merci
Yo,
allez plutôt voir mes liens, celui dont vous parlez est assez ancien(surtout quand on voit qu'il parle de IE 7 alors qu'IE n'existe plus).
S'inspirer sert à rien dans une technologie.
Soit vous vous contentez de faire le perroquet et faites tout à l'identique soit vous passez par l'apprentissage et apprenez le principe et vous pourrez faire ce que vous voulez ;)

Sur le site mamouthland on peut lire ceci:
"Dans un premier temps, on transforme donc cette liste à puces verticale en une liste horizontale. Je ne reviens pas sur les détails, le principe a déjà été expliqué dans le tuto menu horizontal. Ici chaque item "

Le diable et dans les détails, et la technologie informatique nécessite une rigueur impeccable, sinon simplement rien du tout ne fonctionne comme le résultat souhaité.

Je vous conseille plutôt de commencer par les bases de CSS si vous débutez avant d'attaquer des exemples plus élaborés.

Bon travail
> Yourt
Bonjour,

Le problème c'est que je connais les bases du CSS. Et que je comprends comment cela fonctionne, j'effectue des tests après de "copier" le code et etc..
Mais là, c'est quelque chose que je ne comprends pas même après avoir copié le code.

Par ailleurs, je ne suis pas vraiment adepte des autres langages autre que le linux du coup, c'est tout nouveau pour moi.


Merci
Yo,
Linux un langage? ça m'étonnerais ça.

Si vous connaissez le CSS vous arriverez très bien à faire ça.
Comme j'ai déjà dit c'est plus permissif et efficace avec JavaScript.
Donc soit vous galérez à comprendre le principe mais coller un code sans le comprendre et espérer que ça fasse ce qu'on veut dans un autre contexte me paraît pas une façon cohérente.

En pur CSS je vous ait mis des exemples, je reprends le principe qui si vous connaissez CSS ne vous posera pas de mal:

_On crée les éléments HTML des menus.
_Il faut ensuite les cacher ou les masquer(ce qui est d'ailleurs une mauvaise chose en général pour le référencement aussi bien que l'accessibilité qui repose sur le même principe: les éléments ne doivent pas être caché ni inaccessible)
_Ensuite on crée des zone cliquables comme un div invisible qui indique d'afficher les éléments masqués/cachés
_Idem pour faire disparaître les éléments

Où est le problème , si vous avez les connaissances en CSS c'est pas super simple mais pas non plus très complexe à faire...et clairement pas la peine de suivre un tuto pour ça, la doc du CSS suffit.

JavaScript permet beaucoup mieux parce qu'il permet d'ajouter ou enlever un élément de la page, de changer un contenu ou son CSS et de détecter et "répondre" à un événement(la souris sur un élément, un clic etc...).

Dans votre premier exemple vous dites que ça ne marche pas alors qu'il utilise JavaScript.
Comme il n'y a pas le script ça paraît normal.

Je vous ait donné plusieurs exemples en pur CSS si c'est ce que vous voulez en vous avertissant que c'était un peu plus bancal.
Donc soit vous suivez ces exemples soit vous rajoutez le script correct si vous utilisez JS...

Rien d'autre à dire, comme vous ne semblez pas faire ce qu'il faut (ou comprendre que c'est votre façon de voir qu'il faut changer ?) je ne sais pas ce que vous attendez.


Un autre exemple si les 3 (plus celui avec JS) ne vous suffisent pas, il est un peu différent mais aussi plus simple à comprendre...encore faut il rester humble et pas décider que l'on sait tout et avons rien à apprendre ;)

https://www.synbioz.com/blog/tech/menu-accordeon-css