Bonjour à tous,

Je vous contact aujourd'hui en raison d'un petit problème sur ma liste déroulante :)

En effet, je n'arrive pas à étendre celle-ci avec un width = 100%;

Pourriez-vous m'aider ?

Merci beaucoup !

PS: voici les codes :)

xHTML :

<!DOCTYPE html>
<html>
<head>
	<title>Chamaello</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="menu.js"></script>	
</head>
<body>
	<div id="en-tete">
		<form action='connection.php' method="post">
			<label for="Identifiant_ou_@">Nom d'utilisateur : </label>
			<input type="text" name="Identifiant" id="Identifiant" required="required" placeholder="Codeurdu51">
			<label for="mot_de_passe">Mot de passe : </label>
			<input type="password" name="mot_de_passe" id='mot_de_passe' required="required">

			<input id='bouton_connection' type="submit" value="Se connecter">

		</form>

		<a href="Inscrition/inscriptionForm.html" id='inscription'>S'incrire</a>
	</div>

	<div id='logo'>
		<img src="images/logo.png" alt="logo">
	</div>


	<div id="test">
		<?php include ("includes/onglets.php"); ?>
	</div>
	
</body>
</html>

INCLUDES :

<ul id="menu">

		<li>
				<a href="#">Site Web</a>
				<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
						<li><a href="#">SQL</a></li>
						<li><a href="#">PHP</a></li>
						<li><a href="#">JAVA</a></li>
				</ul>
		</li>


		<li>
				<a href="#">Jeux Vidéos</a>
				<ul>
						<li><a href="#">LUA/LOVE2D</a></li>
						<li><a href="#">C#</a></li>
						<li><a href="#">C++</a></li>
						<li><a href="#">UNITY</a></li>
						<li><a href="#">UNREAL</a></li>
						<li><a href="#">JAVASCRIPT</a></li>
				</ul>
		</li>


		<li>
				<a href="#">Capture The FLag</a>
				<ul>
						<li><a href="#">STEGANOGRAPHIE</a></li>
						<li><a href="#">HTML-WEB</a></li>
						<li><a href="#">HTML-CLIENT</a></li>
						<li><a href="#">CRPYTO</a></li>
				</ul>
		</li>


		<li>
				<a href="#">Objet</a>
				<ul>
					<li><a href="#">PYTHON</a></li>
				</ul>
		</li>

		<li>
				<a href="#">Forum</a>
		</li>

		<li>
				<a href="#">Contact</a>
		</li>

</ul>

CSS :

*
{
	margin:0;
	font-family: verdana;
}

img
{
	margin-left: 35%;
}
#en-tete
{
	background-color: black;
	text-align: center;
	color: white;
	font-size: 16px;
	display: flex;
	justify-content: space-around;
	height: 30px;
	align-items: center;
}

#logo
{
	border-bottom: 2px solid #3b3b3b;
}
#bouton_connection
{
	border-radius: 5px;
	font-weight: bold;
	background-color: white;
	color: black;
}
#inscription 
{
	border-radius: 2px;
	background-color: white;
	color: black;
	font-size: 12px;
	margin-bottom: 2px;
	font-weight: bold;
	padding-top: 2px;
	width: 150px;
}
#test
{
	width: 100%;
	background-color: orange;
}

#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */

}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau  */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
}

#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}


#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

JAVA :

sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Fox Aera

11 février 2018 à 16:18:04

mootookoi

11 février 2018 à 16:32:57

Il faut rajouter

#menu li {width: 100%;}
#menu a {width:100%;}

Le #menu prend bien toute la largeur, mais ce sont les li et les a à l'intérieur qui ne prenaient pas tous l'espace.

Dev Web Full Stack ( si si c'est possible )

11 février 2018 à 16:53:21

Ah bah non, je voudrai que tout soit sur une seule ligne justement :)

Merci de ta réponse quand même

Si tu veux comprendre, tu peux aller sur mon site : https://chamaello.com

-
Edité par Fox Aera 11 février 2018 à 16:54:56

ChrisLebure

11 février 2018 à 17:00:34

Bonjour,

pour avoir les <li> sur une seule ligne, une des solutions est de passer <ul> en flex,
ou encore de passer les <li> en inline-block, dans le temps on passait les <li> en float;

ou encore : ne pas utiliser <ul> et <li>, mettre seulement des balise <a> côte à côte... si les <a> sont en inline-block, on peut fixer la même largeur pour tous les items

mais dans tous les cas, gaffe pour les petites largeurs de viewport, l'usage est alors de repasser en <ul> standard masquée avec un menu "hamburger" qui affiche/masque la liste au clic ou au survol

(je n'ai pas regardé tes codes)

11 février 2018 à 17:10:12

J'ai oublié de mentionner qu'il fallait passer #menu en display: flex;

Dsl ^

Et comme le dit ChrisLebure, il faut adapter tout ça aux petites résolutions avec des media queries par exemple.

-
Edité par mootookoi 11 février 2018 à 17:15:38

11 février 2018 à 17:13:55

AH oui ! j'y avais pensé olala la boulette XD Meci beaucoup !

FiranaNiu

12 février 2018 à 0:53:39

Bonjour Mathieu,

Je me souviens que tu m'avais bien aide pour un sujet.

Je suis en train de faire le devoir "mettre son CV en forme", avec HTML et CSS (semaine 3) j'ai un probleme de liseret, et <header> qui disparait et devient un <footer> si je place the liseret entre "body" et "header"...:(total nightmare.

Desole de squatter ta question, mais je me souviens que ton explication etait super claire.:)

Bref, je suis totalement perdue.

Peux-tu m'aider?

Merci.

12 février 2018 à 18:11:01

Oui biensur, pourrais tu me contacter par email à mathieu.penaud99@gmail.com ?

Je t'aiderai sans problème car il me faut ton code et que ce n'est pas le lieu exact pour le faire :)

A très vite !

12 février 2018 à 18:52:19

Bonsoir Mathieu,

J'ai reussi, enfin je crois...ce fut laborieux.:(

Je vais t'ecrire comme cela on sera en contacte

Merci mille fois.

xoxo

Forums des Zéros

Problème de largeur

Avec une liste déroulante CSS HTML & JAVA

xHTML :

INCLUDES :

CSS :

JAVA :

Problème de largeur

Problème de largeur

Avec une liste déroulante CSS HTML & JAVA

xHTML :

INCLUDES :

CSS :

JAVA :

Problème de largeur

Supprimer

Modérer

Signaler le message aux modérateurs