Centrer une div entourée de 2 div

30 mars 2020 à 19:59:02

Bonjour,
Question peut-être un peu bête, je suis en pleine création d'un site pour mon serveur, et je n'arrive pas à centrer correctement ma div du centre qui contient une image, qui est entourée d'une div à gauche et une div à droite qui contiennent tous les deux une liste ul.
Je vous joint le code HTML de mon header, et le css :

HTML :

<header>
		<nav class="navbar">
			<div class="left">
				<ul>
				<li class="menu">
					<a href="index.html">
						Acceuil
					</a>
				</li>	
				<li class="menu">
					<a href="">
						Connexion
					</a>
				</li>
				<li class="menu">
					<a href="">
						Inscription
					</a>
				</li>
				<li class="menu">
					<a href="">
						Voter pour le serveur
					</a>
				</li>
			</div>
			<div class="center">
				<img src="img/logo.png" width="150px">
			</div>
			<div class="right">
				<ul>
				<li class="menu">
					<a href="nous_rejoindre.html">
						Nous rejoindre
					</a>
				</li>
				<li class="menu">
					<a href="reglement.html">
						Le règlement
					</a>
				</li>
				<li class="menu">
					<a href="jeu.html">
						Le jeu
					</a>
				</li>
				<li class="menu">
					<a href="boutique.html">
						Boutique
					</a>
				</li>
				</ul>
			</div>
		</nav>	
	</header>

CSS :

nav.navbar ul li.menu{
	list-style-type: none;
	display:inline-block;
}
nav.navbar ul li.menu a{
	color: white;
	background-color: #1421DC;
	text-decoration: none;
	font-size: 15px;
	padding: 10px;
}
nav.navbar ul li.menu:hover a{
	color:white;
	background-color: #454BA2;
	transition: 0.3s all;
}

header nav.navbar div.left{
	position:absolute;
	top:0px;
	left:0px;
}
header nav.navbar div.center{
	/*????*/
}
header nav.navbar div.right{
	position:absolute;
	top:0px;
	right:50px;
}
nav.navbar{
	display: inline-block;
}

Merci d'avance pour vos réponses !

AbcAbc6

30 mars 2020 à 20:25:50

Bonjour, tu as des erreurs dans ton HTML, erreurs que tu airais pu voir en passent ton code au validateur => https://validator.w3.org/

Tu ne fermes pas ta première liste.

La balise <img> ne se balade jamais sans son attribut alt obligatoire.

En CSS le positionnement absolut fait sortir les éléments du flux courant, si on suit ta logique tu devrais également positionner ton image en absolute et centrer ce positionnement.

Saut que, ce n'est pas une bonne pratique. Laisse les éléments au maximum dans le flux courant.

C'est une erreur de débutant de croire que le positionnement absolut sert à positionner les éléments dans une page. Un positionnement absolut s'utilise avec un élément parent ou ancêtre en relatif ce qui crée un contexte de référent. En son absence c'est le plus proche parent positionner et à défaut le <body> qui sert de référent.

Bref, je te recommande de supprimer toutes les positions abolute de ton CSS et de regarder du coter de flexbox.

Voir le cours HTML/CSS de ce site, chapitre flexbox ou https://la-cascade.io/flexbox-guide-complet/ pour plus d'information.

Ce sera plus facile, mieux pour le mobile et plus flexible....

JimmyGéneau1

30 mars 2020 à 20:53:11

D'accord, merci du conseil, étant débutant c'est assez complexe mais j'apprends sur le terrain !

Je vais regarder ça

ChrisYk22

31 mars 2020 à 5:25:30

Bonjour. tu ne peux centrer ton image que soit par rapport au div qui le contient soit centrer le qui div qui la contient par rapport au nav (et dans ce cas les listes seront centrées aussi avec lui puisque contenu elles aussi dans nav). je te conseillera de te tourner vers le positionnement relatif et de choisir le positionnement qui te conviendrai le mieux

-
Edité par ChrisYk22 31 mars 2020 à 5:29:32

L'excellence est un état d'esprit avant d'etre un style de vie.