Hauteur des messages

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

Résolu Hauteur des messages

Message par Amacky le Ven 13 Mar 2015 - 10:34

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 : 13/03/2015
Lien du forum : http://institut-de-medicis.forumactif.org/

Description du problème

Bonjour à tous et à toutes,

Je rencontre un petit souci que je n'avais pas forcément vu avant parce que personne n'avait encore posté à ma suite et mes messages étaient assez longs pour que le problème n'arrive pas...

J'aimerai pouvoir donné un taille obligatoire pour chaque réponse à un sujet parce que mon avatar chevauche celui du dessous et quand je veux voir la fiche du voisin du dessous on voit le pseudo de l'avatar du dessus

Est ce possible de le faire?

Merci par avance pour les personnes qui prendront la peine de me répondre Smile


Amacky
**

Messages : 92
Inscrit(e) le : 16/09/2012

http://institut-de-medicis.forumactif.org/
Amacky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur des messages

Message par MlleAlys le Ven 13 Mar 2015 - 13:05

Bonjour,
pourriez vous fournir le template modifié concerné s'il vous plait ?





EDIT :

Avec juste la correction des positions du css ça ira finalement ^^ Il y a trop de positions absolues, et donc les tailles des éléments ne sont pas prises en compte et ils se chevauchent, cependant certaines sont inutiles, et on peut les retirer :

Retrouvez le passage suivant :
Code:
.infoprofil {
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -moz-transform: rotate(-3deg);
  -moz-transform-origin: 50% 100%;
  -moz-transition: all 1s;
  -ms-transform: rotate(-3deg);
  -ms-transform-origin: 50% 100%;
  -ms-transition: all 1s;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  -o-transition: all 1s;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-transform: rotate(-3deg);
  -webkit-transform-origin: 100% 50%;
  -webkit-transition: all 1s;
  background-image: url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
  box-shadow: 2px 2px 5px -2px #595959;
  color: grey;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#595959,Direction=134,Strength=5);
  font-size: 13px;
  height: 290px;
  left: 0;
  overflow: auto;
  padding: 15px;
  position: absolute;
  top: 0;
  transform: rotate (-3deg);
  transform-origin: 50% 100%;
  transition: all 1s;
  width: 170px;
  z-index: 0;
}

Supprimez les lignes position:absolute; et du coup également top:0; et left:0; qui ne servent plus à rien, ce qui donne :

Code:
.infoprofil {
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -moz-transform: rotate(-3deg);
  -moz-transform-origin: 50% 100%;
  -moz-transition: all 1s;
  -ms-transform: rotate(-3deg);
  -ms-transform-origin: 50% 100%;
  -ms-transition: all 1s;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  -o-transition: all 1s;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-transform: rotate(-3deg);
  -webkit-transform-origin: 100% 50%;
  -webkit-transition: all 1s;
  background-image: url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
  box-shadow: 2px 2px 5px -2px #595959;
  color: grey;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#595959,Direction=134,Strength=5);
  font-size: 13px;
  height: 290px;
  overflow: auto;
  padding: 15px;
  transform: rotate (-3deg);
  transform-origin: 50% 100%;
  transition: all 1s;
  width: 170px;
  z-index: 0;
}

Localisez le code suivant :
Code:
.rang {
  margin: -75px auto 0;
  position: relative;
  text-align: center;
  z-index: 3;
}
Supprimez la marge négative de -75px, ce qui donne :
Code:
.rang {
  margin: auto;
  position: relative;
  text-align: center;
  z-index: 3;
}
(Si vous souhaitez modifier la position du rang, il faudra le faire plutôt par un autre moyen, les marges pour positionner ne sont pas conseillées ^^" Mais comme je ne vois pas d'image de rang, je ne sais pas trop quel rendu vous attendez exactement...)

Localisez ce passage :
Code:
.pseudo {
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  background: #d3d3d3;
  background-image: url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
  border: 3px double grey;
  box-shadow: 2px 2px 5px -2px #595959;
  display: block;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#595959,Direction=134,Strength=5);
  font-family: Georgia, cursive;
  font-size: 14px;
  height: 1em;
  left: 10px;
  margin: -10px auto auto;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 350px;
  width: 150px;
  z-index: 2;
}
Retirez les lignes position:absolute; ainsi que top:350px; left:10px; et z-index:2; qui ne servent plus. Retirez également la marge négative. Ce qui donne :
Code:
.pseudo {
  -moz-box-shadow: 2px 2px 5px -2px #595959;
  -o-box-shadow: 2px 2px 5px -2px #595959;
  -webkit-box-shadow: 2px 2px 5px -2px #595959;
  background: #d3d3d3;
  background-image: url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
  border: 3px double grey;
  box-shadow: 2px 2px 5px -2px #595959;
  display: block;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#595959,Direction=134,Strength=5);
  font-family: Georgia, cursive;
  font-size: 14px;
  height: 1em;
  margin: auto;
  padding: 10px;
  text-align: center;
  width: 150px;
}

voilà, chaque élément est à sa place initiale, après vous vouliez peut être modifier légèrement leur position ? De quelle façon ?

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur des messages

Message par Amacky le Ven 13 Mar 2015 - 13:33

Pour ma part je cherchais juste à imposer une hauteur pour les poste afin que les avatars n'empiète pas sur celui du dessous Surprised

J'ai trouvé un solution temporaire Smile

Je vous donne quand même mon css Smile

Code:
body {
background-repeat: no-repeat;
}
 
/* Barre de Navigation */
.navig {
width: 100%;
height:20px;
position: fixed;
z-index: 999;
left:0px;
background-color: #f2e485;
border-bottom: 3px solid #006600;
top: 0px
}
a.mainmenu {
margin: 5px;
font-family: Arial;
font-size: 12px;
}

/*Fin barre navigation */



        /********************************************* CATÉGORIES *********************************************/
/*Cadre du bloc qui contient chaque catégorie*/
.cate_bloc_cadre {
  background: #ffffff;
  border: 4px solid #c3ec50;
  margin-bottom: 15px;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
}
/*Bloc qui contient chaque catégorie*/
.cate_bloc {
  background: #fefdb1;
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
}

/*Titre de catégorie*/
.cate_title h2 {
  display: inline-block;
  background: #d5e978;
  border-radius: 15px;
  box-shadow: 2px 2px 1px #ffffff;
  margin: 0px;
  margin-right: 5%;
  padding: 10px;
  padding-left: 180px;
  padding-right: 180px;
  color: #006600;
  font-family: Lobster, cursive;
  font-size: 28px;
  text-shadow: 0 2px 2px #fefdb1;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transition: 1s;
  -webkit-transition: 1s;
}
/*Titre de catégorie au survol*/
.cate_title h2:hover {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

/*Bloc qui contient chaque forum*/
.forum_bloc {
  margin-top: 50px;
  margin-bottom: 30px;
}

/*Bloc du Nombre de messages et de sujets*/
.forum_stats {
  display: inline-block;
  background: #f2e485;
  border-radius: 15px 15px 0 0;
  box-shadow: 0px 0px 5px 2px #a87f4c;
  margin-right: 30px;
  margin-bottom: -10px;
  padding: 20px;
  padding-top: 2px;
  padding-bottom: 6px;
  color: #312516;
  font-family: Times New Roman;
  font-size: 13px;
}

/*Bloc contenant la description, le nom du forum et l'image NewOldLock*/
.forum_bloc_left {
  position: relative;
  background: #f2e485;
  border-radius: 15px;
  box-shadow: 0px 0px 5px 2px #a87f4c;
  padding: 10px;
}

/*Image NewOldLock*/
.forum_newoldlock img {
  width: 90px;
  height: 120px;
  margin-right: 15px;
}

/*Titre de forum*/
span.forumlink {
  display: block;
  text-align: left;
}
/*Lien du titre de forum*/
a.forumlink {
  color: #006600!important;
  font-family: parisienne;
  font-size: 24px;
  text-shadow: 2px 2px 1px #fefeea;
  text-decoration: none!important;
  letter-spacing: 0px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Lien du titre de forum au survol*/
a.forumlink:hover {
  color: #003a00!important;
  letter-spacing: 5px;
}

/*Description des forums*/
.forum_desc {
  max-height: 85px;
  margin-top: 1px;
  margin-right: -5px;
  padding-right: 5px;
  overflow: auto;
  color: #312516;
  font-family: Times New Roman;
  font-size: 14px;
  text-align: justify;
}

/*Bloc des sous-forums*/
.forum_sf {
  display: inline-block;
  max-width: 80%;
  background: #f2e485;
  border-radius: 0 0 15px 15px;
  box-shadow: 0px 0px 5px 2px #a87f4c;
  margin-left: 30px;
  margin-top: -11px;
  padding-left: 10px;
  padding-right: 10px;
  color: #006600;
  text-align: center;
}
/*Liens des sous-forums*/
.forum_sf a.gensmall {
  display: inline-block;
  padding-bottom: 1px;
  padding-top: 4px;
  color: #006600;
  font-family: Times New Roman;
  font-size: 13px;
}

/*Bloc du dernier message*/
.forum_last_bloc {
  display: block;
  width: 258px;
  height: 108px;
  background: url('http://img4.hostingpics.net/pics/365067Sanstitre.png');
  margin-left: 15px;
  padding-top: 50px;
}
/*Contenu du dernier message*/
.forum_last {
  color: #312516;
  font-family: Times New Roman;
  font-size: 14px;
  text-align: center;
}
/*Mise en forme des liens du dernier message*/
.forum_last a {
  color: #006600;
  font-family: Times New Roman;
  font-size: 14px;
}

/*Mise en forme des liens survolés*/
.forum_last a:hover, .forum_sf a.gensmall:hover {
  color: #003a00;
}
  /********************************************* FIN DES CATÉGORIES *********************************************/
/* CODES POUR LE QEEL */

#qeel h1, #qeel h2, #qeel h3, #qeel p {
        margin: 0; padding: 0; font-weight: normal;
      }

      #qeel {
        width: 800px;
        min-height: 150px;
        border-radius: 10px;
        background: #f2e485;
        margin: 75px auto 20px;
        position: relative;
        padding-top: 50px;
        font-family: "abeatbykai", sans-serif;
        font-size: 12px;
        letter-spacing: 1px;
        color: #006600;
      }

      #qeel a {
        color: #006600;
        text-decoration: none;
      }

      #qeel a, #qeel h2 {
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -ms-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
      }

      #qeel a:hover {
        color: #003a00;
      }
     
      #qeel h1 {
        width: 800px;
        height: 75px;
        background: url("http://i38.servimg.com/u/f38/19/09/12/50/voir_v13.jpg") no-repeat;
        position: absolute;
        top: -70px;
        left: 22%;
        margin-left: -175.4px;
        text-indent: -9999px;
      }

      #qeel td {
        vertical-align: top;
      }

      #qeel td p .gensmall, #qeel td.row1 .gensmall, #qeel .gensmall {
        font-family: "century gothic", sans-serif;
        color: black;
        font-size: 10px;
      }

      #qeel table td {
        border-radius: 10px;
        position: relative;
        padding-top: 25px;
        min-height: 50px;
      }

      #qeel table td.withbg {
        background: #fefdb1;
      }

      #qeel h2 {
        /*height: 34px;*/
        position: absolute;
        top: -12px;
        z-index: 3;
        font-size: 24px;
        font-family: 'Covered By Your Grace', cursive;
        color: #006600;
      }

      #qeel h2:hover {
        color: #003a00;
      }

      #qeel td.row1, td.row3.over:hover {
        background-color: transparent !important;
      }

      #qeel table.annifs {
        margin-top: -30px !important;
      }

      table.annifs tbody tr:nth-child(2) td {
        padding-top: 0px !important;
      }

      .groups {padding: 10px !important; text-align: center; }

/* CREDITS */

      #credits {
        position: absolute;
        padding: 0px 10px;
        bottom: -20px;
        right: 0px;
        height: 20px;
        line-height: 20px;
        font-size: 8px;
        color: gray;
        text-transform: uppercase;
        text-shadow: 1px 1px 0px #ffffff;
      }

/*fin qeel*/

/*Profil avec rotation par
    Alumine pour Never-Utopia*/

    #profilmembre {
      position:relative;
      height: 400px;/*hauteur de l'avatar*/
      width: 200px;/*largeur de l'avatar*/
      margin: 10px auto;
    }

    .avatars {
      position: absolute;
      top: 0;
      left: 0;
      background:grey;
      width: 100%;
      height: 100%;
      z-index:3;
      -webkit-transform: rotate(-3deg);
      -webkit-transform-origin:100% 50%;
      -moz-transform: rotate(-3deg);
      -moz-transform-origin:50% 100%;
      -ms-transform: rotate(-3deg);
      -ms-transform-origin:50% 100%;
      transform: rotate (-3deg);
      transform-origin:50% 100%;
      -webkit-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
      -ms-transition:all 1s;
      transition:all 1s;
      -moz-box-shadow: 2px 2px 5px -2px #595959;
      -webkit-box-shadow: 2px 2px 5px -2px #595959;
      -o-box-shadow: 2px 2px 5px -2px #595959;
      box-shadow: 2px 2px 5px -2px #595959;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
    }

    .avatar img: {width:100%; height: 100%;}

    .infoprofil {
      position: absolute;
      top: 0;
      left: 0;
      padding:15px;
      width: 170px;/* hauteur de l'avatar moins 2x 15px de padding*/
      height: 370px;/*idem largeur*/
      z-index:0;
      background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);/*image de fond des infos du profil*/
      color: grey;
      font-size: 13px;
      overflow: auto;
      -webkit-transform: rotate(-3deg);
      -webkit-transform-origin:100% 50%;
      -moz-transform: rotate(-3deg);
      -moz-transform-origin:50% 100%;
      -ms-transform: rotate(-3deg);
      -ms-transform-origin:50% 100%;
      transform: rotate (-3deg);
      transform-origin:50% 100%;
      -webkit-transition:all 1s;
      -moz-transition:all 1s;
      -o-transition:all 1s;
      -ms-transition:all 1s;
      transition:all 1s;
      -moz-box-shadow: 2px 2px 5px -2px #595959;
      -webkit-box-shadow: 2px 2px 5px -2px #595959;
      -o-box-shadow: 2px 2px 5px -2px #595959;
      box-shadow: 2px 2px 5px -2px #595959;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
    }

    .infoprofil a {color: #3F2941;}/* couleur de "envoyer un mp"*/

    #profilmembre:hover > .avatars {
      opacity: 0;
      filter: alpha(opacity=0);
      visibility: hidden;
      z-index:1;
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: 100% 50%;
      -moz-transform: rotate(0deg);
      -moz-transform-origin: 100% 50%;
      -ms-transform: rotate(0deg);
      -ms-transform-origin: 100% 50%;
      transform: rotate (0deg);
      transform-origin: 100% 50%;
    }

    #profilmembre:hover > .infoprofil {
      -webkit-transform: rotate(0deg);
      -webkit-transform-origin: 100% 50%;
      -moz-transform: rotate(0deg);
      -moz-transform-origin: 100% 50%;
      -ms-transform: rotate(0deg);
      -ms-transform-origin: 100% 50%;
      transform: rotate (0deg);
      transform-origin: 100% 50%;
    }

    .pseudo{
      display: block;
      height: 1em;
      width: 150px;
      padding:10px;
      margin: auto;
      margin-top: -10px;
      font-size: 14px;/*taille du pseudo*/
      font-family: Georgia, cursive;
      border: 3px double grey;
      text-align:center;
      z-index: 2;
      position:absolute;
      top:450px; left:10px;
      background: lightgrey;
      background-image:url(http://i55.servimg.com/u/f55/18/43/14/28/i_back10.gif);
      -moz-box-shadow: 2px 2px 5px -2px #595959;
      -webkit-box-shadow: 2px 2px 5px -2px #595959;
      -o-box-shadow: 2px 2px 5px -2px #595959;
      box-shadow: 2px 2px 5px -2px #595959;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#595959, Direction=134, Strength=5);
    }
    .rang {
      position:relative;
      margin:-75px auto 0px;/* marges de l'image de rang (haut côtés bas)*/
      z-index:3;
      text-align:center;
    }
  /*fin avatar*/

table.forumline tr th{
        background-image:none !important;
        color: black;
    }



/**********Top Sites*********/

#top_sites {
background:#FFFFFF; /* couleur de fond */
border:2px solid #000000; /* couleur de la bordure */
position:fixed; /* élément flottant */
left:1200px; /* position par rapport à la gauche */
top:400px; /* position par rapport au haut */
height:175px; /* hauteur du cadre */
width:100px; /* largeur du cadre */}

/*********Fin Top Site********/


/* Taille des avatars CB*/
 
#chatbox .cb-avatar > img {
  height: 20px;
  width: 40px;
}
 
/* Calque des avatars */
 
#chatbox .cb-avatar {
  float: left;
  margin-right: 4px;
  background: none repeat scroll 0 0 #fff;
  border: 1px solid #d5d5d5 !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 30px;
  padding: 1px;
  vertical-align: middle;
  width: 30px;
}
 
/* Ligne de séparation */
#chatbox > p {
  border-bottom: 1px solid #d5dde5;
}

/******Fin taille avatar CB***********/


/*Par Alu' pour NU*/
.fondpost{
  background-color: rgba(255,255,204, 0.3);
  border: 1px solid #BABABA;
  border-radius:500px / 90px;
  padding: 50px 15px;
  min-height: 500px;
  margin-top: 10px;
}

Amacky
**

Messages : 92
Inscrit(e) le : 16/09/2012

http://institut-de-medicis.forumactif.org/
Amacky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur des messages

Message par MlleAlys le Ven 13 Mar 2015 - 13:39

C'est un peu contourner le problème puisque le problème de chevauchement vient de la mise en forme du profil... x3

Sinon pour appliquer une hauteur minimale aux messages, un code possible est le suivant :
Code:
.postbody {
  min-height: 400px;
}
mais il me semble que vous l'utilisez déjà sur votre forum ^^

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur des messages

Message par Amacky le Ven 13 Mar 2015 - 13:45

D'accord c'est super cool de m'avoir donné un coup de main!

Alors si cela vient du rang je n'aurai plus jamais ce problème même si mon avatar fait 200*400?

Amacky
**

Messages : 92
Inscrit(e) le : 16/09/2012

http://institut-de-medicis.forumactif.org/
Amacky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur des messages

Message par MlleAlys le Ven 13 Mar 2015 - 14:44

Le problème de superposition ne vient pas que du rang, vous avez tous les blocs du profil (avatar, infos, rang et pseudo) qui sont en position absolue. Or si un élément est en position absolue, c'est comme 'il n'était plus vraiment dans son conteneur, il est juste positionné par rapport au conteneur.
Du coup votre profil n'a pas la hauteur qu'il faut par rapport à l'affichage de ce qu'il y a dedans :
Par exemple votre bloc profil fait 400px de haut, alors que le pseudo par exemple est positionné de façon absolue 450px en dessous du début du profil. Donc le pseudo dépasse.
Le rang lui n'est pas en position absolue, mais a une marge négative pour le repositionner qui décale encore les affichages de ce qu'il y a autour.
Bref, c'est un ensemble de choses qui font que l'affichage du profil tel qu'il est côté n'est pas optimal et ne s'adapte pas bien.

Pour ce qui est du profil qui s'adapte à la taille de l'avatar, c'est un autre problème, mais qui nécessite de toute façon une partie des correction proposées dans mon premier message, pour :
- soit forcer l'avatar à couvrir le profil (je parle bien de l'image et pas du bloc gris),
- soit modifier la hauteur du bloc des infos en fonction de la hauteur de l'avatar

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur des messages

Message par Amacky le Lun 16 Mar 2015 - 9:22

D'accord alors je vais suivre vos consignes à la lettre Smile

Merci de m'avoir expliqué c'est déjà plus compréhensible comme ça Smile

Amacky
**

Messages : 92
Inscrit(e) le : 16/09/2012

http://institut-de-medicis.forumactif.org/
Amacky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Hauteur des messages

Message par MlleAlys le Jeu 19 Mar 2015 - 16:42

de rien ^^

(si votre problème est résolu, n'oubliez pas d'éditer votre premier message pour cocher l'icone "résolu" ^^)

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys 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