Création d'un menu deroulant et positionnement des divs.Résolu/Fermé

Question

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.

Juval · Answer

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 ;)

Asgard · Answer

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

Création d'un menu deroulant et positionnement des divs.

2 réponses

Discussions similaires

Newsletters