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...)
/*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
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
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é.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !