Hauteur des messages
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Hauteur des messages
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
Re: Hauteur des messages
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 :
Supprimez les lignes position:absolute; et du coup également top:0; et left:0; qui ne servent plus à rien, ce qui donne :
Localisez le code suivant :
Localisez ce passage :
voilà, chaque élément est à sa place initiale, après vous vouliez peut être modifier légèrement leur position ? De quelle façon ?
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;
}
- Code:
.rang {
margin: auto;
position: relative;
text-align: center;
z-index: 3;
}
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;
}
- 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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Hauteur des messages
Pour ma part je cherchais juste à imposer une hauteur pour les poste afin que les avatars n'empiète pas sur celui du dessous
J'ai trouvé un solution temporaire
Je vous donne quand même mon css
J'ai trouvé un solution temporaire
Je vous donne quand même mon css
- 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;
}
Re: Hauteur des messages
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 :
Sinon pour appliquer une hauteur minimale aux messages, un code possible est le suivant :
- Code:
.postbody {
min-height: 400px;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Hauteur des messages
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?
Alors si cela vient du rang je n'aurai plus jamais ce problème même si mon avatar fait 200*400?
Re: Hauteur des messages
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
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- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Hauteur des messages
D'accord alors je vais suivre vos consignes à la lettre
Merci de m'avoir expliqué c'est déjà plus compréhensible comme ça
Merci de m'avoir expliqué c'est déjà plus compréhensible comme ça
Re: Hauteur des messages
de rien ^^
(si votre problème est résolu, n'oubliez pas d'éditer votre premier message pour cocher l'icone "résolu" ^^)
(si votre problème est résolu, n'oubliez pas d'éditer votre premier message pour cocher l'icone "résolu" ^^)
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Sujets similaires
» Hauteur (et taille de police) de la barre comprenant "Forums", "Sujets", "Messages" et "derniers messages"
» Hauteur des messages
» Hauteur des Widgets
» Augmenter la hauteur du cadre des messages de l'Éditeur
» Centrer sur la hauteur l'effet 3D de la colonne derniers messages
» Hauteur des messages
» Hauteur des Widgets
» Augmenter la hauteur du cadre des messages de l'Éditeur
» Centrer sur la hauteur l'effet 3D de la colonne derniers messages
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum