Espacer les textes d'une liste.

17 février 2019 à 13:09:51

Bonjour,

Je n'arrive pas a espacer les textes d'une ul, ils sont donc collé comme ceci: AcceuilServicesPortfolio, je pensais au depart a la propriété Justify content space between mais celle ci ne change rien a ma liste. Voici mon code Html:

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="Projet1.css">
<head>
	<title>Web agency</title>
</head>
<header>
	<ul id="nav">
		<div id="liste">
   <li>Accueil</li>
	<li>Services</li>
	<li>Portfolio</li>
	<li>Contact</li>
	</ul></div>
	<div id="logo"><img src="logo.png">
		<div id="slider">
			<img src="bg1.png" class="sliderimg">
			<img src="bg2.png" class="sliderimg">
		</div>
		
		</header>
  <body>

</body>
</html>

Et mon code css :

ul{
	list-style: none;
	position: absolute;
	right: 500px;
}
#liste{
	display: flex;
}

AliasDmc

17 février 2019 à 14:06:50

Bonjour MehdiChauvin ,

Ton code html n'est déjà pas bon : un div en fils d'un ul c'est pas possible

Ensuite il faut que tu supprimes les margin (ou padding je sais plus) du ul

et enfin mets une bordure à ton ul et tu comprendras pourquoi tu as ton résultat

pour info, justify-content vaut par défaut flex-start;

Découvrez les Css avec la zonecss.fr

SonicBoom1

21 février 2019 à 17:37:22

Salut,

Comme dit plus haut, ton code html est mauvais.

Commence par placer ton <body> avant ton <header> puis </header> </body>.

Je pense que tu devrais placer ta liste dans une balise <nav>, cela va créer ton élément de navigation.

Tu supprimes ta <div> dans ton <ul> (au passage, les balises de fermeture son inversées il me semble).

Le lien suivant devrait t'aider à créer ton header et plus :

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606688-tp-creez-un-site-pas-a-pas

N'hésites pas à retourner sur les pages du cours, notamment le html.

Petit conseil d'un mehdi à un autre, aéres ton code, passer quelques lignes t'aidera à y voir plus clair.

Bon courage

MehdiChauvin

22 février 2019 à 12:39:40

Merci a vous je vais corriger tout ca !