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 :

Maquette de ma page envois de messages


Sujet :

CSS

  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 Maquette de ma page envois de messages
    Bonsoir tout le monde;

    Pardons, les patrons de css, aidez moi à mettre en forme ma page envoi de message;
    Quant à ma page d'accueil, Je travaille avec bootstrap mais je sais pas configurer mon navigateur; parfois ma page accueil affiche correctement; parfois ça lasse et il affiche n'importe comment;
    Si vous m'aidez sur cette page: je veux avoir une marge gauche et droite de couleur: background:rgb(56,7,47); et l'interieur de la page est de couleur: background-color: lightyellow;
    Ainsi je veux encadrer la photo de profil(première photo en haut) et les photos du propriétaire du message à coté de chaque message;
    -En résumé vous faite votre maquette qui corresponde avec mon code je n'ai pas d'exigence; pour vue que je trouve mon chemin afin que je modifie après.
    -J'ai même pensé aussi à une sorte de page ou chaque correspondant avec la personne connecté s'affiche sur une même page et s'il veux répondre à un correspondant et qu'il clic sur répondre;le champ de saisie de message se déroule en bas de ce message sans avoir un chargement de la page dans la barre d'adresse;
    je m'excuse à l'avance pour des critiques des pro qui vont pensé qu'on va me donner un poison au lieu d'apprendre à pêcher;mais il y a un adage qui dit que la meilleur façon d'apprendre est de copié;j'ai fournie assez d'effort voyant mon code et je veux copier un peu pour trouver mon chemin.
    merci d'avance!
    voici mon 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
    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
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
            <title>Nouveau MP</title>
        </head>
        <body>
     
    <?php
    session_start();
    // j'ai inclus mon fichier avec la connexion à la base de donnée
    require 'db.php';
     
     
    if(isset($_GET['num_personne']))
    {
     
       // $emeteur_message = $_SESSION['num_personne']; 
    	$_SESSION['recepteur_message']=$_GET['num_personne'];     
          //echo $_SESSION['num_personne'];   
         //echo $_GET['num_personne'];
       }
       //header('Location: message_private.php');	
      // echo  $_GET['num_personne'];
    	$date1=date("Y-m-d H:i:s");
    	$non_lu=0;
    	$lu=1;
    // je controle la difference de message envoyé(s) par une les deux personnes pour determiner la difference du nombre de message emis entre les deux.
    // si la difference depasse 3 celui qui a envoyer plus de message doit attendre que l'autre lui repond à au moin un message 
    $req = $db->query('SELECT 
      count(*) as cpt1 
    FROM 
       message_envoye
    WHERE    
        message_envoye.num_personne = "'.$_SESSION['num_personne'].'" 
        AND  message_envoye.recepteur_message = "'.$_SESSION['recepteur_message'].'"
      ');
       $data = $req->fetch();
        $cpt1 = $data['cpt1'];
     
      $req = $db->query('SELECT 
      count(*) as cpt2
    FROM 
        message_recu
    WHERE 
     
        message_recu.emeteur_message = "'.$_SESSION['recepteur_message'].'"
        AND  message_recu.num_personne = "'.$_SESSION['num_personne'].'" 
     ');
      $data = $req->fetch();
        $cpt2 = $data['cpt2'];
    	$cpt=$cpt1-$cpt2;
     
    	// je commence par afficher la photo de profil de la personne.
    	  $req = $db->prepare('SELECT* FROM personne WHERE num_personne= :num_personne');
          $req->execute(array(
          'num_personne' => $_SESSION['num_personne']));	// l'id de la pesonne sur la photo.			  
    	  while ($donnees = $req->fetch())
     
          { 
    	   echo "<a href='images/photo/".$donnees['num_personne' ]."_".$donnees['photo_personne']."'><img src='images/photominiature/". $donnees['num_personne']."_".$donnees['photo_personne']."'></a>";
              }
    	// affiche les messages non lu
    	?>
     <h3>Messages priv&eacute(s) non lu:</h3>	
      <?php
     
     
    	$rep1 = $db->query('SELECT * FROM message_recu where (num_personne="'.$_SESSION['num_personne'].'") and (emeteur_message="'.$_SESSION['recepteur_message'].'") and (est_lu="'.$lu.'") ');
       while ($donnees = $rep1->fetch())
       {  // je creer une copie de message recu dans cette table
       $req1 = $db->prepare('INSERT INTO message_copie1(num_message,date_message,object_message,contenu_message,emeteur_message,num_personne) VALUES(:num_message,:date_message,:object_message,:contenu_message,:emeteur_message,:num_personne,:est_lu) WHERE est_lu="'.$lu.'"');
            $req1->execute(array(
    		'num_message'=> $donnees['num_message'],
    		'date_message' =>$donnees['date_message'],
    		'object_message' =>$donnees['object_message'],
    		'contenu_message'=> $donnees['contenu_message'],		
    		'emeteur_message'=> $donnees['emeteur_message'],
    		'recepteur_message'=> $donnees['recepteur_message'],
    		 'num_personne'=>$donnees['num_personne']
     
    		));	
       }
       $rep2 = $db->query('SELECT * FROM message_envoye where (num_personne="'.$_SESSION['num_personne'].'") and (recepteur_message="'.$_SESSION['recepteur_message'].'") ');
        while ($donnees = $rep2->fetch())
       {  // je creer une copie de message envoyer dans cette table
       $req2 = $db->prepare('INSERT INTO message_copie1(num_message,date_message,object_message,contenu_message,recepteur_message,num_personne) VALUES(:num_message,:date_message,:object_message,:contenu_message,:recepteur_message,:num_personne)');
            $req2->execute(array(
    		'num_message'=> $donnees['num_message'],
    		'date_message' =>$donnees['date_message'],
    		'object_message' =>$donnees['object_message'],
    		'contenu_message'=> $donnees['contenu_message'],		
    		'recepteur_message'=> $donnees['recepteur_message'],
    		 'num_personne'=>$donnees['num_personne']         	 
    		));		
       }
    	//$req3 = $db->query('SELECT * FROM personne,message_copie1 where personne.num_personne = message_copie1.num_personne AND(((num_personne="'.$_SESSION['num_personne'].'") AND (emeteur_message="'.$_SESSION['recepteur_message'].'"))OR ((num_personne="'.$_SESSION['num_personne'].'") AND (recepteur_message="'.$_SESSION['recepteur_message'].'")))ORDER BY 
       //date_message ASC');
       // req3 permet d'afficher les messages envoyés et reçu(mais dejà lu) c'est pour quoi j'ai fait une fusion des deux tables dans message_copie1 
       $req3 = $db->query('SELECT * FROM message_copie1 where (((num_personne="'.$_SESSION['num_personne'].'") AND (emeteur_message="'.$_SESSION['recepteur_message'].'"))OR ((num_personne="'.$_SESSION['num_personne'].'") AND (recepteur_message="'.$_SESSION['recepteur_message'].'")))ORDER BY 
       date_message ASC');
     
    	// rep permet d'afficher les messages lu
    	$rep = $db->query('SELECT * FROM message_recu where (num_personne="'.$_SESSION['num_personne'].'") and (emeteur_message="'.$_SESSION['recepteur_message'].'") and (est_lu="'.$non_lu.'") ');
        while ($donnees = $rep->fetch())
     
          {  
    ?>
       <?php			
    	// echo "<a href='images/photo/".$donnees['num_personne']."_".$donnees['photo_personne']."'><img src='images/photominiature/".$donnees['num_personne']."_".$donnees['photo_personne']."'></a>"; 
       ?></Br>     
       <strong>Emeteur</strong>:</p><?php echo $donnees['emeteur_message'];?></Br>    
       <strong>object</strong>:</p><?php echo $donnees['object_message'];?></Br>
       <strong>contenu</strong>:</p><?php echo $donnees['contenu_message'];?></Br>
       <strong>date</strong>:</p><?php echo $donnees['date_message'];?></Br> 
        <?php
    	$ID_user=$donnees['num_message'];	
        echo "<a href='message_private.php?num_message=" . $ID_user . "'>Supprimer</a>"; 
    	// apres avoir lire je modifie pour mettre la lecture à 1;cette message devient un message lu.
    	$mmd = $db->prepare('UPDATE message_recu SET est_lu=:est_lu WHERE num_message = :num_message');
        $mmd->execute(array(
    	'est_lu'=> $lu,
    	'num_message' => $ID_user	
    	));  	
         ?></Br> 
       <?php
       }
       // affiche les messages lu
       ?>
     <h3>Messages priv&eacute(s) lu:</h3>	
      <?php
    	while ($donnees = $req3->fetch())
     
          {  
    ?>
       <?php			
    	 //      echo "<a href='images/photo/".$donnees['num_personne']."_".$donnees['photo_personne']."'><img src='images/photominiature/".$donnees['num_personne']."_".$donnees['photo_personne']."'></a>"; 
        ?>           
       <strong>num_personne</strong>:</p><?php echo $donnees['num_personne'];?></Br>    
       <strong>object</strong>:</p><?php echo $donnees['object_message'];?></Br>
       <strong>contenu</strong>:</p><?php echo $donnees['contenu_message'];?></Br>
       <strong>date</strong>:</p><?php echo $donnees['date_message'];?></Br> 
        <?php	
    	$ID_user=$donnees['num_message'];
    	$ID_user1=$donnees['emeteur_message'];
    	$ID_user2=$donnees['recepteur_message'];
    	echo "<a href='message_private.php?num_message=" . $ID_user . "&&emeteur_message=" . $ID_user1 . "&&recepteur_message=" . $ID_user2 . "'>Supprimer</a>";
       /* $mmd = $db->prepare('UPDATE message_recu SET est_lu=:est_lu WHERE num_message = :num_message');
        $mmd->execute(array(
    	'est_lu'=> $lu,
    	'num_message' => $ID_user	
    	));  	*/
         ?></Br> 
       <?php
       }
       // je supprime les enregistrements de la table copié.
        $rd1 = $db->prepare('DELETE FROM message_copie1 where (((num_personne=:num_personne) AND (emeteur_message=:emeteur_message))OR ((num_personne=:num_personne) AND (recepteur_message=:recepteur_message)))');
         $rd1->execute(array(
    	 'num_personne' => $_SESSION['num_personne'],
        'emeteur_message' => $_SESSION['recepteur_message'],
    	'num_personne' => $_SESSION['num_personne'],
    	'recepteur_message' => $_SESSION['recepteur_message']
    	));  
     
    //On verifie si le formulaire a ete valide pour insserrer le message à envoyer
    if(isset($_POST['object_message'])&&isset( $_POST['contenu_message']))
    {
            //On verifie si tout les champs ont ete remplis
            if($_POST['object_message']!='' and $_POST['contenu_message']!='')
            {
    		if ($cpt>3)		
    	  echo 'vous aviez trois messages de plus differences que ce correspondant(s); il faut qu\'il repond au moins un message pour continuer';
          // si les deux identiants des deux correspondants sont identiques il ne dois  pas envois de message car c'est une personne qui veux envoyer un message à lui même.
    	  else if($_SESSION['recepteur_message']!=$_SESSION['num_personne'])
     
    	  {
    	  // insere le message dans message
    	         $req = $db->prepare('INSERT INTO message(date_message,object_message,contenu_message,recepteur_message,num_personne) VALUES(:date_message,:object_message,:contenu_message, :recepteur_message,:num_personne)');
        $req->execute(array(
    	'date_message'=>$date1,
    	'object_message' => $_POST['object_message'], 
    	'contenu_message' => $_POST['contenu_message'], 
    	'recepteur_message' => $_SESSION['recepteur_message'],
    	'num_personne' =>$_SESSION['num_personne'] // l'id de la pesonne sur la photo.		
    			));
    			// rcupere la derniere id
    			//$a = array_shift($req->query('SELECT MAX(num_message) FROM message')->fetch(PDO::FETCH_ROW));
    			$a = $db->lastInsertId();
    			 // recopie le message dans message envoyé
    		$req = $db->prepare('INSERT INTO message_envoye(num_message,date_message,object_message,contenu_message,recepteur_message,num_personne) VALUES(:num_message,:date_message,:object_message,:contenu_message, :recepteur_message,:num_personne)');
        $req->execute(array(
    	'num_message'=>$a,
    	'date_message'=>$date1,
    	'object_message' => $_POST['object_message'], 
    	'contenu_message' => $_POST['contenu_message'], 
    	'recepteur_message' => $_SESSION['recepteur_message'],
    	'num_personne' =>$_SESSION['num_personne'] // l'id de la pesonne sur la photo.		
    			));
    			 // recopie le message dans message reçu
    		$req = $db->prepare('INSERT INTO message_recu(num_message,date_message,object_message,contenu_message,emeteur_message,num_personne) VALUES(:num_message,:date_message,:object_message,:contenu_message, :emeteur_message,:num_personne)');
        $req->execute(array(
    	'num_message'=>$a,
    	'date_message'=>$date1,
    	'object_message' => $_POST['object_message'], 
    	'contenu_message' => $_POST['contenu_message'], 
    	'emeteur_message' =>$_SESSION['num_personne'] ,
    	'num_personne' =>$_SESSION['recepteur_message']  // l'id de la pesonne sur la photo.		
    			));
     
    	  echo 'Votre message a été transféré';
    		 }
            }
            else
            {
                    //Sinon on dit qu'un champ nest pas rempli
                    echo 'Un des champs Objet ou Message n\'est pas rempli.';
            }
    }
     
     
    //On affiche le formulaire
    ?>
    <div class="content">
            <h1>Nouveau message priv&eacute;</h1>
        <form action="message_private.php" method="post">
                    Message priv&eacute. <br />
     
    		<label for="object_message">Object:</label>
    		<input type="text" name="object_message" id="object_message" autofocus /><br/>
    		<label for="contenu_message">Votre message:</label>
    		<textarea name="contenu_message" id="contenu_message" rows="10" cols="50" autofocus>Saisir un texte ici.</textarea><br/>
            <input type="submit" value="Envoyer" />
        </form>
    </div>
    <?php
     
    ?>
     <!-- <td><a href="delete.php?id=<?php// echo $data->$_SESSION['recepteur_message']; ?>">Suppprimer</a></td> -->
     
     <?php
     echo 'num_message:'.$_GET['num_message'];
     echo 'emeteur_message:'.$_GET['emeteur_message'];
     echo 'recepteur_message:' .$_GET['recepteur_message'];
       if (isset($_GET['num_message'])&&isset($_GET['emeteur_message'])&&isset($_GET['recepteur_message'])&&($_GET['num_message']!='')&&($_GET['emeteur_message']!='')&&($_GET['recepteur_message']!=''))
     { $id1 = $_GET['num_message'];
      $id2 = $_GET['emeteur_message'];
      $id3 = $_GET['recepteur_message'];
      echo'ddd:' .$id1;
      echo 'bbb:' .$id2;
      echo 'ccc:' .$id3;
         //Requete SQL pour supprimer le contact dans la base
         //'DELETE FROM message_recu WHERE num_message=".$id1."';
    	 if( $id2==0)
    	 {
    $rd = $db->prepare('DELETE FROM message_envoye WHERE num_message = :num_message');
    $rd->execute(array(
    	'num_message' => $id1	
    	));    
    //header('Location:message_private.php');
    } 
    else if( $id3==0)
    {
    $rd = $db->prepare('DELETE FROM message_recu WHERE num_message = :num_message');
    $rd->execute(array(
    	'num_message' => $id1	
    	));    
    //header('Location:message_private.php');
    }
    //header('Location: message_private.php');	
    }
    else if ($_SESSION['num_message']!='')
    {
     
         //Tu recuperes l'id du contact
         $id1 = $_SESSION['num_message'];
         //Requete SQL pour supprimer le contact dans la base
         //'DELETE FROM message_recu WHERE num_message=".$id1."';
     
    $rd = $db->prepare('DELETE FROM message_recu WHERE num_message = :num_message');
    $rd->execute(array(
    	'num_message' => $id1	
    	));    
    //header('Location: message_private.php');	
    }
    ?>
     
     
            </body>
    </html>

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1/ ton message est trop compliqué à lire.
    Pose 1seule question à la fois. Simple et sans blabla.

    2/ personne ne va écrire le code à ta place.
    Par contre, on veut bien t'aider à le corriger

    3/ ici, c'est le forum CSS.
    Pour pouvoir tester, il faut montrer le code HTML généré (sans PHP).

    4/ enfin, une copie d'écran peut nous aider à visualiser.

    Remplis ces conditions, et tu auras des réponses.

  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
    Merci Monsieur jreaux62
    Voici la copie d'écran: la première photo est la photo du profil de l'utilisateur connecté.
    Nom : Sans titre.png
Affichages : 239
Taille : 130,0 Ko
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     
            <title>Nouveau MP</title>
        </head>
        <body>
     
    <a href='images/photo/116_'><img src='images/photominiature/116_'></a> <h3>Messages priv&eacute(s) non lu:</h3>	
       <h3>Messages priv&eacute(s) lu:</h3>	
         <a href='images/photo/0_'><img src='images/photominiature/0_'></a> 
        <strong>num_personne</strong>:</p>116</Br>    
       <strong>object</strong>:</p>slt</Br>
       <strong>contenu</strong>:</p>Saisir un texte ici.</Br>
       <strong>date</strong>:</p>2016-12-08 18:03:14</Br> 
        <a href='message_private.php?num_message=15&&emeteur_message=0&&recepteur_message=117'>Supprimer</a></Br> 
          <a href='images/photo/0_'><img src='images/photominiature/0_'></a> 
        <strong>num_personne</strong>:</p>116</Br>    
       <strong>object</strong>:</p>demande</Br>
       <strong>contenu</strong>:</p>Saisir un texte ici.</Br>
       <strong>date</strong>:</p>2016-12-08 18:03:59</Br> 
        <a href='message_private.php?num_message=16&&emeteur_message=0&&recepteur_message=117'>Supprimer</a></Br> 
       <div class="content">
            <h1>Nouveau message priv&eacute;</h1>
        <form action="message_private.php" method="post">
                    Message priv&eacute. <br />
     
    		<label for="object_message">Object:</label>
    		<input type="text" name="object_message" id="object_message" autofocus /><br/>
    		<label for="contenu_message">Votre message:</label>
    		<textarea name="contenu_message" id="contenu_message" rows="10" cols="50" autofocus>Saisir un texte ici.</textarea><br/>
            <input type="submit" value="Envoyer" />
        </form>
    </div>
     <!-- <td><a href="delete.php?id=<?php// echo $data->$_SESSION['recepteur_message']; ?>">Suppprimer</a></td> -->
     
     ddd:17bbb:0ccc:117
     
            </body>
    </html>
    merci d'avance!

  4. #4
    Membre du Club
    Homme Profil pro
    Autodidacte
    Inscrit en
    Octobre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Octobre 2015
    Messages : 44
    Points : 59
    Points
    59
    Par défaut
    Vous pouvez attribuer la couleur des marges au html body.
    Ensuite ajouter une div principale qui contient l'ensemble de la page, lui donner la largeur voulue et la centrer.

    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
     
    <html>
    <head>
     
    <style>
    html, body { backgound-color: lightblue; }
     
    #wrap { 
           position: relative;
           margin: auto 0;
           width: 95%; 
           background-color: lightyellow;
    }
    </style>
    </head>
     
    <body>
    <div id="wrap">
     
    </div>
    </body>
    </html>

  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
    Merci Monsieur Cyberdome car ça ma permis de progresser d'un pas;
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #wrap { 
           position: relative;
           margin: auto 0;
           width: 95%; 
           background-color: lightyellow;
    }
    cette partie marche bien;
    mais quant à
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     html, body {
        backgound-color: lightblue;
    }
    la marge reste toujours à la couleur blanche;
    est ce que ça ne manque pas quelle que chose?

  6. #6
    Membre du Club
    Homme Profil pro
    Autodidacte
    Inscrit en
    Octobre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Octobre 2015
    Messages : 44
    Points : 59
    Points
    59
    Par défaut
    Ah si, pardon, il manque un r à background

  7. #7
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    il te faut au moins apprendre les bases de CSS :


  8. #8
    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
    Merci pour le cours; j'ai compris les positionnement des éléments;
    mais toujours j'ai des difficultés par rapport au encadrement des photo et la mise en forme de l'affichage du message;
    et la configuration de bootstrap avec ma page accueil qui est different de la page que je vous ai montré( déjà publié dans d'autres discutions sans solution) car sur ma page d'accueil le styl css que j'ai créer ne s'affiche pas ; la barre de menu est en bleu chez moi;mais il m'affiche une autre couleur; les menu tel que publication;message,...... ne sont pas bien alignés.
    et cella est du au css du bootstrap; l'encadrement du photo ne marche pas car la photo sort hors du cadre et ne sont pas ajustés comme on le vois dans d'autre site;
    merci en tout cas;

  9. #9
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Citation Envoyé par jreaux62 Voir le message
    2/ personne ne va écrire le code à ta place.
    Par contre, on veut bien t'aider à le corriger
    Merci de montrer le code que tu as écrit.

  10. #10
    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 jreaux62;
    vraiment je n'ai rien trouvé comme code sur ma page d'envois de message; je ne suis pas performant en css d'abord; il me faut des exemples comme ça été en php il y a un moment;aujourd'hui c'est moi qui écrit la plupart de mes codes en php.

    Par contre je vous publi mes tentatives sur ma page d'accueil:
    noter que le contenu du pied de page ne s'affiche page;je crois que c'est sortie hors cadre. ensuite la barre des menu le élélments tel que:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <li>
                                        <a href='inbox.php'>Voir les publications recus</a>
                                    </li>
                                    <li>
                                        <a href="wrotemsg.php">Voir mes publications envoyés</a>
                                    </li>
    ne sont pas bien alignés; idem que ça aussi:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <li>
                                <a href='index.php'>Accueil</a>
                            </li>
    						<li>
                                <a href='abonement.php'>Abonnement</a>
                            </li>
    						<li class="photo">
    						    <a href='profil.php'> 1/6       Bonjour  codor!                                    <img src="images/daf14.JPG" alt="photo" id="photo" />
                                        						    </a>	
    					   </li>
    les photos ne sont pas bien encadrés et ça sort hors cadre;ensuite l'affichage du profil déborde la page avec melange d'information de profil 1 et profil 2; la barre de menu prend une autre couleur et non la couleur bleu prévu;
    Donc merci pour votre aide
    le code html et css est en bas:

    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
    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
    <!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">
     
    		<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
     
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></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="index2.css" type="text/css" />
     
           <link rel="stylesheet" media="print" href="print.css" type="text/css" />
     
     
        </head>
    		<body role="document">	
    	<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='abonement.php'>Abonnement</a>
                            </li>
    						<li class="photo">
    						    <a href='profil.php'> 1/6       Bonjour  codor!                                    <img src="images/daf14.JPG" alt="photo" id="photo" />
                                        						    </a>	
    					   </li>
                        </ul>
    						<ul class="nav navbar-nav navbar-midle">
     
     
    						    <!-- Menu déroulant -->
                           <li class="dropdown">
                                <a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" href='publication_reçu.php'>
                                    <!-- Premier niveau -->
                                    <i class="fa fa-envelope"> Publication(</i> 
                                                                    <!-- Petite icone pour le dropdown 
                                    <span class="caret"></span> -->
                                </a>
                                <!-- Sous niveaux -->
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href='inbox.php'>Voir les publications recus</a>
                                    </li>
                                    <li>
                                        <a href="wrotemsg.php">Voir mes publications envoyés</a>
                                    </li>
     
                                </ul>
                            </li>
    					</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> 
                                                                    <!-- 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 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">  
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 light-yellow1">  
        <header > 
    	Entete ou champs de recherche. 
       <!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="form-recherche.css" type="text/css" />
     
        </head>
    <body>
    <form action="recherche.php" method="post"> 
    <div class="form-group">
         <input name="pseudo" placeholder="Identifiant" type="text" id="pseudo" /><br/>
     
    </div>
    <div class="form-group">
         <label for="continent">Continent</label><br/>
         <select name="continent" id="continent" type="text" autofocus><br/> 
    	 <option value="aucun">Aucun</option>
    <optgroup>Europe</optgroup><optgroup>Afrique</optgroup><option value="Afrique">Afrique</option><optgroup>Am�rique</optgroup><option value="Am�rique">Am�rique</option><optgroup>Asie</optgroup><option value="Asie">Asie</option><optgroup>Europe</optgroup><option value="Europe">Europe</option><optgroup>Oc�anie</optgroup><option value="Oc�anie">Oc�anie</option></select> 
    </div>
     
    <div class="form-group">
     
         <label for="pays_personne">Pays</label><br/>
         <select name="pays_personne" id="pays_personne" type="text" autofocus><br/> 
    	 <option value="aucun">Aucun</option> 
    <optgroup>Europe</optgroup><optgroup>Afrique du Sud</optgroup><option value="Afrique du Sud">Afrique du Sud</option><optgroup>Alg�rie</optgroup><option value="Alg�rie">Alg�rie</option><optgroup>Angola</optgroup><option value="Angola">Angola</option><optgroup>B�nin</optgroup><option value="B�nin">B�nin</option><optgroup>Botswana</optgroup><option value="Botswana">Botswana</option><optgroup>Burkina Faso</optgroup><option value="Burkina Faso">Burkina Faso</option><optgroup>Burundi</optgroup><option value="Burundi">Burundi</option><optgroup>Cameroun</optgroup><option value="Cameroun">Cameroun</option><optgroup>Cap-Vert</optgroup><option value="Cap-Vert">Cap-Vert</option><optgroup>Comores</optgroup><option value="Comores">Comores</option><optgroup>C�te d�Ivoire</optgroup><option value="C�te d�Ivoire">C�te d�Ivoire</option><optgroup>Djibouti</optgroup><option value="Djibouti">Djibouti</option><optgroup>�gypte</optgroup><option value="�gypte">�gypte</option><optgroup>�rythr�e</optgroup><option value="�rythr�e">�rythr�e</option><optgroup>�thiopie</optgroup><option value="�thiopie">�thiopie</option><optgroup>Gabon</optgroup><option value="Gabon">Gabon</option><optgroup>Gambie</optgroup><option value="Gambie">Gambie</option><optgroup>Ghana</optgroup><option value="Ghana">Ghana</option><optgroup>Guin�e</optgroup><option value="Guin�e">Guin�e</option><optgroup>Guin�e �quatoriale</optgroup><option value="Guin�e �quatoriale">Guin�e �quatoriale</option><optgroup>Guin�e-Bissau</optgroup><option value="Guin�e-Bissau">Guin�e-Bissau</option><optgroup>Kenya</optgroup><option value="Kenya">Kenya</option><optgroup>Lesotho</optgroup><option value="Lesotho">Lesotho</option><optgroup>Liberia</optgroup><option value="Liberia">Liberia</option><optgroup>Libye</optgroup><option value="Libye">Libye</option><optgroup>Madagascar</optgroup><option value="Madagascar">Madagascar</option><optgroup>Malawi</optgroup><option value="Malawi">Malawi</option><optgroup>Mali</optgroup><option value="Mali">Mali</option><optgroup>Maroc</optgroup><option value="Maroc">Maroc</option><optgroup>Maurice</optgroup><option value="Maurice">Maurice</option><optgroup>Mauritanie</optgroup><option value="Mauritanie">Mauritanie</option><optgroup>Mozambique</optgroup><option value="Mozambique">Mozambique</option><optgroup>Namibie</optgroup><option value="Namibie">Namibie</option><optgroup>Niger</optgroup><option value="Niger">Niger</option><optgroup>Nigeria</optgroup><option value="Nigeria">Nigeria</option><optgroup>Ouganda</optgroup><option value="Ouganda">Ouganda</option><optgroup>R�publique centrafricaine</optgroup><option value="R�publique centrafricaine">R�publique centrafricaine</option><optgroup>R�publique d�mocratique du Congo</optgroup><option value="R�publique d�mocratique du Congo">R�publique d�mocratique du Congo</option><optgroup>R�publique du Congo</optgroup><option value="R�publique du Congo">R�publique du Congo</option><optgroup>Rwanda</optgroup><option value="Rwanda">Rwanda</option><optgroup>Sahara Occidental</optgroup><option value="Sahara Occidental">Sahara Occidental</option><optgroup>Sao Tom�-et-Principe</optgroup><option value="Sao Tom�-et-Principe">Sao Tom�-et-Principe</option><optgroup>S�n�gal</optgroup><option value="S�n�gal">S�n�gal</option><optgroup>Seychelles</optgroup><option value="Seychelles">Seychelles</option><optgroup>Sierra Leone</optgroup><option value="Sierra Leone">Sierra Leone</option><optgroup>Somalie</optgroup><option value="Somalie">Somalie</option><optgroup>Soudan</optgroup><option value="Soudan">Soudan</option><optgroup>Soudan du Sud</optgroup><option value="Soudan du Sud">Soudan du Sud</option><optgroup>Swaziland</optgroup><option value="Swaziland">Swaziland</option><optgroup>Tanzanie</optgroup><option value="Tanzanie">Tanzanie</option><optgroup>Tchad</optgroup><option value="Tchad">Tchad</option><optgroup>Togo</optgroup><option value="Togo">Togo</option><optgroup>Tunisie</optgroup><option value="Tunisie">Tunisie</option><optgroup>Zambie</optgroup><option value="Zambie">Zambie</option><optgroup>Zimbabwe</optgroup><option value="Zimbabwe">Zimbabwe</option><optgroup>Bahamas</optgroup><option value="Bahamas">Bahamas</option><optgroup>Barbade</optgroup><option value="Barbade">Barbade</option><optgroup>Belize</optgroup><option value="Belize">Belize</option><optgroup>Bolivie</optgroup><option value="Bolivie">Bolivie</option><optgroup>Br�sil</optgroup><option value="Br�sil">Br�sil</option><optgroup>Canada</optgroup><option value="Canada">Canada</option><optgroup>Chili</optgroup><option value="Chili">Chili</option><optgroup>Colombie</optgroup><option value="Colombie">Colombie</option><optgroup>Costa Rica</optgroup><option value="Costa Rica">Costa Rica</option><optgroup>Cuba</optgroup><option value="Cuba">Cuba</option><optgroup>Dominique</optgroup><option value="Dominique">Dominique</option><optgroup>�quateur</optgroup><option value="�quateur">�quateur</option><optgroup>�tats-Unis</optgroup><option value="�tats-Unis">�tats-Unis</option><optgroup>Grenade</optgroup><option value="Grenade">Grenade</option><optgroup>Guatemala</optgroup><option value="Guatemala">Guatemala</option><optgroup>Guyana</optgroup><option value="Guyana">Guyana</option><optgroup>Ha�ti</optgroup><option value="Ha�ti">Ha�ti</option><optgroup>Honduras</optgroup><option value="Honduras">Honduras</option><optgroup>Jama�que</optgroup><option value="Jama�que">Jama�que</option><optgroup>Mexique</optgroup><option value="Mexique">Mexique</option><optgroup>Nicaragua</optgroup><option value="Nicaragua">Nicaragua</option><optgroup>Panama</optgroup><option value="Panama">Panama</option><optgroup>Paraguay</optgroup><option value="Paraguay">Paraguay</option><optgroup>P�rou</optgroup><option value="P�rou">P�rou</option><optgroup>R�publique dominicaine</optgroup><option value="R�publique dominicaine">R�publique dominicaine</option><optgroup>Saint-Christophe-et-Ni�v�s</optgroup><option value="Saint-Christophe-et-Ni�v�s">Saint-Christophe-et-Ni�v�s</option><optgroup>Saint-Vincent-et-les-Grenadines</optgroup><option value="Saint-Vincent-et-les-Grenadines">Saint-Vincent-et-les-Grenadines</option><optgroup>Sainte-Lucie</optgroup><option value="Sainte-Lucie">Sainte-Lucie</option><optgroup>Salvador</optgroup><option value="Salvador">Salvador</option><optgroup>Suriname</optgroup><option value="Suriname">Suriname</option><optgroup>Trinit�-et-Tobago</optgroup><option value="Trinit�-et-Tobago">Trinit�-et-Tobago</option><optgroup>Uruguay</optgroup><option value="Uruguay">Uruguay</option><optgroup>Venezuela</optgroup><option value="Venezuela">Venezuela</option><optgroup>Afghanistan</optgroup><option value="Afghanistan">Afghanistan</option><optgroup>Albania</optgroup><option value="Albania">Albania</option><optgroup>Arabie saoudite</optgroup><option value="Arabie saoudite">Arabie saoudite</option><optgroup>Arm�nie</optgroup><option value="Arm�nie">Arm�nie</option><optgroup>Azerba�djan</optgroup><option value="Azerba�djan">Azerba�djan</option><optgroup>Bahre�n</optgroup><option value="Bahre�n">Bahre�n</option><optgroup>Bangladesh</optgroup><option value="Bangladesh">Bangladesh</option><optgroup>Bhoutan</optgroup><option value="Bhoutan">Bhoutan</option><optgroup>Birmanie</optgroup><option value="Birmanie">Birmanie</option><optgroup>Brunei</optgroup><option value="Brunei">Brunei</option><optgroup>Cambodge</optgroup><option value="Cambodge">Cambodge</option><optgroup>Chine</optgroup><option value="Chine">Chine</option><optgroup>Chypre</optgroup><option value="Chypre">Chypre</option><optgroup>Cor�e du Nord</optgroup><option value="Cor�e du Nord">Cor�e du Nord</option><optgroup>Cor�e du Sud</optgroup><option value="Cor�e du Sud">Cor�e du Sud</option><optgroup>�mirats arabes unis</optgroup><option value="�mirats arabes unis">�mirats arabes unis</option><optgroup>G�orgie</optgroup><option value="G�orgie">G�orgie</option><optgroup>Inde</optgroup><option value="Inde">Inde</option><optgroup>Indon�sie</optgroup><option value="Indon�sie">Indon�sie</option><optgroup>Irak</optgroup><option value="Irak">Irak</option><optgroup>Iran</optgroup><option value="Iran">Iran</option><optgroup>Isra�l</optgroup><option value="Isra�l">Isra�l</option><optgroup>Japon</optgroup><option value="Japon">Japon</option><optgroup>Jordanie</optgroup><option value="Jordanie">Jordanie</option><optgroup>Kazakhstan</optgroup><option value="Kazakhstan">Kazakhstan</option><optgroup>Kirghizistan</optgroup><option value="Kirghizistan">Kirghizistan</option><optgroup>Kowe�t</optgroup><option value="Kowe�t">Kowe�t</option><optgroup>Laos</optgroup><option value="Laos">Laos</option><optgroup>Liban</optgroup><option value="Liban">Liban</option><optgroup>Malaisie</optgroup><option value="Malaisie">Malaisie</option><optgroup>Maldives</optgroup><option value="Maldives">Maldives</option><optgroup>Mongolie</optgroup><option value="Mongolie">Mongolie</option><optgroup>N�pal</optgroup><option value="N�pal">N�pal</option><optgroup>Oman</optgroup><option value="Oman">Oman</option><optgroup>Ouzb�kistan</optgroup><option value="Ouzb�kistan">Ouzb�kistan</option><optgroup>Pakistan</optgroup><option value="Pakistan">Pakistan</option><optgroup>Philippines</optgroup><option value="Philippines">Philippines</option><optgroup>Qatar</optgroup><option value="Qatar">Qatar</option><optgroup>Singapour</optgroup><option value="Singapour">Singapour</option><optgroup>Sri Lanka</optgroup><option value="Sri Lanka">Sri Lanka</option><optgroup>Syrie</optgroup><option value="Syrie">Syrie</option><optgroup>Tadjikistan</optgroup><option value="Tadjikistan">Tadjikistan</option><optgroup>Tha�lande</optgroup><option value="Tha�lande">Tha�lande</option><optgroup>Timor oriental</optgroup><option value="Timor oriental">Timor oriental</option><optgroup>Turkm�nistan</optgroup><option value="Turkm�nistan">Turkm�nistan</option><optgroup>Turquie</optgroup><option value="Turquie">Turquie</option><optgroup>Vi�t Nam</optgroup><option value="Vi�t Nam">Vi�t Nam</option><optgroup>Y�men</optgroup><option value="Y�men">Y�men</option><optgroup>Albanie</optgroup><option value="Albanie">Albanie</option><optgroup>Allemagne</optgroup><option value="Allemagne">Allemagne</option><optgroup>Andorre</optgroup><option value="Andorre">Andorre</option><optgroup>Autriche</optgroup><option value="Autriche">Autriche</option><optgroup>Belgique</optgroup><option value="Belgique">Belgique</option><optgroup>Bi�lorussie</optgroup><option value="Bi�lorussie">Bi�lorussie</option><optgroup>Bosnie-Herz�govine</optgroup><option value="Bosnie-Herz�govine">Bosnie-Herz�govine</option><optgroup>Bulgarie</optgroup><option value="Bulgarie">Bulgarie</option><optgroup>Crete</optgroup><option value="Crete">Crete</option><optgroup>Croatie</optgroup><option value="Croatie">Croatie</option><optgroup>Danemark</optgroup><option value="Danemark">Danemark</option><optgroup>Espagne</optgroup><option value="Espagne">Espagne</option><optgroup>Estonie</optgroup><option value="Estonie">Estonie</option><optgroup>Finlande</optgroup><option value="Finlande">Finlande</option><optgroup>France</optgroup><option value="France">France</option><optgroup>Gr�ce</optgroup><option value="Gr�ce">Gr�ce</option><optgroup>Hongrie</optgroup><option value="Hongrie">Hongrie</option><optgroup>Irlande</optgroup><option value="Irlande">Irlande</option><optgroup>Islande</optgroup><option value="Islande">Islande</option><optgroup>Italie</optgroup><option value="Italie">Italie</option><optgroup>Lettonie</optgroup><option value="Lettonie">Lettonie</option><optgroup>Liechtenstein</optgroup><option value="Liechtenstein">Liechtenstein</option><optgroup>Lituanie</optgroup><option value="Lituanie">Lituanie</option><optgroup>Luxembourg</optgroup><option value="Luxembourg">Luxembourg</option><optgroup>Mac�doine</optgroup><option value="Mac�doine">Mac�doine</option><optgroup>Malte</optgroup><option value="Malte">Malte</option><optgroup>Moldavie</optgroup><option value="Moldavie">Moldavie</option><optgroup>Monaco</optgroup><option value="Monaco">Monaco</option><optgroup>Mont�n�gro</optgroup><option value="Mont�n�gro">Mont�n�gro</option><optgroup>Norv�ge</optgroup><option value="Norv�ge">Norv�ge</option><optgroup>Pays-Bas</optgroup><option value="Pays-Bas">Pays-Bas</option><optgroup>Pologne</optgroup><option value="Pologne">Pologne</option><optgroup>Portugal</optgroup><option value="Portugal">Portugal</option><optgroup>R�publique tch�que</optgroup><option value="R�publique tch�que">R�publique tch�que</option><optgroup>Roumanie</optgroup><option value="Roumanie">Roumanie</option><optgroup>Royaume-Uni</optgroup><option value="Royaume-Uni">Royaume-Uni</option><optgroup>Russie</optgroup><option value="Russie">Russie</option><optgroup>Saint-Marin</optgroup><option value="Saint-Marin">Saint-Marin</option><optgroup>Serbie</optgroup><option value="Serbie">Serbie</option><optgroup>Slovaquie</optgroup><option value="Slovaquie">Slovaquie</option><optgroup>Slov�nie</optgroup><option value="Slov�nie">Slov�nie</option><optgroup>Su�de</optgroup><option value="Su�de">Su�de</option><optgroup>Suisse</optgroup><option value="Suisse">Suisse</option><optgroup>Ukraine</optgroup><option value="Ukraine">Ukraine</option><optgroup>Vatican</optgroup><option value="Vatican">Vatican</option><optgroup>Australie</optgroup><option value="Australie">Australie</option><optgroup>Fidji</optgroup><option value="Fidji">Fidji</option><optgroup>Kiribati</optgroup><option value="Kiribati">Kiribati</option><optgroup>Marshall</optgroup><option value="Marshall">Marshall</option><optgroup>Nauru</optgroup><option value="Nauru">Nauru</option><optgroup>Nouvelle-Z�lande</optgroup><option value="Nouvelle-Z�lande">Nouvelle-Z�lande</option><optgroup>Palaos</optgroup><option value="Palaos">Palaos</option><optgroup>Papouasie-Nouvelle-Guin�e</optgroup><option value="Papouasie-Nouvelle-Guin�e">Papouasie-Nouvelle-Guin�e</option><optgroup>Salomon</optgroup><option value="Salomon">Salomon</option><optgroup>Samoa</optgroup><option value="Samoa">Samoa</option><optgroup>Tonga</optgroup><option value="Tonga">Tonga</option><optgroup>Tuvalu</optgroup><option value="Tuvalu">Tuvalu</option><optgroup>Vanuatu</optgroup><option value="Vanuatu">Vanuatu</option></select> 
    </div>
     
     <input type="submit" name="form" value="Rechercher">
     </form>
        </body>
    </html>	
         </header>         
        </div>	
    	<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 light-yellow2">
            <section >
           affichage des abonnées. 
             	  <!DOCTYPE html>
    <html>
        <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="recherche.css" type="text/css" />	   
     
        </head>
        <body>	
     
     
     
    	  <div class="line" > 
    		   <div class="numero" > 
    		  Numero: 117 </Br> 
    			</div>	
    			 <div class="photo" > 	   
    		  <a href='images/photo/117_'><img src='images/photominiature/117_'></a> </Br> 
    			</div>
    			 <div class="logo" > 	
    			 <a href='images/logo/117_'><img src='images/miniature/117_'></a>   </Br>  
                 </div>	
                <div class="pseudo" > 			
    		  Pseudo: codor </Br> 
               </div>	
     
               <div class="nom" > 			
    		  Nom:  </Br> 
                </div>	
                <div class="prenom" > 			
    		  Prénom: <a href='message_private.php?num_personne=117'><img src='images/photominiature/117_'></a> </Br> 
     
    			 </div>	
            </div>			 
     
     
         </body>
        </html>
     
     
            </section>	
        </div>
     
     
    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 light-yellow3">
    	   <footer >          
              <a href="contacte.php"> Contactez-nous </a>   
              <a class="navbar-brand" href="www.facebook.com"> <img src="images/facebook.jpg" alt="facebook" id="facebook" /></a>
                <a class="navbar-brand" href="www.twiter.com"> <img src="images/twiter.ico" alt="twiter" id="twiter" /></a>
           </footer>
    	</div>	
    </div>
     
        </body>
    </html>
    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
    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
    body {
     
      padding-top: 10px;
      background:rgb(56,7,47);
    }
    .navbar {
       position:fixed-top;
       height:75px;	
    	display:inline-block;
    	padding-top: 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;
    display:inline;		
    border-color: transparent;
    }
    .row{
    padding:0px;
    margin-left:20px;
    margin-right:20px;
    /*background-color: lightyellow;  
      padding-right: 0px;
      margin-top:50px;*/
    }
    [class*="col-"]{
      display:inline-block;
      border: 2px solid blue;
     /* border-radius: 6px;*/
      line-height: 40px;
      padding: 0px;
      margin:0px;
      /*text-align: center;*/
     
     
    } 
     
    .light-yellow1{
      background-color: lightyellow;  
      padding: 0px;
      margin-left:0px;
      margin-right:0px;
      margin-top:42px;
      border-radius: 6px;
     
      /*margin: 40px 0 20px;*/
      position:left;
      }
     /* header{
      padding-top: 0px;
      margin: 40px 0 20px;
      position:left;
      }*/
     .light-yellow2{
       background-color: lightyellow;
       padding: 0px;
       margin-top:42px;
       /*margin:0px 0 20px;*/
       margin-right:0px;
       margin-left:0px;
       position:right;
      }
     /* section{
       padding: 0px;
        margin-top:42px;
       position:right;
       margin-right:0px;
       margin-left:0px;
      }*/
       /*footer {
      height:75px;
      background-color: blue;  
      border-radius: 6px;
      }*/
      .light-yellow3{
      height:75px;
      background-color: blue;  
      border-radius: 6px;
      padding:0px;
      margin-right:0px;
      }
      img {
      padding-top:0px;
      margin-top:0px;
       position:top;
       } 
     
    footer a img {
       width: 0%;
    }

  11. #11
    Membre du Club
    Homme Profil pro
    Autodidacte
    Inscrit en
    Octobre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Octobre 2015
    Messages : 44
    Points : 59
    Points
    59
    Par défaut
    Comment se fait il que vous ayez un doctype, un head, des meta et un body pour chaque section de la page? Tout cela ne doit exister qu'en un seul exemplaire dans la page 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
    Quand on envoi le code vous dites "pas de php"; seulement envoyer du "html";

    il ramène par exemple le code source de:
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
        <?php
              include('form-recherche.php');
    	     ?>
    voici le code original en bas:
    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
    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
    <!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">
     
    		<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
     
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></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="index2.css" type="text/css" />
     
           <link rel="stylesheet" media="print" href="print.css" type="text/css" />
    ***
    *****
        </head>
    	<?php
          session_start();    
                $messages = array();
                    $newmsg = array();
                    $messages1 = array();
                    $newmsg1 = array();
                    $non_lu=0;
                    require 'db.php';
                    $num_personne=$_SESSION['num_personne'];
        
              $res = $db->query("select count(*) as nb from message_recu WHERE est_lu='".$non_lu."' && emeteur_message='".$num_personne."'");
          $data = $res->fetch();
          $nb = $data['nb'];
        
               $res1 = $db->query("select count(*) nb1 from page_copie_recepteur WHERE est_lu='".$non_lu."' && num_personne='".$num_personne."'");
        $data = $res1->fetch();
        $nb1 = $data['nb1'];
     
        ?>
    	<body role="document">	
    	<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='abonement.php'>Abonnement</a>
                            </li>
    						<li class="photo">
    						    <a href='profil.php'> <?php /* ici j'ai mis un lien vers ma page de profil */ 
                                                    
                                       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');
                                        ?>
    						    </a>	
    					   </li>
                        </ul>
    						<ul class="nav navbar-nav navbar-midle">
     
     
    						    <!-- Menu déroulant -->
                           <li class="dropdown">
                                <a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" href='publication_reçu.php'>
                                    <!-- Premier niveau -->
                                    <i class="fa fa-envelope"> Publication(</i> 
                                    <?php if ($nb1 != 0){ ?>
                                        <!-- Si il y a au moins 1 msg on affiche le badge -->
                                        <span class="badge"><?php echo $nb1; ?>)</span>
                                    <?php } ?>
                                    <!-- Petite icone pour le dropdown 
                                    <span class="caret"></span> -->
                                </a>
                                <!-- Sous niveaux -->
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href='inbox.php'>Voir les publications recus</a>
                                    </li>
                                    <li>
                                        <a href="wrotemsg.php">Voir mes publications envoyés</a>
                                    </li>
     
                                </ul>
                            </li>
    					</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($nb != 0){ ?>
                                        <!-- Si il y a au moins 1 msg on affiche le badge -->
                                        <span class="badge"><?php echo $nb; ?>)</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 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">  
    <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 light-yellow1">  
        <header > 
    	Entete ou champs de recherche.*
       <?php
              include('form-recherche.php');
                 ?>	
         </header>         
        </div>	
    	<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 light-yellow2">
    *****   <section >
    *******affichage des abonnées.*
            *<?php
              include('affiche_connecte.php');
                 ?>	
    		 ********
    *****   </section>	
        </div>
    	<?php
              /*  $req = $db->query("SELECT* FROM message WHERE est_lu='".$non_lu."' && emeteur_message='".$num_personne."' ");
                     $msg = $req->fetchAll(PDO::FETCH_OBJ);
                    while ($msg = $req->fetch()){ 
            $n=1;           
            $newmsg = array(
                 $n=> $msg['num_message']
                $n=> $msg['date_message'],
                            $n=> $msg['objet_message'],
                            $n=> $msg['contenu_message']
            );
                    $n++;
             }               
          $messages[] = $newmsg; */
              
              
             /* $req1 = $db->query("SELECT* FROM page_copie_recepteur WHERE est_lu='".$non_lu."' && num_personne='".$num_personne."' ");
                     $msg1 = $req1->fetchAll(PDO::FETCH_OBJ);
                    while ($msg1 = $req1->fetch()){  
             $n=0;          
            $newmsg = array(
                'num_page' => $msg1['num_page']
                            
                
            );
             }
          $messages1[] = $newmsg1; */
              ?>	
    		 *****
    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 light-yellow3">
    	 * <footer >**********
              <a href="contacte.php"> Contactez-nous*</a>***
    *****     <a class="navbar-brand" href="www.facebook.com"> <img src="images/facebook.jpg" alt="facebook" id="facebook" /></a>
                <a class="navbar-brand" href="www.twiter.com"> <img src="images/twiter.ico" alt="twiter" id="twiter" /></a>
           </footer>
    	</div>	
    </div>
     
        </body>
    </html>

  13. #13
    Membre du Club
    Homme Profil pro
    Autodidacte
    Inscrit en
    Octobre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Octobre 2015
    Messages : 44
    Points : 59
    Points
    59
    Par défaut
    D'accord. Il ne faut pas donner de structure html aux différents script de traitement des données que vous appelez dans la page mais seulement à la page qui appelle ces scripts afin qu'une seule structure html soit envoyée au navigateur. Par exemple si vous avez un script qui génère un tableau que vous appelez dans une page le script ne doit contenir que le html du tableau et rien d'autre. Le doctype, les meta tags, le body etc doivent provenir uniquement de la page qui appelle ce script.

  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
    merci pour ce conseil;
    appart ça il n'y a pas de nouveau concernant les autres problèmes?

  15. #15
    Membre du Club
    Homme Profil pro
    Autodidacte
    Inscrit en
    Octobre 2015
    Messages
    44
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Autodidacte

    Informations forums :
    Inscription : Octobre 2015
    Messages : 44
    Points : 59
    Points
    59
    Par défaut
    Pour le positionnement vous pouvez reposter le html corrigé, avec une seule structure html, on y verra plus clair.

    Pour encadrer les photos de profil il suffit de leurs appliquer une bordure dans le css, mettez l'id ou la class de l'élément concerné, le présent code appliquera une bordure à toutes les photos du site:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    img { border:solid 1px black; }
    Ceci dit comme l'a dit jreaux62 précédemment, vous ne pouvez pas faire l'économie d'apprendre ces rudiments de css, les bordures c'est une question d'apprentissage, pas une résolution de problème. C'est comme si on demandait comment faire une boucle ou initialiser une variable sur le forum php. Le css est un langage "littéral", vous pouvez apprendre toute les bases en trois jours.

  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;
    D'abord partons pas à pas et nous allons commencer par la page de connexion.
    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
    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
    <!DOCTYPE html>
    <html lang="fr">
     
         <head>    
            <meta charset="utf-8"/>
            <title>Bigtree.com</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="form-recherche.css" type="text/css" />-->
          <link href="css/bootstrap.css" rel="stylesheet">	  
           <link rel="stylesheet"  href="bigtree.css" />	   
     
        </head>
        <body>   
    	<div class="row">	
    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 light-yellow1"> 	
    	Logo site
    	</div>
    <div class="col-xs-12 col-sm-12 col-md-4-offset-1 col-lg-4-offset-1 light-yellow2">      
                 <h1><a href='inscription-bigtree.php'>Inscrivez-vous Ici</a> </h1> 
    			 <h1>dejà inscrit:</h1> 
                <h1>Connectez-vous!</h1> 
                <form action="inscrire2.php" name="login" role="form" class="form-horizontal"  method="post" accept-charset="utf-8" >              		   
    			   <div class="form-group">
                     <div class="col-md-8"><br><input name="pseudo" placeholder="Idenfiant" class="form-control pseudo" type="text" id="pseudo" size="20"/>            
                   <input name="mot_de_passe" placeholder="Mot de passe" class="mdp" type="password" id="mot_de_passe" size="20"/></div>
                    </div>  
                    <div class="col-md-8"><input type="checkbox" name="connection_automatique" id="connection_automatique"/> <label for="connection_automatique">Connexion automatique</label><br/>
                    </div> 
    				<div class="form-group">
                    <div class="col-md-offset-0 col-md-8"><input  class="btn btn-success btn btn-success" type="submit" value="Connexion"/></div>
                    </div>               
                </form>			          
        </div>	
    	<div class="col-xs-12 col-sm-12 col-md-6-offset-1 col-lg-6-offset-1 light-yellow3">	
        <div id="photo">		   	   
    		<img src="images/daf1.1.jpg" alt="photo" ; />		 
    	 </div>	    
        </div>
    	</div>	
        </body>
    </html>
    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
    body { 
        background:rgb(56,7,47);    
    }
     
    .row {
    	width : 700px;	
    }
    /*
    .row > div .light-yellow1{ 
        width:700px;
        height:100px;	
    	border:1px solid blue;	
    	border-radius:5px;
        background:blue;
        font-family: 'Open Sans';
        font-weight: 300px;	
     
    }*/
     .row > #light-yellow1{ 
        width:700px;
        height:100px;	
    	border:1px solid blue;	
    	border-radius:5px;
        background:blue;
        font-family: 'Open Sans';
        font-weight: 300px;	
     
    }
    .row > #light-yellow2{ 
        width:300px;
        border:1px solid blue;	
    	border-radius:5px;
        font-family: 'Open Sans';
        font-weight: 300px;
    	border:1px solid blue;	
    	border-radius:5px;
        background-color:rgb(255,255,128);
    	position:left;
    	color:red;
     
    }
    .row > #light-yellow3{ 
        width:400px;
    	display:inline;
        border:1px solid blue;	
    	border-radius:5px;    
    	border:1px solid blue;	
    	border-radius:5px;   
    	position:right;
     
    }
    page inscription;
    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
    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
    <!DOCTYPE html>
    <html lang="fr">
     
        <head>    
            <meta charset="utf-8">
            <title>Bigtree.com</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="form-recherche.css" type="text/css" />-->	  
           <link rel="stylesheet" media="screen" href="inscription-bigtree.css" type="text/css" />	   
     
        </head>
        <body>
    	<div class="row">	
    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 light-yellow1"> 	
    	Logo site
    	</div>
    <div class="col-xs-12 col-sm-12 col-md-4-offset-1 col-lg-4-offset-1 light-yellow2">      
                <h1>Inscriveez-vous!</h1> 
                <form action="inscrire.php" method="post" name="Inscription">				    
    				<fieldset><legend>INSCRIPTIONS</legend>
    					<label for="pseudo" class="float">Pseudo :</label> <input type="text" name="pseudo" id="pseudo" size="20" value="<?php echo (!empty($_POST['pseudo']))? htmlspecialchars($_POST['pseudo'], ENT_QUOTES): NULL ; ?>" /><br />
    					<label for="mot_de_passe" class="float">Mot de passe :</label> <input type="password" name="mot_de_passe" id="mot_de_passe" size="20" value="<?php echo (!empty($_POST['mdp']))? htmlspecialchars($_POST['mdp'], ENT_QUOTES): NULL ; ?>" /> <br />
    					<label for="mdp_verif" class="float">Mot de passe (vérification) :</label> <input type="password" name="mdp_verif" id="mdp_verif" size="20" value="<?php echo (!empty($_POST['mdp_verif']))? htmlspecialchars($_POST['mdp_verif'], ENT_QUOTES): NULL ; ?>" /><br />
    					<label for="email_personne" class="float">Mail :</label> <input type="text" name="email_personne" id="email_personne" size="20" value="<?php echo (!empty($_POST['mail']))? htmlspecialchars($_POST['mail'], ENT_QUOTES): NULL ; ?>" /> <br />
    					<label for="mail_verif" class="float">Mail (vérification) :</label> <input type="text" name="mail_verif" id="mail_verif" size="20" value="<?php echo (!empty($_POST['mail_verif']))? htmlspecialchars($_POST['mail_verif'], ENT_QUOTES): NULL ; ?>" /><br />
    					<input type="checkbox" name="charte" id="charte"/> <label for="charte">J'accepte les conditions et les règles d'utilisation de ce site.</label><a href="charte.php" style="text-decoration:none">Lire la charte</a><br/>
     
    				</fieldset>   				
    				<div class="center"><input type="submit" value="Validé" /></div>
    			    </form>	          
        </div>	
    	<div class="col-xs-12 col-sm-12 col-md-6-offset-1 col-lg-6-offset-1 light-yellow3">	
        <div id="photo">		   	   
    		<img src="images/daf1.1.jpg" alt="photo" ; />		 
    	 </div>	    
        </div>
    	</div>	
        </body>
    </html>
    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
    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
    body { 
        background:rgb(56,7,47);    
    }
     
    .row {
    	width : 700px;	
    }
     
    .row > div .light-yellow1{ 
        width:700px;
        height:100px;	
    	border:1px solid blue;	
    	border-radius:5px;
        background:blue;
        font-family: 'Open Sans';
        font-weight: 300px;	
     
    }
    .row > div .light-yellow2{ 
        width:300px;
        border:1px solid blue;	
    	border-radius:5px;
        font-family: 'Open Sans';
        font-weight: 300px;
    	border:1px solid blue;	
    	border-radius:5px;
        background-color:rgb(255,255,128);
    	position:left;
    	color:red;
     
    }
    .row > div .light-yellow3{ 
        width:400px;
    	display:inline;
        border:1px solid blue;	
    	border-radius:5px;    
    	border:1px solid blue;	
    	border-radius:5px;   
    	position:right;
     
    }
     
    /*
    .row {
    	width : 960px;
    	margin : 10px auto;
    }
    .row > div {
    	float : left;
    	margin : 0 10px;
    }
    .w-1 { width : 60px; }
    .w-2 { width : 140px; }
    .w-3 { width : 220px; }
    .w-4 { width : 300px; }
    .w-5 { width : 380px; }
    .w-6 { width : 460px; }
    .w-7 { width : 540px; }
    .w-8 { width : 620px; }
    .w-9 { width : 700px; }
    .w-10 { width : 780px; }
    .w-11 { width : 860px; }
    .w-12 { width : 940px; }
    .clear { clear : both ; }
    .row > div .menu{ 
        width:960px;
        height:100px;	
    	border:1px solid blue;	
    	border-radius:5px;
        background:blue;
        font-family: 'Open Sans';
        font-weight: 300px;
    	text-align:center;
    	margin-top:50px;
    }
    .row > div .champ-connexion{ 
        width:450px;
        height:400px;	
    	border:1px solid blue;	
    	border-radius:5px;
        background-color:rgb(255,255,128);
    	position:left;
    	color:red;
        
    }
    .row > div  #photo img{ 
        width:508px;
        height:400px;	
    	border:1px solid blue;	
    	border-radius:5px;
        position:right;
    	margin-left:132px;
        
    }
    #pseudo,#mot_de_passe,#mdp_verif,#email_personne,#mail_verif{ 
        position:float;
    margin-left:5px;    
    }
    body { 
        background:rgb(56,7,47);    
    }*/
    pour toutes ces deux pages je vois pas d'effet de leurs css.
    merci d'avance!

  17. #17
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Il faut declarer ton fichier CSS APRES celui de Bootstrap.

  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
    Bonjour Monsieur jreaux62;
    Que voulez vous dire? je ne comprends pas.

  19. #19
    Invité
    Invité(e)
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <link href="css/style-perso.css" rel="stylesheet">
    Ton fichier personnalisé doit être déclarer en dernier (après les autres) pour que les instructions puissent "prendre le dessus".

  20. #20
    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!
    OK je comprends maintenant;
    Mais si vous regardez mon message, je crois bien que c'est comme ça que j'ai fais non?
    inscription-bigtree.css et bigtree.css sont déclarés à la fin;

Discussions similaires

  1. [PHP 5.0] Page d'envoie du message
    Par patb12 dans le forum Langage
    Réponses: 3
    Dernier message: 03/04/2012, 21h36
  2. Envoi de message
    Par bendev dans le forum ASP
    Réponses: 5
    Dernier message: 11/10/2004, 11h40
  3. Réponses: 13
    Dernier message: 14/01/2004, 16h35
  4. Envoi de messages MS DOS avec le IP
    Par asphp dans le forum Développement
    Réponses: 6
    Dernier message: 07/01/2004, 16h11
  5. Recuperation du source d'une page - envoi de param
    Par ulysse66x dans le forum Web & réseau
    Réponses: 3
    Dernier message: 15/06/2003, 17h31

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