Header

<header class="topnav">
		<nav class="salutnav">
			<ul id="h_nav">
				<li class="menu_bar"><a href="../index.html" id="a_home">Home</a></li>
				<li class="menu_bar"><a href="../histoire.html" id="a_hist">Histoire</a></li>
				<li class="dropdown"><a href="" class="dropbtn">Personnage</a>
					<div class="dropdown-content">
						<a href="anduin.html" class="dropdown-item">Anduin</a>
						<a href="jaina.html" class="dropdown-item">Jaina</a>
						<a href="sylvanas.html" class="dropdown-item">Sylvanas</a>
						<a href="talanji.html" class="dropdown-item">Princess Talanji</a>
						<a href="magni_aze.html" class="dropdown-item">Magni &amp; Azeroth</a>
					</div>
				</li>
				<li class="menu_bar"><a href="../map.html" id="a_icone_map"><img src="../images/icon_map_wow.png" id="img_icone_map" alt="Onglet de la map de world of warcraft"></a></li>
			</ul>
		</nav>
	</header>

	<div class="div-footer">
		<div class="btn-up">
			<a href="#" id="a-btn-up">Retourner en haut de la page</a>
		</div>
		<div id="contact">
			<h3>Nous contacter :</h3>
			<p>siteprojet2200@gmail.com</p>
		</div>
		<div id="support">
			<h3>Besoin d'aide ?</h3>
			<p id="p-mail">Contactez notre support <br />
			Voici le formulaire à remplir : <a href="support.html" id="a-support">support</a></p>
		</div>
		<div id="reseaux">
			<h3>Nos réseaux sociaux :</h3>
			<img src="images/logo-twitter.png" alt="Logo de twitter" id="logo-twitter">
			<img src="images/facebook-logo.png" alt="Logo facebook" id="facebook-logo">
			<img src="images/instagram-logo.png" alt="Logo instagram" id="instagram-logo">
		</div>
	</div>

-----------------------------------------------------------------------------------------------------------------------------------

/* Css du header */
header{
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif" ;
	position: fixed;
	top:0;
	right:0;
	left:0;
	width:100%;
	background-color:#21253C;
	box-shadow: 4px 0px 20px 0px black;
}

/* Css de la nav */

.salutnav{
	margin-left:38%;
	margin-right:35%;
}

/* Css de la menu-bar */

#h_nav{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;


}

.menu_bar, .dropdown{
	float:left;
}

.menu_bar a, .dropdown a{
	font-size:20px;
	display:block;
	color:white;
	text-align:center;
	padding:14px 16px;
	text-decoration: none;
}

.menu_bar a:hover, .dropbtn:hover{
	background-color: #FFFFFF;
	color:black;
}

/* Css du dropdown */

.dropdown-item{
	background-color:#EAEAEA;
    color: black;
    padding: 10px 12px;
    text-decoration: none;
    display: block;
    text-align:left;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 20px 0px rgba(0,0,0,0.2);
    z-index: 1;
}


.dropdown-content a{
	text-align:left;
	color:black;
	font-size:15px;
}

.dropdown:hover .dropdown-content{
	display:block;
}
.dropdown-item:hover{
	background-color:#717171;
	color:white;
}

/* Css du bouton de la map */
#img_icone_map {
	width:26px;
	height:26px;


}

#a_icone_map{
	width:26px;
	height:26px;
}

/* Le main */



/* Footer */

.div-footer{
	display:none;
	height:200px;
	background-color:#21253C;
	color:white;
	clear:left;
	position:relative;
	bottom:-10px;
	left:-10px;
	width: 101.2%;
	box-shadow:0px -4px 20px 0px rgb(175,175,175);
	font-family: cantarell;
	font-size:17px;
}
.div-footer p{
	text-align :center;
	width:100%;
}

#contact{
	padding-top:1%;
	float:left;
	width:33%;
	text-align: center;
}

#support{
	padding-top:1%;
	float:left;
	width:34%;
	text-align: center;
}
#p-mail{
	text-align: left;
	margin-left:33%;
}

#a-support{
	text-decoration:none;
	color:white;
	font-weight:bold;
}

#a-support:hover{
	color:#E0E0E0;
}
.btn-up{
	background-color:#2E3556;
	text-align: center;
	height:50px;
}


#a-btn-up{
	font-weight: bold;
	text-decoration: none;
	color:white;
	padding: 15px 43%;
	display:block;

}

#a-btn-up:hover{
	background-color: #333B60;

}

#reseaux{
	float:left;
	padding-top:1%;
	width:33%;
	text-align: center;
}