Alignement d menu et logo ok mais puce indésirable

23 avril 2019 à 15:30:43

Bonjour,

Je débute sur html5 et CSS3 et j ai réussi en utilisant flex box à mettre mon menu et logo sur la même ligne mais le problème c'est que je me retrouve avec des style de liste à puces je ne sais pas ce qu'elles font là et j'essaie de les enlever mais je n'arrive pas quelqu'un peut m'aiguiller ? Merci de votre aide :ange:

body
{ 
	background: url();/* which image */
	font-family: 'Roboto', sans-serif;
}


.main-nav {
	
	display: flex;
}
.main-nav li:first-child {
	margin-right: auto;
}
.main-nav a {
	margin: 10px;
	border-radius: 5px;
	background: #fff;
	color: #444D56;
	display: block;
	padding: 15px;
	text-decoration: none;
}
.main-nav .logo {
	list-style-type: none;
	
	
}

noopy360

23 avril 2019 à 15:43:21

bonjour, donne aussi le html

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

RoxanaPrado

23 avril 2019 à 19:10:11

voici le code html !

Gracias

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>WebAgency: L'agence de tous vos projets</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />


	<link rel="stylesheet" type="text/css" href="style.css"> 

	
	
</head>
<body> 

	<header> <!--en tête--> 
		<div >
			

			<main> <!-- --> 

				<nav  >

					<ul class="main-nav">
						<li> 
							<img src="image/logo.png" alt=" logo WebAgency"></li>
							<li> <a href="accueil.html">Accueil</a> </li>
							<li> <a href="service.html">Service</a></li>
							<li> <a href="portfolio.html">Portfolio</a></li>
							<li> <a href="contact.html">Contact</a></li>
						</ul>
					</nav>

				</header>

				<section>
					<aside></aside>
				</section>
			</main>	
			<footer> </footer>

		</body>

		</html>

exen

23 avril 2019 à 19:51:53

Bonjour,

si tu veut que ca fonctionne ton list-style: none; il ne faut pas le coller sur " .main-nav .logo" mais sur ".main-nav"

ou même sur ul

-
Edité par exen 23 avril 2019 à 19:54:50

Compos sui.

RoxanaPrado

23 avril 2019 à 20:12:44

Merci ,

En effet erreur la balise list style none elle était sur le mauvais élement !

Mais cela dit je ne comprends pas pourquoi cela met des listes a puce alors que je n'ai jamais demandé un code avec des puces

Si jamais vous avez une explication je suis prenante

Merci à vouS :honte:

-
Edité par RoxanaPrado 23 avril 2019 à 20:13:45

exen

23 avril 2019 à 20:29:15

Re,

Tout simplement parce que <ul> est une liste, (Unordered List element)

https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul

Donc par défaut tu as des puces.

Compos sui.

Mewen_bzh

23 avril 2019 à 21:58:58

Salut,

En plus de ce qui a été dit, je rajouterais qu'il n'y a aucun élément dans ton code HTML qui porte la classe "logo".

Donc dans tous les cas ta propriété appliquée à ".main-nav .logo" ne pouvait rien donner... 😉

Je ne réponds pas aux messages privés.

RoxanaPrado

27 avril 2019 à 17:40:56

Merci de vos réponses mais je dois refaire mon code car le mentor me dit que ce n'est pas bon de mettre dans le menue mon logo du coup je dois tout refaire diffirement :(

exen

27 avril 2019 à 18:07:49

Bon courage dans ce cas

Compos sui.