Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Etudiant - Stage MOA
    Inscrit en
    juin 2017
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Etudiant - Stage MOA
    Secteur : Finance

    Informations forums :
    Inscription : juin 2017
    Messages : 35
    Points : 26
    Points
    26

    Par défaut Positionner le titre à gauche et le menu à droite

    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;

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 844
    Points : 30 160
    Points
    30 160

    Par défaut

    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 :

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Etudiant - Stage MOA
    Inscrit en
    juin 2017
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Etudiant - Stage MOA
    Secteur : Finance

    Informations forums :
    Inscription : juin 2017
    Messages : 35
    Points : 26
    Points
    26

    Par défaut

    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 : 31
Taille : 58,0 Ko

    Voici ce que j'essaie de faire :

    Nom : Capture 2.JPG
Affichages : 30
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 !

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 844
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 844
    Points : 30 160
    Points
    30 160

    Par défaut

    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)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Etudiant - Stage MOA
    Inscrit en
    juin 2017
    Messages
    35
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Etudiant - Stage MOA
    Secteur : Finance

    Informations forums :
    Inscription : juin 2017
    Messages : 35
    Points : 26
    Points
    26

    Par défaut

    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,

  6. #6
    Membre à l'essai
    Homme Profil pro
    OOW
    Inscrit en
    juin 2019
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OOW

    Informations forums :
    Inscription : juin 2019
    Messages : 8
    Points : 22
    Points
    22

    Par défaut

    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.

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Développeur informatique
    Inscrit en
    mai 2017
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 18
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Service public

    Informations forums :
    Inscription : mai 2017
    Messages : 20
    Points : 26
    Points
    26

    Par défaut

    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
    Nom : Capture.PNG
Affichages : 14
Taille : 9,8 Ko

Discussions similaires

  1. Réponses: 2
    Dernier message: 09/06/2015, 23h35
  2. créer un menu droit et un menu gauche
    Par ferhat.adel dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 07/06/2011, 12h13
  3. [tiles] menu à droite et à gauche
    Par grospatapouf dans le forum Struts 1
    Réponses: 11
    Dernier message: 27/11/2008, 10h21
  4. Aligner un élément a gauche, et un autre à droite
    Par TommyWeb dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 21/09/2005, 15h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo