Positionner le titre à gauche et le menu à droite

**Opal_m** · 11/07/2019, 18h41

Rebonjour,

Grace à votre aide je comprends peu à peu de nouveaux éléments. Petite question cependant, j'aimerais mettre le titre à gauche et le reste du menu à droite, une idée ? J'ai utilisé un <div> sans texte pour qu'il occupe l'espace libre restant.. mais je pense que c'est pas super propre donc si quelqu'un à des suggestions,

Egalement, question bonus, il y a un moyen de mettre un hover sur un bouton pour par exemple changer la couleur de tous les autres ? sans faire un hover sur chaque bouton si possible
En gros si je passe sur le bouton 1, le bouton 2 3 4 5 6 deviennent vert par exemple, pour le 2 ce sont les boutons 1 3 4 5 6

Merci beaucoup pour votre aide !

Voici mon HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html>
	<head>
		<title>FPI Marnes la vallée</title>
		<meta charset='uft-8'>
		<meta name="viewport" content="width=divice-width, initial-scale=1.0">
		<link rel="stylesheet" href="styles\style.css">
	</head>
 
	<body>
		<nav id="entete">
			<div id="Nom_entreprise" class="Btn-Entete">FPI Marnes la vallée</div>
			<div id="Btn-Acc" class="Btn-Entete">Accueil</div>
			<div id="Btn-Qui" class="Btn-Entete">Qui sommes nous ?</div>
			<div id="Btn-Nos" class="Btn-Entete">Nos formations</div>
			<div id="Btn-Nous" class="Btn-Entete">Nous contacter</div>
			<div id="Espace" class="Btn-Entete"></div>
		</nav>
		<section id="corps">
		</section>
	</body>
</html>

Voici mon CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
body{
	margin:0px;
	padding:0px;
 
}
 
#entete{
	Position:fixed;
	height:15%;
	width:100%;
	background: linear-gradient(135deg, #b04, #f92);
 
	margin:0px;
	padding:0px;
 
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items : center;
 
 
}
 
#Nom_entreprise{
 
}
 
.Btn-Entete{
	position:relative;
	border: solid 0.5px black;
	letter-spacing:2px;
}
 
.Btn-Entete:hover{
 
}
 
#entete div:nth-child(1){
	background-color:#F02050;
	order:1;
	/* flex-grow:1; */
}
 
#entete div:nth-child(2){
	background-color:#F13060;
	order:3;
	/* flex-grow:1; */
}
 
#entete div:nth-child(3){
	background-color:#F24070;
	order:4;
	/* flex-grow:1; */
}
 
#entete div:nth-child(4){
	background-color:#F35080;
	order:5;
	/* flex-grow:1; */
}
 
#entete div:nth-child(5){
	background-color:#F46090;
	order:6;
	/* flex-grow:1; */
}
 
#entete div:nth-child(6){
	background-color:red;
	order:2;
	flex: 1 1 auto;

Invité · 12/07/2019, 10h53

Bonjour,

pourquoi n'as-tu tenu aucun compte de mes conseils et code de cette discussion ?

Pour faire un menu, il faut des liens pour mener aux autres pages...

A voir aussi :

**Opal_m** · 12/07/2019, 11h08

Bonjour !

Désolé, j'ai justement suivi ton lien pour obtenir ce que j'ai pu mettre en code, en revanche j'ai copié le CSS j'ai obtenu ça :

Nom : Capture 1.JPG
Affichages : 1883
Taille : 58,0 Ko

Voici ce que j'essaie de faire :

Nom : Capture 2.JPG
Affichages : 1812
Taille : 147,8 Ko

Ainsi je ne sais pas si l'utilisation d'un div vide avec la propriété flex-grow : 1 (Pour qu'il occupe tout l'espace restant et serve de séparateur) est une bonne solution. Désole si ne n'ai pas bien compris ce que tu m'as envoyé, je vais relire mais c'est bien ton guide que j'ai utilisé.

Merci pour votre temps !

Invité · 12/07/2019, 11h10

Ben... c'est surtout que ton design est....... ultra-moche...

1- Cela dit, pour obtenir ce que tu veux, il existe de nombreuses solutions, dont celle-ci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<nav id="mainmenu">
  <div id="Nom_entreprise">FPI Marnes la vallée</div>
  <div id="Menu">
    <a href="...">Accueil</a>
    <a href="...">Qui sommes nous ?</a>
    <a href="...">Nos formations</a>
    <a href="...">Nous contacter</a>
  </div>
</nav>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
* {
  margin:0;
  padding:0;
  box-sizing:0;
}
/* MENU */
#mainmenu {
  Position:fixed;
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
}
#mainmenu > div#Nom_entreprise {
  display:block;
  padding:20px 30px;
  font-family:Arial, sans-serif;
  background-color:#FF0000;
  color:#fff;
}
#mainmenu #Menu {
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-end;
}
#Menu > a {
  display:block;
  padding:20px 30px;
  letter-spacing:2px;
  text-align:center;
  font-family:Arial, sans-serif;
  text-decoration:none;
  background-color: aqua; 
  color:darkblue;
  margin-left:5px; 
}

Mais je ne vais pas t'écrire le code CSS à chaque fois... si tu ne tiens pas compte du code HTML que je propose.

2- CONSEIL : un BON code (HTML/CSS/...) est :

un code VALIDE (c'est évident, mais c'est toujours mieux de le dire...)
un code SIMPLE ! (dès que ce code devient trop complexe, c'est sûrement qu'il y avait une façon plus simple d'y arriver)

**Opal_m** · 15/07/2019, 10h50

Merci pour ton retour haha, je suis certain que ça va revenir à la mode ... !
Non j'expérimentais les couleurs qui étaient utilisées dans le tutoriel qui tu m'as envoyé. (flexbox)

Je vais regarder ton code avec attention, j'essaie d'éviter au possible de copier coller ce qu'on m'envoie pour mieux comprendre de nouvelles choses !

Merci pour ton retour,

**Dave Hiock** · 15/07/2019, 15h49

Un code comme

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<header>
  <h1>FPI Marnes la vallée</h1>
  <nav>
    <a href="...">Accueil</a>
    <a href="...">Qui sommes nous ?</a>
    <a href="...">Nos formations</a>
    <a href="...">Nous contacter</a>
  </nav>
</header>

avec un CSS minimaliste

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
header {
  display: flex;
  align-items: center;
  background-color: #ffe4c4;
}
header nav {
  flex: 1 0 auto;
  text-align: right;
  background-color: #e57373;
}

constituent un bon départ, les couleurs ne sont là que pour montrer les zones .

Ensuite il suffit de rajouter le cosmétique.

**Joe Sidik** · 17/07/2019, 12h24

Pas vraiment très compliqué !

Le code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Test</title>
    </head>
    <body>
        <nav id="entete">
            <div id="titre">Le titre</div>
            <div id="menu">
                <a href="#">Accueil</a>
                <a href="#">Qui sommes nous ?</a>
                <a href="#">Nos formations</a>
                <a href="#">Nous contacter</a>
            </div>
        </nav>
    </body>
</html>

Et le code CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#entete{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #99F;
    font-size: 1.1em;
    color: #FFF;
    padding: 20px;
}
#menu{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 1em;
}
#menu a{
    padding: 0 10px;
    text-decoration: none;
    color: #fff;
}

Voilà, une très belle navbar

Positionner le titre à gauche et le menu à droite

Positionnement en CSS

Discussions similaires

Partager

Partager