Séparation du profil dans les messages

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Séparation du profil dans les messages

Message par Elysion28 le Mer 28 Oct 2015 - 12:14

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : http://elysion-forumtest.forumgratuit.org/

Description du problème

Bonjours à tous! J'ai un problème minime avec mon forum mais qui pourtant me rend folle! Je me doute qu'il ne s'agit de pas grand chose mais ayant le nez dans les codes depuis tôt ce matin, je n'arrive pas à le résoudre.

Pour le moment, mon profil ressemble à ça http://img11.hostingpics.net/pics/886765Capturedcran20151028120448.png

ce qui me plait déjà pas mal, mais j'aimerai l'optimiser encore en "séparant" les parties du profil. En gros, j'aimerai que mon fond soit sous le profil et l'avatar, puis qu'il s'arrête, pour ensuite être sous les profils, puis qu'il s'arrête de nouveau pour être sous la partie RPG. En gros, que ça ressemble à ça: http://img11.hostingpics.net/pics/340935Capturedcran201510281204481.png

A chaque fois que j'essaye de bouger mes divs, tout se déforme dans cette partie, impossible d'y arriver >< du coup voici mon bout de template en question

Spoiler:
Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                <div class="fondprofil"> <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><div class="pseudo">{postrow.displayed.POSTER_NAME}</div><br/><br/></span><br />
            <span class="postdetails poster-profile">
                                  {postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
                                  <strong>{postrow.displayed.profile_field.LABEL}</strong>
                                  {postrow.displayed.profile_field.CONTENT}
                                  {postrow.displayed.profile_field.SEPARATOR}
                                  <!-- END profile_field --><br/><br/>
            <div onClick="this.firstChild.value=(this.firstChild.value=='C L I Q U E Z')?'M A S Q U E R':'C L I Q U E Z';this.lastChild.style.display=(this.firstChild.value=='C L I Q U E Z')?'none':'block';" style="text-align: center;"><input type="button" value="C L I Q U E Z"/><div style="display: none; text-align: left;">{postrow.displayed.POSTER_RPG}</div></div>
         </span><br /></div>
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Je mets aussi mon CSS, mais je doute qu'il soit utile pour ce cas précis

Spoiler:
Code:
/*PROFILS ET MESSAGES*/

.poster-profile img /*redimensionne les gifs des profils automatiquement*/{
  max-width: 200px;
  border-top:3px #216674 solid;
  border-bottom:3px #216674 solid;
}

.postbody /*messages justifiés*/ {
    display: block;
    text-align:justify;
  margin-left:10px;
  margin-right:10px;
}

.pseudo /*les pseudos*/ {
  font-family: 'Dancing Script', cursive;
color: #781625;
text-shadow:1px 1px 1px #824750;
font-size: 28px!important;
  text-align:center!important;
  Margin-bottom:-20px;
}

.fondprofil /*couleur de fond des profils*/ {
  background-color: #d6dfdd;
  padding:15px;
  margin:15px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
}

.bulle /*fond des messages*/ {
    background-color:#d6dfdd;
    border-left:3px #216674 solid;
  border-right:3px #216674 solid;
    padding : 10px;
    margin-right:15px;
      }

Ca doit être une histoire de position des balises, mais impossible de les mettre au bon endroit.

Merci d'avance pour votre aide Smile


Dernière édition par Elysion28 le Jeu 29 Oct 2015 - 23:27, édité 3 fois

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Mer 28 Oct 2015 - 13:53

Bonjour.
Pourquoi ne pas m'être un HR
Ex
<HR style="width:100%;height:3px;background-color:#333;">[/code]
En dessous des balises concerné.
Bonne journée.

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par Elysion28 le Mer 28 Oct 2015 - 13:57

Bonjour R-max, merci de ta suggestion Smile

Je pourrais effectivement mais ça ne donnerait pas exactement l'effet que je recherche. Je voudrais que le code "s'arrête" et reprenne ensuite. Je l'avais déjà fais il y a quelques années et ça fonctionnait, mais plus maintenant. une balise HR ne donnerait pas exactement l'effet que je recherche, mais c'était effectivement une idée ^^

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Mer 28 Oct 2015 - 14:08

Pourquoi par ce que le HR ne vas pas de bord à bord.

Ou alors à la place du HR une <div style blablablabla></div>

Avec une position relative par exemple.

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par Elysion28 le Mer 28 Oct 2015 - 16:27

En fait ce que je voudrais, c'est que ça fasse, en gros

Code:
<div>pseudo avatar</div>

<div> infos du profil</div>

<div>feuille RPG</div>

et à chaque fois que je mets cette forme dans mon template, tout se déforme, le profil est à 50% du forum, du coup la solution avec div style ne peut pas fonctionner non plus, et HR n'est pas assez large/épais pour faire ce que je veux faire Smile

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Mer 28 Oct 2015 - 16:45

Ok je regarde ce soir après le taff..

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par Elysion28 le Mer 28 Oct 2015 - 16:46

Merci c'est super sympa !!!

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Mer 28 Oct 2015 - 22:03

re , voila en gros la marche a suivre

la partie html
Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
       
        <div class="fondprofil"> <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a></span>
                  <div id="cadre_1" align="center">
                    <div class="pseudo">{postrow.displayed.POSTER_NAME}</div><br /><br />
            <div class="postdetails poster-profile">
              {postrow.displayed.POSTER_AVATAR}</div></div>
            <!-- BEGIN profile_field -->
                                <div id="cadre_2" align="center">{postrow.displayed.profile_field.LABEL}
                                  {postrow.displayed.profile_field.CONTENT}
                                  {postrow.displayed.profile_field.SEPARATOR}</div>
                                  <!-- END profile_field -->
        <div id="cadre_3" align="center">
            <div onClick="this.firstChild.value=(this.firstChild.value=='C L I Q U E Z')?'M A S Q U E R':'C L I Q U E Z';this.lastChild.style.display=(this.firstChild.value=='C L I Q U E Z')?'none':'block';" style="text-align: center;"><input type="button" value="C L I Q U E Z"/><div style="display: none; text-align: left;">{postrow.displayed.POSTER_RPG}
              </div></div></div>
        <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px"/></td>

ton css que j'ai modifier un peut ..
Code:
/*PROFILS ET MESSAGES*/
 
.poster-profile img /*redimensionne les gifs des profils automatiquement*/{
  max-width: 200px;
  border-top:0px #216674 solid;
  border-bottom:0px #216674 solid;
}
 
.postbody /*messages justifiés*/ {
    display: block;
    text-align:justify;
  margin-left:10px;
  margin-right:10px;
}
 
.pseudo /*les pseudos*/ {
  font-family: 'Dancing Script', cursive;
color: #781625;
text-shadow:1px 1px 1px #824750;
font-size: 28px!important;
  text-align:center!important;
  Margin-bottom:-20px;
}
 
.fondprofil /*couleur de fond des profils*/ {
  background-color: #d6dfdd;
  padding:15px;
  margin:15px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
}
 
.bulle /*fond des messages*/ {
    background-color:#d6dfdd;
    border-left:3px #216674 solid;
  border-right:3px #216674 solid;
    padding : 10px;
    margin-right:15px;
      }

mon css en plus pour tes cadres
Code:
#cadre_1{
  background-color: #d9d5e6;
  padding:15px;
  margin:15px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
  width:200px;
  height:100%;
}
#cadre_2{
  background-color: #d9d5e6;
  padding:0px;
  margin:0px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
  width:230px;
  height:100%;
  margin:auto;
  text-align:left;
}
#cadre_3{
  background-color: #d9d5e6;
  padding:15px;
  margin:15px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
  width:200px;
  height:100%;
}

je pense que tu va comprendre et pouvoir poursuivre ta modification

bonne soirée ,,

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par Elysion28 le Jeu 29 Oct 2015 - 9:40

Bonjour!! Merci pour l'aide, désolée je n'avais pas pu tester avant ce matin

J'ai tout copier coller comme tu me l'as indiqué, mais ça me donne ça:

http://img11.hostingpics.net/pics/394259Capturedcran20151029093850.png

Tout se déforme, comme quand je testais seule :/

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Jeu 29 Oct 2015 - 12:49

Ré. Je n'est pas cette image dans le codage fourni au départ.

Lui avez vous attribuer une taille .?

Un lien vivant vers le sujet serait mieux qu une capture.. ..

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par Elysion28 le Jeu 29 Oct 2015 - 13:03

L'image est un champ profil, et elle est redimensionnée automatiquement par

Code:
.poster-profile img /*redimensionne les gifs des profils automatiquement*/{
  max-width: 200px;
  border-top:0px #216674 solid;
  border-bottom:0px #216674 solid;
}

Ca permet à tous les membres de mettre les images de leur choix en profil, sans que cela ne déforme le forum.

Et je viens de remarquer qu'il y a 2 fonds derrière le profil maintenant, un bleu très clair, et un un peu plus foncé, il ne devrait y avoir que le premier, qui devait être celui séparé :/

Voilà le lien direct: http://vintagephonic2.forumgratuit.org/t26-lorem-ipsum#163

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Jeu 29 Oct 2015 - 19:58

bonjour excusé moi je pense que vous alliez vous en sortir . je vous avez rajouté les cadres , c'est pour cela qu'il y a 2 fond

remplacé les 3 codes de hier par ceux la

le html
Code:
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
       
        <div class="fondprofil_0"> <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a></span>
                  <div id="fondprofil_1" align="center">
                    <div class="pseudo">{postrow.displayed.POSTER_NAME}</div><br /><br />
            <div class="postdetails poster-profile">
              {postrow.displayed.POSTER_AVATAR}</div></div>
            <!-- BEGIN profile_field -->
          <div id="fondprofil_2" align="center">{postrow.displayed.profile_field.LABEL}
                                  {postrow.displayed.profile_field.CONTENT}
                                  {postrow.displayed.profile_field.SEPARATOR}</div>
                                  <!-- END profile_field -->
          <div id="fondprofil_3" align="center">
            <div onClick="this.firstChild.value=(this.firstChild.value=='C L I Q U E Z')?'M A S Q U E R':'C L I Q U E Z';this.lastChild.style.display=(this.firstChild.value=='C L I Q U E Z')?'none':'block';" style="text-align: center;"><input type="button" value="C L I Q U E Z"/><div style="display: none; text-align: left;">{postrow.displayed.POSTER_RPG}
              </div></div></div>
        <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px"/>
        </td>

le css le votre avec une autre modif
Code:
/*PROFILS ET MESSAGES*/
 
.poster-profile img /*redimensionne les gifs des profils automatiquement*/{
  max-width: 200px;
  border-top:0px #216674 solid;
  border-bottom:0px #216674 solid;
}
 
.postbody /*messages justifiés*/ {
    display: block;
    text-align:justify;
  margin-left:10px;
  margin-right:10px;
}
 
.pseudo /*les pseudos*/ {
  font-family: 'Dancing Script', cursive;
color: #781625;
text-shadow:1px 1px 1px #824750;
font-size: 28px!important;
  text-align:center!important;
  Margin-bottom:-20px;
}
 
/**.fondprofil_0 *couleur de fond des profils*{
  background-color: #d6dfdd;
  padding:15px;
  margin:15px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
}**/
 
.bulle /*fond des messages*/ {
    background-color:#d6dfdd;
    border-left:3px #216674 solid;
  border-right:3px #216674 solid;
    padding : 10px;
    margin-right:15px;
      }

le css le mien
Code:
#fondprofil_1 /*couleur de fond des profils*/ {
  background-color: #d6dfdd;
  padding:15px;
  margin:15px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
  width:302px;
}
#fondprofil_2 /*couleur de fond des profils*/ {
  background-color: #d6dfdd;
  padding-right:15px;
  padding-left:15px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
  width:302px;
  margin:auto;
}
#fondprofil_3 /*couleur de fond des profils*/ {
  background-color: #d6dfdd;
  padding:15px;
  margin:15px;
  border-left:3px #216674 solid;
  border-right:3px #216674 solid;
  width:302px;
}


dans #fondprofil_1 , 2 , 3 j'ai fixer une taille (width:302px;)
a vous de joué dessus pour la largeur voulu .

ps:en invité ont ne voie pas l'image qui déborde ,mais ces codes doivent faire l'affaire maintenant ..

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par Elysion28 le Jeu 29 Oct 2015 - 21:27

Toujours pas :/ et j'ai été mettre l'image en visible des invités, je ne savais pas qu'il était impossible de la voir autrement

http://vintagephonic2.forumgratuit.org/t26-lorem-ipsum#163

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Jeu 29 Oct 2015 - 22:00

essayer d'ajouté ce code css

Code:
#fondprofil_2 img{max-width:200px;}

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par Elysion28 le Jeu 29 Oct 2015 - 22:45

C'est parfait! Merci beaucoup pour l'aide Smile

edit: dernière question: comment puis-je redimensionner la police d'écriture des profils? Elle doit normalement avoir la même taille que la police des posts du forum, et même un font-size:TAILLEpt!important; n'y fait rien?

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Jeu 29 Oct 2015 - 23:22

vous avez mis

Code:
font-size: 11pt!important;
il faut mettre
Code:
font-size: 11px!important;

c'est pas un t mais un x Mince

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par Elysion28 le Jeu 29 Oct 2015 - 23:26

J'ai confondu avec photoshop mdr

merci pour l'aide c'est parfait **

Elysion28
*

Féminin
Messages : 41
Inscrit(e) le : 11/03/2011

http://elysion-forumtest.forumgratuit.org/
Elysion28 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Séparation du profil dans les messages

Message par R-max le Jeu 29 Oct 2015 - 23:27

de rien ^^

R-max
# Tropactif #

Masculin
Messages : 1528
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum