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 :

mettre 2 cadres l'un contre l'autre


Sujet :

CSS

  1. #1
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut mettre 2 cadres l'un contre l'autre
    bonjour, j'ai fait 2 cadre mais celle de droite il n'est pa alligner a celle du cadre de gauche comment je peux faire

    voilà ceux que ça me donne :



    comme je peux mettre mon cadre côté du cadre gauche

    j'ai éssayer de mettre float : right etc.... mais ça rien fait juste decaler trop de mon cadre si quelqu'un a une petite idée

    voilà mon css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    .profil_utilisateur
    {
    	width:auto;
    	margin: auto;
    	box-shadow: 0px 0px 10px #000000;
    	border-radius: 4px;
    	border: 2px #545454 solid;
    	padding: 0px;
    	margin-top: 1%;
    border:1px dashed #FFFFFF;
    }
     
          .profil_titre_gauche
    	  {
    	  width:autopx;
    	  margin-right:1400px;
    	  text-align:center;
    	  padding-bottom:10px;	  
    	  border:1px dashed #FFFFFF; /* couleur du cadre */
    	  background-color:#333333;
    	  }
     
          .profil_info_gauche
    	  {
    	  width:autopx;
    	  margin-right:1400px;
    	  text-align:left;
    	  padding-bottom:10px;	  
    	  border:1px dashed #FFFFFF; /* couleur du cadre */
    	  }
     
          .profil_titre_droite
    	  {
     
    	  width:50px;
         margin-left:300px;
     
         margin-right:30px;
         padding-bottom:10px;	  
         border:1px dashed #FFFFFF;
     
    	  background-color:#333333;
    	  }
     
          .profil_info_droite
    	  {
    	    width:50px;
         margin-left:300px;
     
         margin-right:30px;
         padding-bottom:10px;	  
         border:1px dashed #FFFFFF; /* couleur du cadre */
    	  }
    et le code de la page :

    Code php : 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
    //On affiche les infos sur le membre afin de savoir qu'il se cache derriere leurs pseudos ;)
    	echo '<div class="profil_utilisateur"><div class="profil_titre_gauche">Carte d\'identité</div>';
    	echo '<div class="profil_info_gauche">';
    	echo 'Pseudo : tester';
    	echo '<br>Prénom : 'ivan';
    	  echo '<br>Son argent de poche : '500'';
    	echo '<br>Sexe : 'homme';
    	echo '<br>Nationalité : '.htmlspecialchars($data1['membre_nationalite']).'';
    	echo '<br>Surnom :  '.htmlspecialchars($data1['membre_surnom']).'';
    	echo '<br>Situation : '.htmlspecialchars($data1['membre_situation']).'';
     
    	   echo '<br>Date de naissance : '35 ans ';
    	  echo'<br>Signe de zodiaque : '';		echo'<br>Localit&eacute; : '';
    echo '</div>';
    echo '<div class="profil_titre_droite">Ses activité</div>';
    	echo '<div class="profil_info_droite">là je mets mes infos ceux que je veux c\'est juste pour vous montré</div>';

    merci de votre aide

  2. #2
    Membre habitué
    Avatar de _tom_
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Mars 2012
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Consultant informatique

    Informations forums :
    Inscription : Mars 2012
    Messages : 67
    Points : 195
    Points
    195
    Par défaut
    Bonjour,

    Si ce que tu souhaites c'est mettre 2 div côte à côte, tu peux faire comme cela :
    Code html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <div id="conteneur">
       <div id="conteneurGauche"> Bloc de texte de gauche </div>
       <div id="conteneurDroite"> Bloc de texte de droite </div>
    </div>
    Code css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    #conteneur
    {
        width:100%;
    }
    #conteneur #conteneurGauche {
        float:left;
        width:60%;
    }
    #conteneur #conteneurDroite {
        margin-left:60%    
    }
    Cordialement,

  3. #3
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Pourquoi ne pas mettre #conteneurDroite en float: left; aussi du temps qu'on y est ?
    Et on rajoute un clear: both; dans une div placé en dessous de #conteneur.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  4. #4
    Membre habitué
    Avatar de _tom_
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Mars 2012
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Consultant informatique

    Informations forums :
    Inscription : Mars 2012
    Messages : 67
    Points : 195
    Points
    195
    Par défaut
    Effectivement on peut rajouter ça aussi

  5. #5
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    merci mais ça me fait 1 cadre

    Nom : ohv8yh.png
Affichages : 635
Taille : 30,2 Ko

    hors moi je veux faire 2 cadres mais séparé que là on ne voit pas le séparé mes 2 cadres

    merci

  6. #6
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Bah, réduit les largeurs des deux blocs ou défini les et ajoute un margin-left au bloc de droite ou un margin-right au bloc de gauche.

    Et poste nous le CSS du code que tu viens de modifier, nous ne savons pas quelle solution tu as retenu.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  7. #7
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    là je viens trouvé un code pour 2 cadres

    mais ça me fais ça :

    Nom : i1fvv9.png
Affichages : 673
Taille : 25,5 Ko

    mes 2 cadres c'est bien car il sont l'un contre l'autre mais pour les autres il se baisse pas en fonction de mes cadres

    donc voilà le 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
    //On affiche les infos sur le membre afin de savoir qu'il se cache derriere leurs pseudos ;)
    	echo '<div id="colonne1">
         <div align=center class=bordure>Cate d\identité</div>
         Pseudo :
    	 <br>
    	 Surnom :
    	 <br>
    	 Date de Naissance :
    	 <br>
    	 Signe de zodiaque :
    	 <br>
    	 Prénom :
    	 <br>
    	 etc....</div>
     
       <div id="colonne2">
         <div align=center class=bordure>Mes activités</div>
         Nombre de méssage sur le livre d\or :
    	 <br>
    	 nombre de message sur le forum :
    	 <br>
    	 nombre de commentaire
    	 <br>
    	 etc.....
       </div>';
     
     
     
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Son Annonce</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met son annonce';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Sa bioagraphie</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met sa biographie';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Sa signature</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met sa signature';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Les commentaires du profil</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met les commentaires du profil que les autres membres peuvent laisser un petit message';
    	echo '</div>';
    et le 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
    /* on affiche le css de la page voir profile */
    /* Les deux colonnes */
     
     
    #conteneur
    {
       width:auto;
       margin-top:20px;
       padding-bottom:25px;
       background-image:url(images/fond.jpg);
       padding-top:5px;
    }
     
    #colonne1
    {
       width:auto;
       background-color:#374663;
       float:left;
       border: 1px solid #505F7D;
    }
     
    #colonne2
    {
    width:auto;
    margin-right:800px;
       background-color:#374663;
       float:right;
       border: 1px solid #505F7D;
    }
     
     
     
    #profil_utilisateur
    {
    	width:100%;border:1px dashed #FFFFFF; /* couleur du cadre */
    	  	  background-color:#333333;
    }
     
          #conteneur #profil_titre_gauche
    	  {
    	  float:left;
        width:60%;border:1px dashed #FFFFFF; /* couleur du cadre */
    	  	  background-color:#333333;
     
    	  }
     
          #conteneur #profil_info_gauche
    	  {
    	  float:left;
        width:60%;
     
    	  }
     
          #conteneur #profil_titre_droite
    	  {
     
    	  margin-left:60%   ;
     
    	  background-color:#333333;
    	  }
     
          #conteneur #profil_info_droite
    	  {
    	   margin-left:60%    /* couleur du cadre */
    	  }
     
        .profil_titre_texte
    	  {
    	  width:1500px;
    	  margin-right:1400px;
    	  text-align:left;
    	  padding-bottom:10px;	  
    	  border:1px dashed #FFFFFF; /* couleur du cadre */
    	  	  background-color:#333333;
    }
        .profil_titre_annonce
    	  {
    	  width:1500px;
    	  margin-right:1400px;
    	  text-align:left;
    	  padding-bottom:10px;	  
    	  border:1px dashed #FFFFFF; /* couleur du cadre */
    	  }
    Comment je peux faire pour mes cadres passe en sous de mes 2 cadres

    merci

  8. #8
    Rédacteur

    Avatar de Torgar
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 334
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 334
    Points : 8 040
    Points
    8 040
    Par défaut
    Citation Envoyé par Torgar Voir le message
    Pourquoi ne pas mettre #conteneurDroite en float: left; aussi du temps qu'on y est ?
    Et on rajoute un clear: both; dans une div placé en dessous de #conteneur.
    Donc en gros tu as fait ce que l'on te conseillait depuis le début à un détail près... Tu ne nous lis pas....
    N'ai-je pas mis de rajouter une div avec un clear: both; en dessous de tes deux blocs ?

    Va voir à quoi correspond cette propriété CSS et tu nous rediras si tu n'y arrives toujours pas.
    Je ne suis pas schizophrène, nous sommes unanime !!!

    ► Pensez à la balise code et au CODE HTML GENERE !!!!
    ► Au si c'est le cas et au à ceux qui vous ont aidé.
    Vous souhaitez participer aux rubriques CSS et (X)HTML ? Contactez-nous !

    Créer des colonnes de même hauteur en CSS
    Glossaire CSS
    Les bordures en CSS3
    Les transitions en CSS3

  9. #9
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    Oui j'ai lu et j'ai testé mais ca n'a rien donné donc j'ai voulu tester un autre code css au cas où

    mais voilà ca me donne ça sur ie9 et j'ai vue sur firefox ca me donne la même chose
    Nom : 2prdaow.png
Affichages : 642
Taille : 27,5 Ko

    voilà 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
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
     echo '<form method="post" action="/membre-membre.action.html?action=modifProfil">
          <input type="submit" value="Modifier mon profil" onclick="document.location = \'/membre-membre.action.html?action=modifProfil\'; return false;"></form>';
     
    //On affiche les infos sur le membre afin de savoir qu'il se cache derriere leurs pseudos ;)
    	echo '
    	<div id="profil_info_gauche"><div id="profil_titre_gauche">Cate d\'identité</div>
         <br>
    	 <br>
    	 Pseudo : tester
    	 <br>
    	 Surnom : gentil
    	 <br>
    	 Date de Naissance : 26/09/1976 (35 ans)
    	 <br>
    	 Signe de zodiaque : Balance
    	 <br>
    	 Prénom : Ivan
    	 <br>
    	 etc....</div>
     
       <div id="profil_info_droite"><div id="profil_titre_gauche">Mes activités</div>
         <br><br>Nombre de méssage sur le livre d\'or : 150
    	 <br>
    	 nombre de message sur le forum : 50
    	 <br>
    	 nombre de commentaire : 100
    	 <br>
    	 etc.....
       </div>';
     
     
     
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Son Annonce</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met son annonce';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Sa bioagraphie</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met sa biographie';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Sa signature</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met sa signature';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Les commentaires du profil</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met les commentaires du profil que les autres membres peuvent laisser un petit message';
    	echo '</div>';
    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
    /* on affiche le css de la page voir profile */
    /* Les deux colonnes */
     
    #profil_utilisateur
    {
       width:auto;
       margin-top:20px;
       padding-bottom:25px;
       background-image:url(images/fond.jpg);
       clear:both;
       padding-top:5px;
       border: 1px dashed #FFFFFF;
    }
     
    #profil_titre_gauche
    {
       width:auto;
       background-color:#333333;
       float:left;
       border: 1px dashed #FFFFFF;
    }
     
    #profil_titre_droite
    {
    width:auto;
    margin-right:800px;
       background-color:#333333;
       float:right;
       border: 1px dashed #FFFFFF;
    }
    #profil_info_gauche
    {
       width:auto;
     
       float:left;
       border: 1px dashed #FFFFFF;
    }
     
    #profil_info_droite
    {
    width:auto;
    margin-right:800px;
     
       float:right;
       border: 1px dashed #FFFFFF;
    }
     
     
     
     
     
        .profil_titre_texte
    	  {
    	  width:1500px;
    	  margin-right:1400px;
    	  text-align:left;
    	  padding-bottom:10px;	  
    	  border:1px dashed #FFFFFF; /* couleur du cadre */
    	  	  background-color:#333333;
    }
        .profil_titre_annonce
    	  {
    	  width:1500px;
    	  margin-right:1400px;
    	  text-align:left;
    	  padding-bottom:10px;	  
    	  border:1px dashed #FFFFFF; /* couleur du cadre */
    	  }
    il faut trouver pour quoi le titre son annonce il faudra le baisser en sous de mes 2 cadres

    ensuite pour mes 2 cadres j'ai mis un cadre titre carte d'itenté et mes activité pk le cadre titre ne fait pas la longueur du cadre principal car j'ai mis une autre couleur

    merci de votre aide

  10. #10
    Membre habitué
    Avatar de _tom_
    Homme Profil pro
    Consultant informatique
    Inscrit en
    Mars 2012
    Messages
    67
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Consultant informatique

    Informations forums :
    Inscription : Mars 2012
    Messages : 67
    Points : 195
    Points
    195
    Par défaut
    Pour le problème des div "par-dessus" le reste, c'est que tu as mal appliqué le clear: both.

    Le principe est le suivant :

    Tu as une div principal à width:100%, dans laquelle tu met 3 DIV :
    - tes 2 div que tu veux mettre côte à côte (l'une avec float: left, et l'autre avec float: right)
    - une 3e div qui a juste la propriété clear:both

    Au final :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <div id="profil_utilisateur">	
       <div id="profil_info_gauche">DIV GAUCHE</div>
       <div id="profil_info_droite">DIV DROITE</div>   
       <div class="clear"></div>
    </div>
     div>DIV SUIVANTE</div>
    et

    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
     
    #profil_utilisateur
    {
       width: 100%;
       background-image:url(images/fond.jpg);
       border: 1px dashed #FFFFFF;
    }
     
    .clear{
       clear: both;
    }
    #profil_info_gauche
    {
       float:left;
       border: 1px dashed #FFFFFF;
    }
     
    #profil_info_droite
    { 
       float:right;
       border: 1px dashed #FFFFFF;
    }
    Petits conseils CSS :
    - n'utilise pas "px" pour mettre des tailles, mais du %, sinon tu auras des surprises avec différentes résolutions
    - Evite aussi de mettre des <br>, gère les espaces entre les div dans le CSS avec margin ou padding

  11. #11
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    merci là j'ai mis un autre cadre au millieu

    mais pour quoi il un grand espace entre mon cadre droit et celle du cadre profil utilisateur comment on fait pour le cadre du bas puisse monter en haut et au fure a messure que je met du texte ça baisse automatique

    voilà le résultat dans piece jointe

    voilà 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
    /* on affiche le css de la page voir profile */
    /* Les deux colonnes */
     
    #profil_utilisateur
    {
       width: 100%;
       border: 1px dashed #FFFFFF;
    }
     
    .clear{
       clear: both;
    }
     #profil_titre_gauche
    {
       text-align:center;
       background:#333333;
       border: 1px dashed #FFFFFF;
    }
    #profil_info_gauche
    {
       float:left;
       text-align:left;
       margin-left:100px;
       margin-right:200px;
       border: 1px dashed #FFFFFF;
    }
     
     #profil_titre_droite
    {
       text-align:center;
       background:#333333;
       border: 1px dashed #FFFFFF;
    }
    #profil_info_droite
    {
       float:right;
       text-align:left;
       margin-left:100px;
       margin-right:300px;
       border: 1px dashed #FFFFFF;
    }
     
     #profil_titre_millieu
    {
       text-align:center;
       background:#333333;
       border: 1px dashed #FFFFFF;
    }
    #profil_info_millieu
    {
       float:right;
       text-align:left;
       margin-left:10px;
       margin-right:30px;
       border: 1px dashed #FFFFFF;
    }
     
     
     
        .profil_titre_texte
    	  {
    	  width:1500px;
    	  margin-right:1400px;
    	  text-align:left;
    	  padding-bottom:10px;	  
    	  border:1px dashed #FFFFFF; /* couleur du cadre */
    	  	  background-color:#333333;
    }
        .profil_titre_annonce
    	  {
    	  width:1500px;
    	  margin-right:1400px;
    	  text-align:left;
    	  padding-bottom:10px;	  
    	  border:1px dashed #FFFFFF; /* couleur du cadre */
    	  }
    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
    <?php <div id="profil_utilisateur">
     
     
       <br><div id="profil_info_gauche"><div id="profil_titre_gauche">Carte d\'identitée</div>';
       echo 'Pseudo : '.htmlspecialchars($data1['membre_pseudo'], $data1['membre_rang']).'';
     
     
     		if (time() - $data1['membre_derniere_visite'] > 30 * 60) echo ' <img src="../images/hors_ligne.gif" alt="(Hors ligne)" title="Hors ligne" />'; 
     
     
           else echo ' <img src="../images/en_ligne.gif" alt="en ligne" title="en ligne" /><br>';
    	   echo '<br>Groupe : '. groupe2name(htmlspecialchars($data1['membre_rang']));
    	   echo '<br>Prénom : '.htmlspecialchars($data1['membre_prenom']).'';
    	  echo '<br>Son argent de poche : '.htmlspecialchars($data1['membre_euros']).' €';
    	echo '<br>Sexe : '.htmlspecialchars($data1['membre_sexe']).'';
    	echo '<br>Nationalité : '.htmlspecialchars($data1['membre_nationalite']).'';
    	echo '<br>Surnom :  '.htmlspecialchars($data1['membre_surnom']).'';
    	echo '<br>Situation : '.htmlspecialchars($data1['membre_situation']).'';
    	  $ex = explode("/",$data1['membre_date_de_naissance']);
     
    	   			$mois = ($ex[1] < 10) ? "0" . $ex[1] : $ex[1];
     
    	   echo '<br>Date de naissance : '.$ex[0] . "/" . $mois . "/" . $ex[2];
     
     
     
    	  if($ex[1] > date('m') && $ex[0] > date('d'))
    	   	$age = intval(date('Y')  - $ex[2]) - 1;
    	   else
    	   	$age = intval(date('Y')  - $ex[2]);
     
            echo' ('.$age. ' Ans)';	
    	  echo'<br>Signe de zodiaque : '.htmlspecialchars($data1['membre_zodiaque']).'';	
    		echo'<br>Localit&eacute; : '.htmlspecialchars($data1['membre_localisation']).'';
    		  echo '</div>
     
       <div id="profil_info_droite"><div id="profil_titre_droite">Activité sur le site</div>';
       echo '<br>on affiche le nombre des messages.';
     
    	  // nombre de sortie qui a lancé
    	  echo '<br>Nombre de sortie qui a lancé';
     
    	  // nombre de sortie qui a participé
     
    	  echo '<br>Le nombre de sortie qui a participé';
     
    	  // nombre de message sur le forum
     
    	  echo '<br><br>Le nombre de méssage qui a posté sur le forum';
    		  echo '</div>   
    		 <div id="profil_info_millieu"><div id="profil_titre_millieu">Ce membre vous plait</div>';
       // on affiche l\'émail ou le caché
     
           if (isset($_SESSION['pseudo']))
               {
               echo '<br />';
    if($data1['membre_email_cache'] == 0){
    echo'<strong>Adresse E-Mail : </strong>
    <a href="mailto:'.stripslashes($data1['membre_email']).'">
    '.stripslashes(htmlspecialchars($data1['membre_email'])).'</a><br />';
    }else{
     
     
    echo'<ul><li><div class="texte_blanc">Adresse E-Mail :Ne souhaite pas la rendre public</div></li>';
    }
     
     
           }
               else echo'<br /><br />';
     
     
    // ignorer un membre
    $ignorer = $pdo->query("SELECT COUNT(*) AS ig FROM forum_membres_ignorer 
    WHERE membre_id2 = '".intval($_SESSION['id'])."' AND id_m_ignorer = '".$_GET['m']."'");
     
    $ignorer2 = $pdo->query("SELECT COUNT(*) AS ig FROM forum_amis 
    WHERE ami_from = '".intval($_SESSION['id'])."' AND ami_to = '".$_GET['m']."'");
     
    $demande_forum_membre_ignorer = $ignorer->fetch();
    $dm = $ignorer2->fetch();
     
    // ajouter un ami
    $deja_ami = $pdo->query("SELECT ami_confirm , COUNT(*) AS nbr FROM forum_amis 
    WHERE ami_from = '".intval($_SESSION['id'])."' AND ami_to = '".$_GET['m']."'
    OR ami_from = '".intval($_SESSION['id'])."' AND ami_to = '".$_GET['m']."' GROUP BY ami_confirm");
    $da = $deja_ami->fetch();
    if($_SESSION['id'] == $_GET['m'])
    {
    echo '<li><div class="texte_blanc">Vous ne pouvez pas vous ajouter vous même</div></li>';
    }
    if ($da['nbr'] > 0 and $da['ami_confirm'] == 1)
    {
    echo '<li><div class="texte_blanc">Ce membre est déjà votre ami</div></li>';
    }else if($da['nbr'] > 0 and $da['ami_confirm'] == 0){
    echo '<li><div class="texte_blanc">Ce membre est en attente de validation pour devenir votre ami</div></li>';
    }
    elseif($demande_forum_membre_ignorer['ig'] > 0){
    echo '<li><div class="texte_blanc">Vous ne pouvre pas ajouter un membre ignorer à vos amis</div></li>';
    }elseif($_SESSION['id'] != $_GET['m']){
    echo '<li><a href="liste_d_ami.php?action=add&amp;membre_pseudo='.urlencode($data1['membre_pseudo'])
    .'" title="Ajouter un ami">Ajouter comme ami</a></li>';
    }
     
    // envoyer un mp
     
     
    if($data1['membre_id'] == $_SESSION['id']){
    echo '<li><div class="texte_blanc">Vous ne pouvez pas vous envoyer un MP</div></li>';
    }elseif($demande_forum_membre_ignorer['ig'] > 0){
    echo '<li><div class="texte_blanc">Vous ne pouvez pas envoyer un MP à un membre que vous ignorez</div></li>';
    }else{
     
    echo '<li><a href="messagesprives.php?action=nouveaump&amp;membre_pseudo='.urlencode($data1['membre_pseudo'])
    .'" title="Lui envoyer un MP">Envoyer un MP</a></li>';
    }
     
     
    if($_SESSION['id'] == $_GET['m'])
    {
    echo '<li>Vous ne pouvez pas vous ajouter comme amis</li>';
    }
     
    if($dm['ig'] > 0){
    echo '<li>Vous ne pouvez pas ignorer un amis</li>';
    }
    elseif ($demande_forum_membre_ignorer['ig'] > 0)
    {
    echo '<li>Vous ne pouvez pas ignorer ce membre car vous l\'avez deja ignorer</li>';
    }
    elseif($_SESSION['id'] != $_GET['m'])
    {
    echo '<li><a href="liste_des_membres_ignorer.php?action=ignorer&amp;membre_pseudo='.urlencode($data1['membre_pseudo'])
    .'&m='.$_GET['m'].'" title="ignorer ce membre">ignorer ce membre</a></li>';
    }
             echo'</ul>';
    		  echo '</div>    
    		  <div class="clear"></div>
    		  </div>';
     
     echo '<br><br>';
    echo '<div class="profil_titre_texte">Son Annonce</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met son annonce';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Sa bioagraphie</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met sa biographie';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Sa signature</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met sa signature';
    	echo '</div>';
    echo '<br><br>';
    echo '<div class="profil_titre_texte">Les commentaires du profil</div>';
    	echo '<div class="profil_titre_annonce">';
    	echo 'là on met les commentaires du profil que les autres membres peuvent laisser un petit message';
    	echo '</div>';
    ?>
    sinon si vous avez une idée de présentation qui peut faire en sachant que je n'ai pas tout mis le code php car j'entrain réfléchir comment je vois les profils des membres mais si vous des idées je suis preneurs

    merci de votre aide déjà pour le souci le grand espace entre le cadre profil droite et profil utilisateur il faut le rapproché que la c'est comme s'il y a des <br>

    merci pour vos conseilles pour amélioré le profil du membres

    mettez vous à la place d'un membre imaginer ceux qui vous attirais

    pour que je puisses voir des avis afin de faire un profil que tout le monde enfin presque a propos des cadres pour lire un profil

    je ne demande pas au niveau des couleurs mais au niveau des cadres comment vous imaginer un profil qui sera bien su pas comme tout les autres profil

    merci de votre conseille et de me remodifier mes codes pour que je teste
    Images attachées Images attachées  

  12. #12
    Membre expérimenté
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Octobre 2008
    Messages
    1 051
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Octobre 2008
    Messages : 1 051
    Points : 1 638
    Points
    1 638
    Par défaut
    Il faut que tu définisses des width équitables. Si tu as 3 blocs cote à cote, tu met les deux de gauches sur width:auto; par exemple. Ainsi tes deux blocs de gauche auront une largeur automatique.
    Règle N° 1 : Si tout va bien, ne touchez à rien.

Discussions similaires

  1. mettre un cadre sur une boite
    Par Him dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 29/06/2006, 18h49
  2. Mettre à jour une table depuis une autre
    Par snubi dans le forum Access
    Réponses: 1
    Dernier message: 20/04/2006, 19h28
  3. Mettre plusieurs case à cocher un après l'autre (formulaire)
    Par hstlaurent dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 29/06/2005, 08h48
  4. Réponses: 3
    Dernier message: 09/07/2004, 10h23

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