5046 sujets

Sémantique web et HTML

Voila j'ai un petit soucis de centrage

comme cela: https://image.noelshack.com/fichiers/2018/13/6/1522448517-capture.png

déjà le logo je voudrais qu'il soit à coté de l’accueil et pis y'a un problème de centrage.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Base nautique LSM</title>

		<!--fonts -->
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type='text/css'>

		<!-- css -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>

	<!-- Contenu du site -->
	<body>
		<div id="logo">
        	<a href="#"><img src="img/logo.png" alt="Logo"/></a>
		<nav>
			<ul>
				<li><a href="#"> Acceuil </a></li>
				<li><a href="instalations"> Les instalations </a></li>
				<li><a href="Calendrier"> Calendrier </a></li>
				<li><a href="TarifsEntrées"> Tarifs </a></li>
				<li><a href="Albbumphotos"> Albbum photos </a></li>
				<li><a href="liens"> Les liens </a></li>
				<li><a href="Plan"> Plan d'Accès </a></li>
				<li><a href="OffreCE"> Offre CE </a></li>
			</ul>
		</nav>
		
		</div>
	</body>
</html>


html, body {margin:0}


#logo
{
    display: flex;
    justify-content: center;
    width: 100%;
    vertical-align: top;
    background-color: #f3f3f3;
    position: absolute; 

}

header, nav {
    margin:0 auto;
    text-align: center;
    width: 100%;
    vertical-align: top;
    display : block;
    position: absolute;
    right: -400px;
    padding: 10px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0px solid #e7e7e7;
    background-color: #f3f3f3;
}

nav li {
    display: inline-block;
    float: left;
}

nav a {
    display: block;
    color: gray;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; 
}

nav a:hover {
    background-color: #ebebe0;
}

.active {
    background-color: #4CAF50;
}



merci