[BootStrap] code css de la barre de menu

Version imprimable

31/08/2016, 06h39
sandaff

[BootStrap] code css de la barre de menu

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;
31/08/2016, 08h17
vttman

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/

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:

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:

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>

01/09/2016, 07h20
vttman

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
01/09/2016, 15h45
sandaff

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
01/09/2016, 18h01
vttman

Presque un an 8O !?

Citation:

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 ?

2 pièce(s) jointe(s)

Vous avez raison; quand j'ai testé uniquement avec le code css de la barre de navigation il s'est étendu sur toute la largeur càd la ligne de l'écran.
mais quand je rajoute le code css des autre bloc du site, il me donne l'écran en bas:
Pièce jointe 219394
donc quand je travaille le code, ça s'étend sur toute la largeur de l'écran.
Seulement dans tout les deux cas les éléments ne s'affiche pas comme il se dois.
voici comment ça s'affiche:
Pièce jointe 219395
Donc je donne le code css et html à nouveau si vous aviez des astuces le concernant:

Code:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
 
 
.row {
	width : 1308px;
 
	margin : 10px auto;
}
.container{
	margin-top :0px;
 
}
.row > div {
	float : left;
	margin : 0 10px;
}
 
 
.navbar {
    width : 1308px;
    height:300px;	
	display:inline-block;
	padding-top: 0px;
	margin-bottom: 0px;
	margin-left: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;
 
	border-color: transparent;
}*/
.w-1 { width : 109px; }
.w-2 { width : 218px; }
.w-3 {width : 327px; }
.w-4 { width : 436px;}
.w-5 { width : 545px; }
.w-6 { width : 654px;}
.w-7 {width : 763px; }
.w-8 { width : 872px; }
.w-9 { width : 981px; }
.w-10 { width : 1090px;}
.w-11 { width : 1199px;}
.w-12 { width : 1308px;}
 
.clear { clear : both ; }
 
 
.v2 > div .w-12{ 
    height:100px;	
	border:1px solid blue;	
	border-radius:5px;
	background-color:#f5f5f5;	
	color:red;
	position:relative;
	margin-bottom:0px;
	margin-left:80px;
 
}
.v3 >div .w-3 {  
    height:550px;	
	display:inline-block;
	border:1px solid blue;
    border-radius:5px;	
	background-color:#f5f5f5;
    position:left;
	margin-top:0px;
	margin-left:40px;
	padding-left:0px;
}
.v4 > div .w-8 { 
    height:550px;	
	border:1px solid blue;
    border-radius:5px;	
	background-color:#f5f5f5;
	background-position:right;
    position:absolute;	
	margin-left:-20px; 
	}
.v5  > div .w-11{
    height:50px;	
	display:inline-block;
	border:1px solid blue;	
	border-radius:5px;
    background:blue;
    font-family: 'Open Sans';
    font-weight: 300px;
	text-align:center;
	background-repeat:no-repeat;
    background-position:top;
    margin-left:40px;
    margin-top:0px;	
    position:relative;	 }
 
 
 
body {
  padding-top: 10px;
  background:rgb(56,7,47);
}
@media only screen and (min-width:500px) and (max-width:980px) {
	.row {
		width : 100%;
	}
	.row > div { 
		margin : 0 0.5%;
	}
	.w-1 { width : 7.3%; }
	.w-2 { width : 15.6%; }
	.w-3 { width : 24%; }
	.w-4 { width : 32.3%; }
	.w-5 { width : 40.6%; }
	.w-6 { width : 49%; }
	.w-7 { width : 57.3%; }
	.w-8 { width : 65.6%; }
	.w-9 { width : 74%; }
	.w-10 { width : 82.3%; }
	.w-11 { width : 90.6%; }
	.w-12 { width : 99%; }
 
 
	.navbar {
    width : 99%;
    height:300px;	
	display:inline-block;
	padding-top: 0%;
	margin-bottom: 0%;
	margin-left:0%;
 
 
}
 
.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;
}
 
 .v3 >div .w-3 {  
     width : 99%; 
	height:48.66%;	
	display:inline-block;
	border:1% solid blue;	
	background-color:#f5f5f5;
    position:left;
	margin-top:0%;
}
.v4 > div .w-8 { 99%; 
	height:48.66%;	
	border:1% solid blue;	
	background-color:#f5f5f5;
	background-position:right;
    position:absolute;	
	}
.v5  > div .w-11{width :99%
    height:48.66%;	
	display:inline-block;
	border:1% solid blue;	
    background:blue;
    font-family: 'Open Sans';
    font-weight:45%;
	text-align:center;
	background-repeat:no-repeat;
    background-position:top;
    margin-top:0%;	
	}
 
}	
 
@media only screen and (max-width:500px) {
	.row {
		width : 100%;
	}
	.row > div { 
		margin : 0 1%;		
	}
 
 
.navbar {
	min-height:48.6% ;
	padding-top: 0%;
	margin-bottom: 0%;
}
 
.navbar-brand {
	font-family: 'Raleway', sans-serif;
	font-weight: 900;
}
 
.navbar-header .navbar-brand {
	color: white;
}
 
.navbar-default .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: #384452;
	border-color: transparent;
}
	.w-1, .w-2, .w-3, .w-4, .w-5, .w-6, .w-7, .w-8, .w-9, .w-10, .w-11, .w-12 { 
		width : 98%; 
		float : none;
	}
}

html

Code:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="fr">
 
    <head>
 
        <meta charset="utf-8">
        <title>Mon site</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Connexion à mon site">
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <!-- ci-dessous notre fichier CSS -->
       <!-- *<link rel="stylesheet" type="text/css" href="/css/app.css" /> -->
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:400,700,300" />
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>		*
********<link rel="stylesheet" href="css/font-awesome.min.css">
      <!--  <link href="css/bootstrap.css" rel="stylesheet">-->
	  <title>Media Queries !</title>
       <link rel="stylesheet" media="screen" href="index.css" type="text/css" />
	   <link rel="stylesheet" media="tablette" href="index-tablette.css" type="text/css" />
	   <link rel="stylesheet" media="mobile" href="index-mobile.css" type="text/css" />
       <link rel="stylesheet" media="print" href="print.css" type="text/css" />
***
*****
    </head>
	<?php
      session_start();	  
	    $messages = array();
		$newmsg = array();
		$non_lu=false;
		require 'db.php';
		$num_personne=$_SESSION['num_personne'];
        $req = $db->query("SELECT* FROM message WHERE est_lu='".$non_lu."' && num_personne='".$num_personne."' ");
		 $msg = $req->fetchAll(PDO::FETCH_OBJ);
		while ($msg = $req->fetch()){        
        $newmsg = array(
            'num_message' => $msg['num_message'],
            'destinataire_message' => $msg['num_personne'],
            'recepteur_message' => $msg['recepteur_message'],
			'date_message'=> $msg['date_message'],
			'objet_message'=> $msg['objet_message'],
			'contenu_message'=> $msg['contenu_message']
        );
         }
      $messages[] = $newmsg; 
 
    ?>
	<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>
 
<!--<div class="row v2">
<div class="col-xs-12 col-sm-12 col-md-4-offset-1 col-lg-4-offset-1">  
<div class="w-12">   
    <div class="champ-rechercher "> 			 
            recherche
			</div>          
        </div>        
    </div>
	</div>  -->
	<div class="row v3">
	<div class="col-xs-12 col-sm-12 col-md-6-offset-1 col-lg-6-offset-1">
	<div class="w-3">  
     <div class="champ-publicité"> 			 
 
			publicité
 
    </div>
    </div>
	</div>	
</div>
<div class="row v4">
	<div class="col-xs-12 col-sm-12 col-md-6-offset-1 col-lg-6-offset-1">
	<div class="w-8">  
     <div class="champ-liste-abonnées"> 			 
 
			abonnées
    *<?php
          include('affiche_connecte.php');
	     ?>		*
    </div>
    </div>
	</div>	
</div>
<div class="row v5">
	<div class="col-xs-12 col-sm-12 col-md-6-offset-1 col-lg-6-offset-1">
	<div class="w-11">  
     <div class="pied-page"> 			 
 
		pied-page	
 
    </div>
    </div>
	</div>	
</div>
</div>
 
 
    </body>
</html>

merci pour tout!

02/09/2016, 11h05
Invité
Bonjour,

pour pouvoir tester, il nous faut le code HTML généré (sans PHP) -> "code source" ("Ctrl"+"U")

Cela dit, il semble que le problème vienne de TES fichiers CSS :
Code:

1 2 <link rel="stylesheet" media="tablette" href="index-tablette.css" type="text/css" /> <link rel="stylesheet" media="mobile" href="index-mobile.css" type="text/css" />
02/09/2016, 16h03
sandaff
mais vous avez le code css en haut.
ce que vous voyez
Code:

1 2 <link rel="stylesheet" media="tablette" href="index-tablette.css" type="text/css" /> <link rel="stylesheet" media="mobile" href="index-mobile.css" type="text/css" />
sont ramenés sans différence dans

Code:

<link rel="stylesheet" media="screen" href="index.css" type="text/css" />

donc le problème n'est pas là-bà.
02/09/2016, 17h35
Invité
Le code que tu fournis ne permet pas :
- de TESTER (PAS de PHP !! Uniuqment le code HTML généré)
- de reproduire la copie d'écran

si j'ai bien compris voici le code html:

Code:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="fr">
 
    <head>
 
        <meta charset="utf-8">
        <title>Mon site</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Connexion à mon site">
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <!-- ci-dessous notre fichier CSS -->
       <!--  <link rel="stylesheet" type="text/css" href="/css/app.css" /> -->
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:400,700,300" />
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>		 
        <link rel="stylesheet" href="css/font-awesome.min.css">
      <!--  <link href="css/bootstrap.css" rel="stylesheet">-->
	  <title>Media Queries !</title>
       <link rel="stylesheet" media="screen" href="index.css" type="text/css" />
 
       <link rel="stylesheet" media="print" href="print.css" type="text/css" />
 
 
    </head>
		<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>
						1/8       Bonjour  sandaff!<br/> 
	  <a href='images/photo/99_daf3.jpg'><img src='images/photominiature/99_daf3.jpg'></a>     
                    </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> 
                                                                    <!-- Si il y a au moins 1 msg on affiche le badge -->
                                    <span class="badge">1)</span>
                                                                <!-- 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>
 
<!--<div class="row v2">
<div class="col-xs-12 col-sm-12 col-md-4-offset-1 col-lg-4-offset-1">  
<div class="w-12">   
    <div class="champ-rechercher "> 			 
            recherche
			</div>          
        </div>        
    </div>
	</div>  -->
	<div class="row v3">
	<div class="col-xs-12 col-sm-12 col-md-6-offset-1 col-lg-6-offset-1">
	<div class="w-3">  
     <div class="champ-publicité"> 			 
 
			publicité
 
    </div>
    </div>
	</div>	
</div>
<div class="row v4">
	<div class="col-xs-12 col-sm-12 col-md-6-offset-1 col-lg-6-offset-1">
	<div class="w-8">  
     <div class="champ-liste-abonnées"> 			 
 
			abonnées
     	  <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
 
    </head>
    <body>	
    		<div class="bloc_photo">	
 
            <br/>
	   <a href='images/photo/99_daf3.jpg'><img src='images/photominiature/99_daf3.jpg'></a> <br/>
	  <a href='images/logo/99_DSC_0000008.jpg'><img src='images/miniature/99_DSC_0000008.jpg'></a>    
		   </div>	
 
     </body>
    </html>
 
    </div>
    </div>
	</div>	
</div>
<div class="row v5">
	<div class="col-xs-12 col-sm-12 col-md-6-offset-1 col-lg-6-offset-1">
	<div class="w-11">  
     <div class="pied-page"> 			 
 
		pied-page	
 
    </div>
    </div>
	</div>	
</div>
</div>
 
 
    </body>
</html>

05/09/2016, 16h38
sandaff

Bonjour;
S'il y en a qui suivent ma discutions, je veux vous expliquer une remarque pertinent;
quand vous dites col-lg-4 en bootstrap, cela veut dire occuper 4 colonnes sur un écran large;col-xl-12, veut dire occuper 12 colonnes sur un mobile.
alors si vous exécutez mon code et dans css vous mettez border:1px solid black;vous enlevez tout les autre codes car les media querry son inclus dans bootstrap.
vous verrez que la colonne occupe toute les 12 colonnes alors qu'il devrait prendre 4 sur un écran large.
ce qui veux dire que le bootstrap ne s’exécute pas ou qu'il y a une ou des lignes qui manque dans l'en tête.
le dropdown qui permet d’exécuter le menu déroulant aussi ne fait rien.
est ce le lien java script qui se charge de ça est bien dans mon en tête?
surtout c'est à cause de ce menu déroulant que je suis accro à bootstrap sinon comprenant le fonctionnement des media querry j’aurai bouder cet bootstrap il y a long temps.
si quelqu'un sait comment faire le menu déroulant sans bootstrap c'est l’occasion de se manifester.
merci;
05/09/2016, 18h41
Invité

Bonjour,

voilà le rendu que j'ai (avec ton code, tel quel) : http://codepen.io/jreaux62/pen/xEbPzX
C'est différent de ta copie d'écran.

A savoir qu'il manque le code de index.css.
05/09/2016, 20h14
sandaff

Oui je vois bien que ça s'est bien aligner. seulement nous ne travaillons pas dans un même environnement.
Je vois bien un site spécial pour l'exécution de vos code, alors que moi je travail avec notepad++ et wampserver.
J'ai copié ce que vous aviez exécuté chez vous et enregistrer sous un autre nom ici puis l'exécuté il me donne toujours mon anciens écran sauf la partie d'en bas qui n'est pas dans le cadre car j'ai supprimé le code css.
J'aimerai que vous l'exécutiez comme moi et voir le résultat.
merci pour l'aide précieux que vous m'apportiez! et en espérant vous lire tôt.

J'ai extrais ces quelques lignes de ton code
Code:

1 2 3 <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
leur point commun est qu'il n'y a pas de référence à un protocople (htp:, https:, file: ...) dans leur url ce qui signifie que les liens utilisent le protocole de ta page, donc peu de chance qu'ils soient chargés, regarde ta console « onglet Réseau ».

06/09/2016, 22h35
sandaff

Bonsoir;
je vois que vous indexez le problème réel maintenant;
dans ma page de connexion et page inscription, quand je faisais des modifications ça ne s'appliquait pas sauf quand j’éteins la machine et redémarre après une heure que je voie la modification.
maintenant que vous parlez d'une théorie de protocole, je voudrais que vous m'aidez à corriger les liens pour qu'il aient la référence aux protocoles (htp:, https:, file: ...).
car je ne comprends pas ce que vous êtes entrain de me dire à moins que vous ne m'expliquez d'avantage.
merci beaucoup;
11/09/2016, 11h18
NoSmoking

Citation:

je vois que vous indexez le problème réel maintenant;

:koi:

Citation:

dans ma page de connexion et page inscription, quand je faisais des modifications ça ne s'appliquait pas sauf quand j’éteins la machine et redémarre après une heure que je voie la modification.

visiblement un problème de cache.

Citation:

maintenant que vous parlez d'une théorie de protocole, je voudrais que vous m'aidez à corriger les liens pour qu'il aient la référence aux protocoles (htp:, https:, file: ...).

qu'ont donné tes recherches sur le sujet ?
12/09/2016, 00h11
sandaff

ok merci!
je suis sur une nouvelle version 4.0.0 qui a marché, seulement le css n'a pas marché d'abord dû à mon insuffisance en css.