Bonjour, je suis entrain de faire un site avec un menu de navigation vertical et non Horizontal comme j'ai l'habiture de faire, j'ai réussi correctement a mettre le background etc... mais je n'arrive pas a adapter la hauteur de l'ecran (le site devras etre visible sur grands ecrans (TV, Ordinateurs) comme petits (smartphone, tablettes...)

Voici le code HTML:

<link rel="stylesheet" type="text/css" href="style/nav.css">


<nav>
	<span><a href="../">Back</a></span>

	<ul>
		<li><a href="index.php">Dashboard</a></li>
		<li><a href="index.php?page=lampe_leds">Lampe &#38; LEDs</a></li>
		<li><a href="index.php?page=speech">Reconaissance Vocale</a></li>
		<li><a href="index.php?page=console">Console</a></li>
	</ul>
</nav>

Voici le CSS:

/*General*/
nav{
	font-family: Arial, Sans-Serif;
	margin: 0;

	/*La position*/
	float: left;
}

/*Boutton retour*/
nav span{
	float: left;
	margin: 2px; 
}
nav span a{
	color: white;
	text-decoration: none;
}
nav span a:hover{
	text-decoration: underline;
}


/*Le menu*/
nav ul{
	display: block;
	list-style-type: none;
	box-shadow: 2px 3px 4px black;
	margin: 0;
	padding: 0 2px;/*J'ai deja essayer de mettre 100% en hauteur*/
	background: rgb(51,55,58);
	width: 200px;
        /*J'ai aussi déjà essayer de mettre une height: 100%
        Et aussi essayer de mettre ul dans une div poue essayer d'etendre la div*/
 }
nav li{
	text-align: center;
	margin-bottom: 20px;
}
nav li a{
	color: white;
	text-decoration: none;
	font-size: 25px;
}
nav li a:hover{
	font-weight: bold;
	text-shadow: 2px 3px 4px black;
}

Voici le rendu :

Voici le rendu que je souhaite obtenir:

Merci d'avance

-
Edité par Eloi BERLINGER 21 avril 2017 à 14:08:15

Utilise l'unité de mesure "vh"

Salut,

https://www.emmanuelbeziat.com/blog/colonne-verticale-sur-toute-la-hauteur-de-page 

EloiOfficiel a écrit:

jeanbarquedelabak a écrit:

Utilise l'unité de mesure "vh"

Ca ne change rien, le resultat que je souhaite c'est que la hauteur de la barre de navigation fasse la hauteur de l'ecran de l'utilisateur qu'il soit petit ou grands.

Edit:

Ahhh enfait il faut utiliser vh dans la regle height je vais essayer de le mettre en place et je clore le topic en vous remerciant si cela fonctionne

-
Edité par EloiOfficiel il y a moins de 5s

OK merci de votre aide, j'ai réussi a bricoler un truc avec le padding et le height:

/*General*/
nav{
	font-family: Arial, Sans-Serif;
	margin: 0;

	/*La position*/
	float: left;
}

/*Boutton retour*/
nav span{
	float: left;
	margin: 2px; 
}
nav span a{
	color: white;
	text-decoration: none;
}
nav span a:hover{
	text-decoration: underline;
}


/*Le menu*/
nav ul{
	display: block;
	list-style-type: none;
	box-shadow: 2px 3px 4px black;
	margin: 0;
	padding: 40vh 2px 0 2px;
	background: rgb(51,55,58);
	width: 200px;
	height: 60vh;
}
nav li{
	text-align: center;
	margin-bottom: 20px;
}
nav li a{
	color: white;
	text-decoration: none;
	font-size: 25px;
}
nav li a:hover{
	font-weight: bold;
	text-shadow: 2px 3px 4px black;
}

-
Edité par Eloi BERLINGER 21 avril 2017 à 19:49:03