26631 sujets

CSS et mise en forme, CSS3

Bonjour,
Je suis chargé, avec des collègues, de la création du site pour notre série. J'ai donc pour cela fait un menu déroulant avec une zone blanche en dessous où l'on mettra le texte.
Le problème est que j'ai fait tout ça en px et, pour que la zone blanche et le menu s'adaptent à l'écran utilisé, j'ai voulu mettre le tout en %. Sauf que le menu ne s'adapte pas à l'écran mais à la zone blanche.

Voici mon code avec les px:

/** Texte **/
#partie1{
	background-color: white;
	padding: 40px 10px;
	width: 850px;
	margin: 1% auto;
	font-family: 'Fira Sans', serif;
	font-size: 1.6em;
}

/** Menu **/

#menu{
	margin: 1% auto;
	width: 960px;
	font-family: 'Montserrat', sans-serif;
	position: sticky;
	top: 0px;
}

#menu li{
	list-style-type: none;
	margin: auto;
	float: left;
	background-color: black;
	padding: 0;
	width: 160px;
}

#menu ul{
	padding: 0;
	margin: 0;
	text-align: center;
}

#menu li a{
	display: block;
	text-decoration: none;
	padding: 10px 5px;
	color: white;
}

#menu li:hover{
	background-color:rgb(15,95,119);
}

#déroulant_univers{
	display: none;
}

#menu ul li:hover ul{
	display: block;
	position: absolute;
}

#menu li:hover ul li{
	float: none;
}

Ce qui donne ceci: upload/1557756128-75626-capture.jpg

Mais une fois que je change les widthen % (j'ai mis celle du texte à 80% et celle du #menu li à 16%), le menu fait des retours à la ligne et le déroulant devient bizarre: upload/1557756145-75626-capture2.jpg

Le html du menu:

		<div id="menu">
				<ul id="liste">
					<li><a href="Accueil.html">Accueil</a></li>
					<li><a href="Série.html">La série</a></li>
					<li id="Univers"><a href="Univers.html">L'univers</a>
						<ul id="déroulant_univers">
							<li><a href="Univers/Truc1.html">Truc 1</a></li>
							<li><a href="Univers/Truc2.html">Truc 2</a></li>
							<li><a href="Univers/Truc3.html">Truc 3</a></li>
						</ul>
					</li>
					<li><a href="Communauté.html">Communauté</a></li>
					<li><a href="Boutique.html">Boutique</a></li>
					<li><a href="Contact.html">Contact</a></li>
				</ul>
		</div>


Donc je me demandais si quelqu'un avait une solution pour que mon menu s'adapte correctement à tout type d'écran. Merci d'avance et bonne journée !
Salut

on retrouve deux axes concernant ton problème
- s'adapter au différents écrans PC
- s'adapter aux mobiles

(en gros Smiley smile )

Du coup, pour les PC oui tu peux jouer avec les pourcentages sur tes <li> sous menu
-> Problème, tu travailles sur des <tags> du coup quand tu fait ceci :
#menu li{
   blabla : blabla;
}

tu cible TOUT les <li> même ceux qui sont dans ton genre de sous menu. il faut que tu travailles sur des .class mieux différencier.

Mais pour les mobiles tu comptes t'y prendre comment ? parce que un menu HORIZONTALE sur module j'ai pas vu. Il faudrait peut être le basculer en mode VERTICAL pour mobile... à voir.
pour cela tu mets
width: 100%;
sur ton tes <li></li>