| Souci de cadre autour du profil | |
|
Plouf.
{ Membre }
Messages : 40
| Bonjour bonjour ! Merci d'avance à ceux qui prendront le temps de m'aider :3 Pour faire simplement, j'aimerai que les informations du profil (à savoir message, âge & co) et la feuille de personnage soient toutes à l'intérieur du même cadre. Pour l'instant, mon souci est que malgré les codes, les cadres s'emboitent les uns dans les autres au lieu de ne former qu'un seul et même cadre comme vous pouvez le voir ici Voici la partie de mon template concernée : - Code:
-
<!-- BEGIN displayed --> <tr class="post"> <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"> <div class=profilcadre><center>{postrow.displayed.ONLINE_IMG}</center> <span class="postdetails poster-profile"><div class=avamembre>{postrow.displayed.POSTER_AVATAR}</div> <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><div class=pseudo>{postrow.displayed.POSTER_NAME}</div></span><br /> <center>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} <!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --></center></span> {postrow.displayed.RANK_IMAGE}<br /><br /> <!-- BEGIN profile_field --> <div class="cadre1"><span class="postdetails poster-profile">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /></div></div> <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /> </td> Et le CSS qui s'y rapporte : - Code:
-
.profilcadre{ padding:3px; background-color:#FFF9D4; margin-top:4px;}
.avamembre{ width:200px; height:320px; margin-bottom:10px; align:center; margin-top:4px; margin-left:1px; box-shadow: 0px 0px 4px #FFFEF5; -moz-box-shadow: 0px 0px 4px #FFFEF5; }
.postdetails.poster-profile a img { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; align:center; margin-bottom:-14px;}
.pseudo{ background-color:#FFFEF5; padding:3px; display:block; border: 1px solid #F2DDB4; font-size:10px; letter-spacing:1px; word-spacing:1px; padding:2px; margin-left:1px; margin-top:-5px; font-family:georgia; text-transform:uppercase; text-shadow:1px 1px 1px #FFF9D4; text-align:center; align:center;}
.cadre1{ background-color:#FFFEF5; padding:3px; display:block; text-align:justify; margin-left:-1px; border: 1px solid #F2DDB4; line-height:10px; font-size:10px;} Je remercie encore une fois ceux qui pourront m'aider J'aimerai simplement y arriver parce que je m'arrache les cheveux dessus depuis au moins deux heures et ça commence à me rendre folle xD. | | |
|
| |
Safran
{ Spécialiste }
Messages : 658
| Coucou ! Tu as plusieurs cadres pour la simple raison que tu encadres aussi le séparateur. On va se concentrer dans cette partie de ton code : - Code:
-
<div class="cadre1"><span class="postdetails poster-profile">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /></div></div> Si on prend chaque balise l'une après l'autre tu as : {postrow.displayed.profile_field.LABEL} : titre de l'information (par exemple : nombre de messages, localisation){postrow.displayed.profile_field.CONTENT} : réponse {postrow.displayed.profile_field.SEPARATOR} : séparation Etant donné que tu encadres la séparation, le cadre se répète à chaque fois. Sur mon forum, j'ai supprimé le séparateur car il ne me servait à rien. Sinon tu as juste à retirer le séparateur de l'encadrement de ta balise. Au finale tu as normalement quelque chose comme sa : - Code:
-
<div class="cadre1"><span class="postdetails poster-profile">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}</div>{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /></div> DIt moi si sa marche ! | | |
|
| |
Plouf.
{ Membre }
Messages : 40
| Merci beaucoup pour ta rapidité Safran ! Voici ce que ça me donne en utilisant ce que tu as mis -j'avais essayé également sans prendre le séparator mais ça ne donnait pas l'effet attendu, soit le suivant : here | | |
|
| |
Safran
{ Spécialiste }
Messages : 658
| Juste, je n'ai pas compris si sa donnait sa en enlevant le séparateur ou en le mettant en dehors de la balise ? | | |
|
| |
Plouf.
{ Membre }
Messages : 40
| En le mettant hors de la balise ^^
edit : le résultat est le même si je supprime la ligne du séparator | | |
|
| |
Safran
{ Spécialiste }
Messages : 658
| Alors essaye carrément de mettre la balise en dehors de la partie ! Donc comme sa : - Code:
-
<div class="cadre1"><span class="postdetails poster-profile"> <!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /></div></div> Si sa ne marche pas à ce coup, je regarde sa de plus près sur mon forum test . | | |
|
| |
Plouf.
{ Membre }
Messages : 40
| Il me dit ceci : La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte.
Pourtant j'ai beau relire, j'vois pas où ça coince x) (ou bien je suis très fatiguée et aveugle)
edit : ça fonctionne ! Je te vénère Safran merci mille fois *0* | | |
|
| |
Safran
{ Spécialiste }
Messages : 658
| Etrange ... Bon, je regarde sa sur mon forum test, j'essaye de te donner la réponse au plus vite. (si quelqu'un à la réponse qu'il ne se prive pas ) | | |
|
| |
Plouf.
{ Membre }
Messages : 40
| C'est bon tout roule *0* J'ai même séparé les infos du profils de la fiche de personnage, ainsi ça me donne deux cadres. Le seul petit pépin à noter est le suivant, un espace qui sort de nulle part au-dessus de "feuille de personnage" (qui ne semble pas même avec un padding négatif) : here | | |
|
| |
Safran
{ Spécialiste }
Messages : 658
| Mais sa c'est parce que tu as deux cadres non ? | | |
|
| |
Plouf.
{ Membre }
Messages : 40
| Bah il n'y a pas d'espace dans le premier donc j'vois pas pourquoi ça en fait un maintenant, en fait x) Les div sont bien séparées :3 | | |
|
| |
Safran
{ Spécialiste }
Messages : 658
| Ah ok ! Tu parles bien du saut à la ligne dans le deuxième cadre ? Et non pas de l'espace entre les deux cadres ?
Alors là je ne vois pas trop comment t'aider car il y a juste {postrow.displayed.POSTER_RPG} , et je ne vois pas comment le modifier. Ce que tu as essayé c'est padding-top : -2px ?
| | |
|
| |
Plouf.
{ Membre }
Messages : 40
| Oui voilà tu as bien compris ^^. J'ai même essayé -50 pour voir ça bougeait et que dalle x'). (Au passage totalement HS, est-ce que tu sauras comment faire pour que la zone de texte s'étende jusqu'au bord de la flèche rouge, en gros qu'elle prenne la même largeur que le reste ? image ici. Car j'y arrive sur aucun de mes forums, j'vois pas comment paramétrer ce truc qui peut bouger ensuite à ton gré avec une largeur de base x) Et les dipslay:block n'aident pas) | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Bonjour Plouf ! Pour commencer je tiens à te signaler que la valeur des attributs HTML doit toujours être entre guillemets, on écrit donc <div class="profilcadre"> et non pas <div class=profilcadre> Ensuite, il ne faut jamais mettre de div à l'intérieur d'un span, les span sont des éléments inline (en ligne) et les div sont des blocs, c'est un peu comme si tu mettais un cube dans une feuille de papier (plate, impliable). Il faut que tu remplaces certains de tes span par un div. Enfin, la balise <center> est obsolète, tu devrais la remplacer par <div align="center"> Pour le saut de ligne j'ai une vague idée d'où ça pourrait venir mais j'ai besoin de voir le forum où est installé le code pour donner mon avis sur la question. Et pour le bloc de texte, il te suffit de régler ça en créant un sélecteur CSS qui pointe vers les blocs textarea du profil. Donc quelque chose comme ça : - Code:
-
.profilcadre textarea { width:LARGEURpx; } | | |
|
| |
Plouf.
{ Membre }
Messages : 40
| Merci pour tous tes conseils (: J'ai essayé ce que tu as mis avant que tu ne postes et ça fonctionne bien :3. En ce qui concerne les span du code, je n'y ai pas touché il s'agit des codes de base du template ^^. Le forum se trouve ici. En tout cas merci beaucoup ! | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Yep, mais tu as mis des div à l'intérieur desdits span, du coup pour que le code soit correct il faut les transformer en div. Enfin bref. Pour ton souci je me suis trompée dans ma supposition. Je ne sais pas trop comment virer ce <br /> qui s'incruste. A la rigueur tu pourrais "tricher" en t'arrangeant pour le rapprocher un peu du bord (et donc en l'éloignant un peu du texte en dessous) pour que ça soit plus équilibré, si tu le places le profil RPG dans un div avec la classe de ton choix, et après quelque chose comme ceci : - Code:
-
.ClasseProfilRPG a { position:relative; bottom:5px; } | | |
|
| |
Plouf.
{ Membre }
Messages : 40
| Merci 'Christa, je vais essayer ceci. Je profite de l'ouverture de mon sujet pour vous poser une quatre question -si je dois ouvrir un nouveau post dites-le moi, je le ferai-. Comme vous pouvez le voir ici, j'ai attribué une classe à ma barre de navigation pour coder un fond de couleur. Seulement, j'aimerai que ce fond aille jusqu'aux bords du forum sans avoir besoin de fixer une largeur à ma barre, puisque sinon celle-ci ne s’adaptera plus à la largeur du forum si jamais un sujet dépasse la largeur fixée. Je n'ai rien touché dans le template (la barre de navigation est bien sous le header) à part l'ajout de la classe que voici : - Code:
-
.navtop{ margin-top:-40px; align:center; text-align:center; background-color:#FAF3E0; height:24px; width:auto; padding-top:2px; display:block;} Voici également le css de la barre, au cas où : - Code:
-
a.mainmenu img {display:none;}
a.mainmenu { color: #D7BB87; font-size: 11px; font-family: arial; letter-spacing: 0px; text-transform : uppercase ; text-align:center; margin-left:-2px; text-shadow:1px 1px 1px #FFFDB5; font-weight:bold; padding:-2px; padding-bottom:-13px; -webkit-transition: all 0.6s linear 0s;/* pour navigateur webkit */ -moz-transition: all 0.6s linear 0s; /* pour navigateur mozilla */ -o-transition: all 0.6s linear 0s;/* pour navigateur opera */ transition: all 0.6s linear 0s; /* pour les navigateurs récents */ }
a.mainmenu:hover { color: #9AC4C8; font-size: 11px; font-family: arial; letter-spacing: 0px; text-transform : uppercase; text-align:center; margin-left:-2px; padding-bottom:-13px; text-shadow:1px 1px 1px #FFFDB5; -webkit-transition: all 0.6s linear 0s;/* pour navigateur webkit */ -moz-transition: all 0.6s linear 0s; /* pour navigateur mozilla */ -o-transition: all 0.6s linear 0s;/* pour navigateur opera */ transition: all 0.6s linear 0s; /* pour les navigateurs récents */} Merci d'avance pour l'aide que vous pourrez m'apporter ! | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Hello Plouf, Si le nouveau problème n'a rien à voir avec le sujet actuel, je te conseille de signaler ce sujet comme résolu et d'ouvrir un nouveau sujet pour ton nouveau problème, ceci pour aider les recherches des membres | | |
|
| |
Psycho
Psychopathe
Messages : 3407
| Hello ! Le problème est-il toujours d'actualité ?Si nous n'avons pas de réponse dans 4 jours, il sera considéré comme résolu ! Merci de ta compréhension | | |
|
| |
Psycho
Psychopathe
Messages : 3407
| Hello ! N'ayant toujours pas obtenu de réponse, je considère ce sujet comme résolu ! Si tu as toujours un souci, merci d'ouvrir un nouveau sujet (: Merci de ta compréhension | | |
|
| |
Contenu sponsorisé
| |
| |
| Souci de cadre autour du profil | |
|