[CSS] Problème d'alignement par UmmZ - page 1

13 juillet 2019 à 18:39:24

Bonjour,

je suis sur un projet de création de site en html et css mais le problème c'est que je n'arrive pas a centrer mon menu dans le background

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="new 2.css"/>
		<title>OzMaster</title>
		<meta charset="utf-8"/>
	</head>
	
	<body>
		<header>
			<nav>
				<img id="snap" src="snapchat.jpg" alt="Logo" width="50" heigth="60"/>
				<ul>
					<li><a href="#">Accueil</li></a>
					<li><a href="#">Qui sommes-nous</li></a>
				</ul>
			<nav>
		</header>
		<section class="prem">
			<img src="281174.jpg" alt"Que proposons-nous ?/>
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		<section class="deux">
			<img src="281174.jpg" alt"Que proposons-nous ?/>
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		<section class="trois">
			<img src="281174.jpg" alt"Que proposons-nous ?/>
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		<section class="quatre">
			<h4>Rejoignez-nous !</h4>
			<form>
				<input type="text" " placeholder="E-mail" />
			</form>
		</section>
	</body>
</html>

header{
	background-color: rgb(73, 73, 76);
}
nav li {
	list-style-type:none;
	margin:auto;
	
} 
nav ul {
	display:flex;
	color:white;
}

je sais pas si vous avez compris mais merci d'avance !

ChrisLebure

13 juillet 2019 à 19:17:04

Bonsoir,

beaucoup d'erreurs dans ce code :

- un nom de fichier ne doit pas comporter d'espace : l'appeler new_2.css ou new2.css

- l'ordre des balises dans le <head> :

1 charset

2 title

3 stylesheet

le logo ne doit pas être dans <nav>, les <li> ne doivent pas être margin:auto car ça n'a pas de sens pour un menu horizontal

je suppose que tu veux le logo à gauche, puis les onglets du menu horizontalement de façon à ce que le menu occupe tout l'espace dispo avec des espaces entre les onglets, espaces calculés automatiquement

donc 1er point, le logo, puis le menu horizontal. si le header est une flexbox, on pourra avoir le logo, puis <nav> occupant tout l'espace restant.
il faudra indiquer que <nav> doit occuper tout l'espace dispo (voir la doc flex pour la propriété à appliquer à <nav>)
Ensuite il faudra afficher les onglets dans <nav>
ul display flex va fair le boulot mais il faut préciser de mettre de l'espace entre tous les onglets, c'est à dire utiliser la propriété justify-content: space-between;

on pourrait faire l'économie de <ul> et <li> en mettant simplement des onglets de la forme <a href="">onglet 1</a> dans <nav></nav>, flex les alignera sans problème

en résumé on aura une flexbox <header> contenant une image et une <nav>, elle-même flexbox

Commence sans les onglets juste avoir l'image puis <nav> avec une couleur de fond provisoire, qui occupe tout l'espace restant dans <header>

Ensuite, positionner les éléments <a> du menu, dans le <nav> flex, avec espace automatique entre les onglets

Dans une deuxième étape, on verra pour les alignements verticaux

Autre erreur : mettre les dimensions de l'image dans la balise <img> : utiliser la CSS pour ça, et ne pas utiliser d'id si cette image n'a pas vocation à être utilisée par un javascript

Bon exercice pour travailler les flexbox et les différentes propriétés

-
Edité par ChrisLebure 13 juillet 2019 à 19:17:57

UmmZ

13 juillet 2019 à 20:38:51

Oui mais si je ne met pas de id a mon image ca va changer la taille de mes autre img aussi !

ChrisLebure

13 juillet 2019 à 21:18:07

mets une class plutôt, image-logo par exemple

-
Edité par ChrisLebure 13 juillet 2019 à 21:18:29

MilenAtanasov

14 juillet 2019 à 0:24:09

Erreurs:
- "<li><a href="#">Accueil</a></li>" et non "<li><a href="#">Accueil</li></a>"
- <li> avec "flex" est sur la ligne apres <img> **
- Pas besoin d'utiliser toujours <li>, je prefere <span> avec "padding: 10px;"

<nav>

<span style="padding: 10px;"><a href="#">Accueil</a></span>

<span style="padding: 10px;"><a href="#">Qui sommes-nous</a></span>

<nav>

**

UmmZ

14 juillet 2019 à 22:19:36

bonsoir,

je n'arrive toujours pas a centrer mon menu, j'ai apporté quelque modif a mon code car j'ai vue qu'il y avait quelques erreurs

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>OzMaster</title>
		<link rel="stylesheet" href="new2.css"/>
	</head>
	
	<body>
		<header>
			<img class='image-logo'src="snapchat.jpg" alt="Logo"/>
			<nav>
				<a href="#">Accueil</a>
				<a href="#">Qui sommes-nous ?</a>
			</nav>
		</header>
		<section id="sec">
		<h1>Bienvenue</h1>
		</section>
		<section class="prem">
			<img src="281174.jpg" alt="Que proposons-nous?">
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		<section class="deux">
			<img src="281174.jpg" alt="Que proposons-nous ?">
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		<section class="trois">
			<img src="281174.jpg" alt="Que proposons-nous ?">
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		<section class="quatre">
			<h4>Rejoignez-nous !</h4>
			<form>
				<input type="text"  placeholder="E-mail" />
			</form>
		</section>
	</body>
</html>

header{
	background-color: rgb(73,73,76);
	display:flex;
}
nav{
	background-color: rgb(73,73,76);
	
	}
nav li {
	list-style-type:none;
	align-content:stretch;
} 
nav ul {
	display:flex;
	color:white;
}
#sec{
	background-image: url("image.jpg");
	height:89px;
	width:65px;
	background-position:cover;
	background-repeat:no-repeat;
}
.image-logo{
	width:50px;
	height:60px;
}

AliasDmc

15 juillet 2019 à 19:20:19

Bonjour ColaLola,

Un exemple de type flex :

https://codepen.io/Zonecss/pen/vqqpmy

Découvrez les Css avec la zonecss.fr

UmmZ

15 juillet 2019 à 21:52:49

Merci, @AliasDmc,

j'ai fait une faute dans mon CSS,je vous ai envoyer le mauvais^^ sinon j'ai réussi a faire ce que je voulais, merci pour votre aide, il me reste juste un petit problème, j'ai ajouté des bordures a mon menu mais je voudrais que "accueil "soit en noir et que "Qui sommes-nous ?" reste ne blanc je fait comment ?

AliasDmc

16 juillet 2019 à 18:08:57

Bonjour ColaLola,

Peux tu nous transmettre le HTML + CSS final que l'on puisse t'aider cas là sans code ....

Découvrez les Css avec la zonecss.fr

UmmZ

16 juillet 2019 à 22:57:34

Oui bien sûr !

HTML

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>OzMaster</title>
		<link rel="stylesheet" href="new2.css"/>
	</head>
	
	<body>
		<header>
			<img class='image-logo'src="snapchat.jpg" alt="Logo"/>
			<nav>
				<li class="bordure"><a href="#"><mark>Accueil</mark></a></li>
				<li class="bordure"><a href="#">Qui sommes-nous ?</a></li>
				<li class="bordure"><a href="#">Blog</a></li>
				<li class="bordure"><a href="#">Contactez-nous !</a></li>
			</nav>
		</header>
		<section id="sec">
		<h1 id="bienvenue">Bienvenue</h1>
		</section>
		<div id="container">
		<section class="prem">
			<img src="281174.jpg" alt="Que proposons-nous?" width="110px" height="100px">
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		<section class="deux">
			<img src="281174.jpg" alt="Que proposons-nous ?"  width="110px" height="100px">
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		<section class="trois">
			<img src="281174.jpg" alt="Que proposons-nous ?"  width="110px" height="100px">
			<h4>Que proposons-nous ?</h4>
			<p>Nous proposons des sites adapter a vos désires ....</p>
		</section>
		</div>
		<img  class='photo'src="281154.jpg" alt="" > 
		<section class="quatre">
			<h4>Rejoignez-nous !</h4>
			<form>
				<input type="text"  placeholder="E-mail" />
			</form>
		</section>
	</body>
</html>

CSS

header{
	background-color: rgb(73,73,76);
	margin-top:-10px;
	margin-left:-10px;
	margin-right:-8px;
	display:flex;
}
nav li{
	padding-left:10px;
	padding-top:20px;
	list-style-type:none;


	}
nav a {
	text-decoration:none;
	color:white;
}
nav{
		display:flex;
}
#sec{
	background-image: url("image.jpg");
	width:1200px;
	height:600px;
	margin-top:-50px;
	margin-left:-10px;
	padding-right:151px;
}
.image-logo{
	width:50px;
	height:60px;
	margin-right:893px

}
.bordure{
	border:1px solid #44c6cb;
	border-bottom:rgb(73,73,76);

}
.bordure:nth-child(1){
	background-color: #44c6cb;
	padding-right:13px
}.bordure:nth-child(2){
	padding-right:15px
}.bordure:nth-child(3){
	padding-right:15px
}
 /* pour Accueil sois en noir */
mark{
	color:black;
	background-color:#44c6cb ;
}
#bienvenue{
	text-align:center;
	padding-top:250px;
	font-size:60px;
	color:black;
	padding-left:35px;
}
#container{
	display:flex;
	background-color:rgb(57,58,58);
	margin-left:-15px;
	padding-bottom:90px;
	margin-right:-8px
	
}
.prem{
	background-color:rgb(73,73,76);
	border: 1px solid rgb(58,58,58);
	width:20%;
	margin-left:140px;
	margin-top:100px;
	margin-right:50px;
	text-align:center;
	padding-top:25px

}
.deux{
	background-color:rgb(73,73,76);
	border: 1px solid rgb(57,58,58);
	width:20%;
	text-align:center;
	margin-left:50px;
	margin-top:100px;
	margin-right:50px;
		padding-top:25px

	}
.trois{
background-color:rgb(73,73,76);
	border: 1px solid rgb(58,58,58);
	width:20%;
	margin-left:50px;
	margin-top:100px;
	margin-right:50px;
	text-align:center;
		padding-top:25px

}
.photo{
width:1380px;
height:400px;
margin-left:-15px
}
.quatre{
	background-color:rgb(57,58,58);
	padding-top:55px;
	padding-left:55px;
	padding-right:55px;
}

UmmZ

18 juillet 2019 à 14:28:38

Quelqu’un peu m'aider ou est ce que je dois créer un autre sujet juste pour ça ?

Mewen_bzh

18 juillet 2019 à 15:24:36

Salut,

Pour être honnête je ne comprends pas ton problème.

Tu veux mettre un lien en noir et un en blanc, c'est bien ça ? Tu sais le faire puisque tu le fais déjà dans ton code actuel donc où es-tu bloqué ?

Au passage, attention à ton code, tu as quelques erreurs. Notamment les éléments <li> quoi doit obligatoirement avoir pour parent une liste (<ul> ou <ol>). Tu devrais vérifier tout cela avec les validateurs HTML et CSS du W3C.

-
Edité par Mewen_bzh 18 juillet 2019 à 15:27:25

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

UmmZ

18 juillet 2019 à 16:23:13

Enfaite j'ai mis <mark>Accueil</mark> et après j'ai mis dans mon css la couleur noir et le fond bleu mais je pensais que c'etait une erreur et qu'il y avait un moyen plus facile pour le faire

[CSS] Problème d'alignement

Supprimer

Modérer

Signaler le message aux modérateurs