Partage

Adapter un menu a la hauteur de l'ecran

Le code ne m'aime pas ;C

21 avril 2017 à 14:07:41

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 :p

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

21 avril 2017 à 18:04:07

Utilise l'unité de mesure "vh"

21 avril 2017 à 19:37:49


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 :p

-
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 EloiOfficiel 21 avril 2017 à 19:49:03

Adapter un menu a la hauteur de l'ecran

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown