IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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

Mise en page CSS Discussion :

[BootStrap] code css de la barre de menu


Sujet :

Framework CSS Bootstrap

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut [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;

  2. #2
    Membre émérite Avatar de vttman
    Homme Profil pro
    Développeur "couteau mosellan"
    Inscrit en
    Décembre 2002
    Messages
    1 140
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur "couteau mosellan"
    Secteur : Industrie

    Informations forums :
    Inscription : Décembre 2002
    Messages : 1 140
    Points : 2 286
    Points
    2 286
    Par défaut
    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/
    Emérite, émérite je ne pense pas ... plutôt dans le développement depuis FORT FORT longtemps, c'est mon job, ça oui
    A part ça ... Il ne pleut jamais en Moselle !

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    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>

  4. #4
    Membre émérite Avatar de vttman
    Homme Profil pro
    Développeur "couteau mosellan"
    Inscrit en
    Décembre 2002
    Messages
    1 140
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur "couteau mosellan"
    Secteur : Industrie

    Informations forums :
    Inscription : Décembre 2002
    Messages : 1 140
    Points : 2 286
    Points
    2 286
    Par défaut
    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
    Emérite, émérite je ne pense pas ... plutôt dans le développement depuis FORT FORT longtemps, c'est mon job, ça oui
    A part ça ... Il ne pleut jamais en Moselle !

  5. #5
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    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

  6. #6
    Membre émérite Avatar de vttman
    Homme Profil pro
    Développeur "couteau mosellan"
    Inscrit en
    Décembre 2002
    Messages
    1 140
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur "couteau mosellan"
    Secteur : Industrie

    Informations forums :
    Inscription : Décembre 2002
    Messages : 1 140
    Points : 2 286
    Points
    2 286
    Par défaut
    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 ?
    Emérite, émérite je ne pense pas ... plutôt dans le développement depuis FORT FORT longtemps, c'est mon job, ça oui
    A part ça ... Il ne pleut jamais en Moselle !

  7. #7
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    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:
    Nom : develop.png
Affichages : 1756
Taille : 187,9 Ko
    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:
    Nom : develop1.png
Affichages : 1609
Taille : 186,9 Ko
    Donc je donne le code css et html à nouveau si vous aviez des astuces le concernant:
    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
    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 : 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
    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!

  8. #8
    Invité
    Invité(e)
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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" />

  9. #9
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    mais vous avez le code css en haut.
    ce que vous voyez
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <link rel="stylesheet" media="screen" href="index.css" type="text/css" />
    donc le problème n'est pas là-bà.

  10. #10
    Invité
    Invité(e)
    Par défaut
    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

  11. #11
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    si j'ai bien compris voici le code html:
    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
    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>

  12. #12
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    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;

  13. #13
    Invité
    Invité(e)
    Par défaut
    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.

  14. #14
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    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.

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    J'ai extrais ces quelques lignes de ton code
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ».

  16. #16
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    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;

  17. #17
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.
    visiblement un problème de cache.

    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 ?

  18. #18
    Nouveau Candidat au Club
    Homme Profil pro
    Développeur Java
    Inscrit en
    Avril 2015
    Messages
    405
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Guinée

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Avril 2015
    Messages : 405
    Points : 0
    Points
    0
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 03/12/2008, 13h12
  2. problème dans un code css
    Par tenderstoune dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 15/06/2007, 23h31
  3. Réponses: 11
    Dernier message: 25/05/2007, 13h30
  4. Problème avec code CSS
    Par jpduches dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 06/06/2006, 11h02

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