Html centrer verticalement bandeau
geronimo3tr
Messages postés
1
Statut
Membre
-
Grandasse_ Messages postés 1156 Statut Membre -
Grandasse_ Messages postés 1156 Statut Membre -
Bonjour je n'arrive pas a centrer verticalement mes liens dans mon bandeau si quelqu'un peut m'aider merci bien je vous souhaite une bonne journée
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat%3Aital%2Cwght%401%2C500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Relooking</title>
<style type="text/css">
a:link
{
text-decoration:none;
}
</style>
<body>
<nav>
<ul>
<div class="header">
<div class="logo"><img class="logoImage" src="img/logo.jpg" alt="French Relooking" /> </div>
<li class="menu"><a class="boutonlien" href="RelookFrance.html">Accueil </a>
<li class="menu"><a class="boutonlien">Relooking Personnelle</a>
<ul class="sous" >
<li><a href="html/relookinghomme.html">Relooking Homme</a></li>
<li><a href="html/relookingfemme.html">Relooking Femme</a></li>
<li><a href="html/relookingenfant.html">Relooking Enfant</a></li>
</ul>
</li>
<li class="menu"><a class="boutonlien">Relooking Professionnel</a>
<ul class="sous" >
<li><a href="index.html">Relooking Homme</a></li>
<li><a href="index.html">Relooking Femme</a></li>
</ul>
</li>
<li class="menu"><a class="boutonlien">Formation</a>
<ul class="sous" >
<li><a href="html/formationintensive.html">Formation Intensive</a></li>
<li><a href="html/formationadistance.html">Formation à Distance</a></li>
</ul>
</li>
<li class="menu"><a class="boutonlien" href="html/boutique.html">Boutique</a>
</li>
<li class="menu"><a class="boutonlien">Aide</a>
<ul class="sous" >
<li><a href="html/contact.html">Nous Contacter</a></li>
<li><a href="html/coachs.html">Nos Coachs</a></li>
</ul>
<li class="menu"><a class="boutonlien" href="html/forum;html">Forum</a>
</li>
</nav>
</div>
</body>
</html>
Le CSS
*{
margin: 0px;
padding: 0px;
}
.logo{
float: left;
}
nav{
width: 100%;
margin: 0 auto;
position: absolute;
top: 0px;
}
nav ul{
list-style-type: none;
}
nav ul li{
float: left;
width: 10%;
text-align: center;
position: relative;
}
nav ul::after{
content: "";
display: table;
clear: both;
}
nav a{
display: block;
text-decoration: none;
color: black;
border-bottom: 2px solid transparent;
padding: 10px 0px;
}
nav a:hover{
color: purple;
border-bottom: 2px solid purple;
}
.sous{
display: none;
box-shadow: 0px 1px 2px #CCC;
background-color: white;
position: absolute;
width: 100%;
z-index: 1000;
}
nav > ul li:hover .sous{
display: block;
}
.sous li{
float: none;
width: 100%;
text-align: left;
}
.sous a{
padding: 10px;
border-bottom: none;
}
.sous a:hover{
border-bottom: none;
background-color: RGBa(200,200,200,0.1);
}
.header{
width:100%;
height: 255px;
top: 80px;
font-family: 'Montserrat', sans-serif;
color:white;
background-color: black;
}
.boutonlien{
color:white;
font-size: 125%;
}
A voir également:
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ?
- Télécharger clavier arabe - Télécharger - Divers Web & Internet
- Clément a partagé le fichier mme bovary. il a écrit des commentaires dans le document. quel est le 2e commentaire ? - Guide
- Supercopier 2 - Télécharger - Gestion de fichiers
- Appliquez à tous les paragraphes du document à télécharger, à l’exception des titres et des sous-titres, la mise en forme suivante : - Guide
- Télécharger instagram pour pc - Télécharger - Divers Communication
