[BootStrap] code css de la barre de menu

**sandaff** · 31/08/2016, 06h39

Bonjour!

quelqu'un a une idée sur le code css pour la barre de menu bootstrap?

J'ai réussit à placer tout les différents partie( header, aside,footer etc.) u bon endroit, il me reste la barre des menu.

Pour positionner cette barre et aussi les éléments contenus dedans continu un grand problème.

Je compte sur votre aide;

**vttman** · 31/08/2016, 08h17

Hello Sandaff,
Il y a ce tutoriel bien fait avec création d'une barre de menu + style CSS
=>
http://www.developpez.net/forums/blo...lio-bootstrap/

**sandaff** · 31/08/2016, 23h46

Bonsoir Mr vttman;
Merci pour votre aide;
J'ai lu ce tuto et ça beaucoup aider à la compréhension de certains éléments.
Seulement au finish je trouve que son code css ne correspond pas à la version desktop.
c'est pour les tablettes et cela ne s'occupe pas des alignement sur la même ligne des éléments de menu.
Quand on exécute , bien sur tout les éléments son sur le menu;mais ce menu a une grande hauteur dont tout peut contenir. alors que pour les écrans d'ordinateur, le menu a une grande largeur mais la hauteur est petite.
donc avec son code css tout les éléments sortent du cadre du menu.
J'ai aussi amélioré ce code qui n'a pas encore réussit comme je pense car la largeur a augmenté avec l'ajout de width:1300px; height:80px et display:inline-block sur navbar. mais toujours les éléments sont hors cadre du menu.
en plus il n y avait pas le dropdown qui regroupait certains éléments que j'ai rajouté ce moi ici.

pour plus de compréhension voici le code:

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
.navbar {
    width : 1300px;
    height:80px;	
	display:inline-block;
	min-height: 70px;
	padding-top: 0px;
	margin-bottom: 0px;
 
}
 
.navbar-brand {
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
}
 
.navbar-header, .navbar-brand {
	color: white;
}
 
.navbar-default ,.dropdown, .navbar-nav > li > a {    
	color: white;
	font-weight: 700;
	font-size: 15px;
}
 
.navbar-default, .navbar-nav > li > a:hover {
	color: rgba(172, 186, 191, 0.82);
}
 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
	color: rgba(172, 186, 191, 0.82);
	background: transparent;
}
 
.navbar-default {
background-color:blue;
	/*background-color: #384452;*/
	border-color: transparent;
}

le code html sur la partie navigation:

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
73
74
75
76
77
78
79
80
<body>
	<div class="container">
	<div class="row">	
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">  
	<div class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle Navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="images/logo1.jpg"> <img src="images/logo1.jpg" alt="Logo" id="logo" /></a>	
				</div>
				<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav">
                        <!-- lien classic -->
                        <li>
                            <a href='index.php'>Accueil</a>
                        </li>
						 <li>
                            <a href='publication.php'>Publication</a>
                        </li>
						 <li>
                            <a href='abonnement.php'>Abonnement</a>
                        </li>
						<?php 
                                   include('insert_liste.php');
                                   echo'   Bonjour  '.$_SESSION['pseudo'].'!';
                                   $req = $db->query("SELECT* FROM personne WHERE pseudo='".$pseudo."' ");
                                   while ($donnees = $req->fetch())	
                                   { 
	                                 $photo=$donnees['photo_personne'];  
	                                 }; 
                                     if($photo==''){
                                    ?>
                                    <img src="images/daf14.JPG" alt="photo" id="photo" />
                                    <?php
                                     }
                                    else 
                                    include('affiche_photo_profile.php');
                                    ?> 
                    </ul>
 
					<ul class="nav navbar-nav navbar-right">
 
 
						    <!-- Menu déroulant -->
                       <li class="dropdown">
                            <a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" href='inbox.php'>
                                <!-- Premier niveau -->
                                <i class="fa fa-envelope"> Boîte de réception(</i> 
                                <?php if(count($messages) != 0){ ?>
                                    <!-- Si il y a au moins 1 msg on affiche le badge -->
                                    <span class="badge"><?php echo count($messages); ?>)</span>
                                <?php } ?>
                                <!-- Petite icone pour le dropdown -->
                                <span class="caret"></span>
                            </a>
                            <!-- Sous niveaux -->
                            <ul class="dropdown-menu">
                                <li>
                                    <a href='inbox.php'>Voir mes messages recus</a>
                                </li>
                                <li>
                                    <a href="wrotemsg.php">Voir mes  messages envoyés</a>
                                </li>
								<li>
								<a href="index.html">Contact</a>
								</li>
                            </ul>
                        </li>
					</ul>
				</div>
			</div>
		</div>
		</div>
		</div>
		</div>

**vttman** · 01/09/2016, 07h20

Ok Sandaff,

Comme je bosse actuellement sur le contenu et sur ce tutoriel
afin d'introduire au mieux mon CV et présenter au mieux mes multiples facettes
et attentes aussi (pourquoi pas ?)
à d'éventuelles sociétés, je testerai ce code remanié asap

@Tantôt
Laurent

**sandaff** · 01/09/2016, 15h45

Ok mais en attendant; comme vous avez lu mon code css si-dessus.
Est ce pourrez vous me donner un coup de mains pour l’améliorer car les éléments sont affichés les uns en bas des autres et le menu déroulant càd la partie dropdown s'affiche aussi les uns en bas des autres; alors qu'il devrai disparaître jusqu'à ce qu'on clic dessus pour dérouler ce qui est dedans.
sans quoi même avec les Cours et tutoriels pour apprendre CSS je serrai toujours bloqué à ce niveau car ça fait presque un an je suis sur ce point.
merci

**vttman** · 01/09/2016, 18h01

Presque un an

!?

tout les éléments sortent du cadre du menu

=>
De mon coté après test, le code du tuto me convient sur écran d'ordinateur et en réduisant la fenêtre !
donc je ne vois pas trop le problème, le mieux serait de poster une copie d'écran pour mieux
comprendre ce qui coince ?

[BootStrap] code css de la barre de menu

Framework CSS Bootstrap

Vue hybride

Discussions similaires

Partager

Partager