Remonter l'affichage du profil
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
Remonter l'affichage du profil
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
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour o/Comme vous pouvez le voir sur la capture d'écran, j'ai un espace énooooooorme entre la PA et l'affichage du profil, que je ne comprends pas trop... Je ne trouve rien dans le template qui pourrait arranger ça, je sais pas trop quoi faire ? Pour afficher la PA en haut du forum j'avais déplacé des scripts et tout mais ici le code du profil est le premier élément du template donc je sais pas trop quoi faire ;;
Voilà le template en question :
- Code:
<table class="forumline" border="0" cellspacing="1" cellpadding="0" align="center">
<div class="profilebyYU">
<table>
<tr><td><div class="profile-ava">
{AVATAR_IMG}
</div>
</td>
<td><div class="profile-cadre">
<div class="profile-pseudo">{USERNAME}
</div>
<div class="profile-img">
</div>
<div class="profile-rank" id="profile-rank"><div class="rank">{POSTER_RANK}</div></div>
</div>
<div class="profile-links">
</div>
<div class="profile-deco"></div>
<div class="infos-profile">
<!-- BEGIN profile_field -->
<dl id="field_id{profile_field.ID}"><span>{profile_field.LABEL}</span>{profile_field.CONTENT}</dl>
<!-- END profile_field -->
</div>
</td>
<td><div class="profile-topics"><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></div>
<div class="profile-msg"><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a></div>
<div class="profile-co"><div><span>{L_LAST_VISITED} :</span><br />{LAST_VISIT_TIME}</div></div>
<div class="profile-illu">
</div>
</td></tr>
</table>
</div>
</table>
<br />
<script type="text/javascript">//<![CDATA[
$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).closest('.profile-rank').css("background-color", color);});});//]]></script>
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('[id^=field_id]').each(function(){
if ( $(this).find('.field_editable').is('span, div') )
{
$(this).hover(function()
{
if( $(this).find('.field_editable.invisible').is('span, div') )
{
$(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
$(this).find('.ajax-profil_edit').attr({
alt: "{L_FIELD_EDIT_VALUE}",
title: "{L_FIELD_EDIT_VALUE}"
}).click(function(){
$(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
$(this).prev().find('.ajax-profil_valid').attr({
alt: "{L_VALIDATE}",
title: "{L_VALIDATE}"
}).click(function(){
var content = new Array();
$(this).parent().find('[name]').each(function(){
var type_special = $(this).is('input[type=radio],input[type=checkbox]');
if ( (type_special && $(this).is(':checked')) || !type_special )
{
content.push(new Array($(this).attr('name'), $(this).attr('value')));
}
});
var id_name = $(this).parents('[id^=field_id]').attr('id');
var id = id_name.substring(8, id_name.length);
$.post(
"{U_AJAX_PROFILE}",
{id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
function(data){
$.each(data, function(i, item){
$('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
});
},
"json"
);
});
$(this).remove();
});
}
},function()
{
if( $(this).find('.field_editable.invisible').is('span, div') )
{
$(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
$(this).find('.ajax-profil_edit').remove();
}
});
}
});
});
//]]>
</script>
<style>
.profilebyYU {width:900px;height:320px;}
.profile-ava {height:306px;width:200px;}
.profile-ava img {border: 7px solid var(--dark);border-radius:5px;height:306px;width:200px;}
.profile-cadre {height:320px;width:695px;background:var(--dark);border-radius:5px;position:absolute;margin-left:15px;margin-top:-153px;}
.profile-pseudo {font-family: 'Overpass Mono', monospace;width:260px;height:45px;position:absolute;text-transform:uppercase;font-weight:bold;font-size:25px;margin-top:35px;margin-left:30px;text-align:center;}
.profile-img {height:40px;width:70px;border-radius:6px;object-fit:cover;margin-left:290px;position:absolute;margin-top:10px;}
.profile-img img {height:40px;width:70px;border-radius:6px;object-fit:cover;}
#field_id1 {width: 100% !important;}
#field_id1 span{display:none;}
#field_id1 .field_uneditable{display: flex;}
.profile-rank {width:260px;height:60px;border-radius:5px;background-color:#000;overflow:hidden;position:absolute;margin-top:85px;margin-left:30px;padding-top:20px;padding-left:70px;}
.rank {font-family: 'Overpass Mono', monospace;text-transform:uppercase;text-align:center;color:var(--white);font-size:35px;font-weight:300;}
.rank img {width:100px!important;height;auto;object-fit:cover;float:left;margin-left:-60px;margin-top:-70px;}
.infos-profile {box-sizing: border-box;width:375px;height:110px;padding:10px;background-color:#222;border-radius:5px;color:var(--white);overflow:auto;position:absolute;margin-top:25px;margin-left:43px;}
.infos-profile dl {color:var(--white); font-size:12px;height:auto;line-height:12px;flex-wrap: wrap;display: flex;}
.infos-profile dl span {color:var(--yellow);text-transform:uppercase;}
.profile-deco {height:140px;width:20px;background:var(--degrade-vert);border-radius:5px;position:absolute;margin-left:390px;margin-top:-127px;}
.profile-topics {width:125px;height:23px;background:var(--degrade);border-radius:5px;position:absolute;text-align:center;padding-top:7px;margin-left:430px;margin-top:-120px;}
.profile-topics a {color:var(--white);text-transform:uppercase;font-weight:bold;padding:auto;}
.profile-topics a:hover {color:var(--white);}
.profile-msg {width:125px;height:23px;background:var(--degrade);border-radius:5px;position:absolute;text-align:center;padding-top:7px;margin-left:560px;margin-top:-120px;}
.profile-msg a {color:var(--white);text-transform:uppercase;font-weight:bold;padding:auto;}
.profile-msg a:hover {color:var(--white);}
.profile-co {height:85px;width:255px;position:absolute;text-align:center;color:var(--white);margin-left:432px;background:transparent;margin-top:-75px;padding-top:25px;}
.profile-co span {font-size:25px;font-weight:400;text-transform:uppercase;}
.profile-illu {height:110px;width:250px;border-radius:6px;object-fit:cover;position:absolute;margin-top:10px;margin-left:430px;}
.profile-illu img {height:110px;width:250px;border-radius:6px;object-fit:cover;}
#field_id2 {width: 100% !important;}
#field_id2 span{display:none;}
#field_id2 .field_uneditable{display: flex;}
</style>
Merci d'avance
Re: Remonter l'affichage du profil
Bonjour !
Il n'y a pas d'erreur de structure de le code, mais par contre, il y a quelque chose que le navigateur ne comprend pas dans le HTML.
C'est l'enchainement <table><div><table> qu'il a un peu de mal à avaler, et au rendu, il fait un peu n'importe quoi :
Il fait comme si :
- le div #profilebyYU se ferme tout de suite et est vide (d'où le grand espace vide, puisque l'élément en question a un height:320px;)
- la table .forumline se ferme tout de suite et est vide
- enfin, il fait le rendu du deuxième tableau, qui lui, contient tout
Il vaut mieux éviter ce genre d'enchainement avec les table, préférer une correction comme celle-ci :
Il n'y a pas d'erreur de structure de le code, mais par contre, il y a quelque chose que le navigateur ne comprend pas dans le HTML.
C'est l'enchainement <table><div><table> qu'il a un peu de mal à avaler, et au rendu, il fait un peu n'importe quoi :
Il fait comme si :
- le div #profilebyYU se ferme tout de suite et est vide (d'où le grand espace vide, puisque l'élément en question a un height:320px;)
- la table .forumline se ferme tout de suite et est vide
- enfin, il fait le rendu du deuxième tableau, qui lui, contient tout
Il vaut mieux éviter ce genre d'enchainement avec les table, préférer une correction comme celle-ci :
- Code:
<div class="profilebyYU">
<table class="forumline" border="0" cellspacing="1" cellpadding="0">
<tr><td><div class="profile-ava">
{AVATAR_IMG}
</div>
</td>
<td><div class="profile-cadre">
<div class="profile-pseudo">{USERNAME}
</div>
<div class="profile-img">
</div>
<div class="profile-rank" id="profile-rank"><div class="rank">{POSTER_RANK}</div></div>
</div>
<div class="profile-links">
</div>
<div class="profile-deco"></div>
<div class="infos-profile">
<!-- BEGIN profile_field -->
<dl id="field_id{profile_field.ID}"><span>{profile_field.LABEL}</span>{profile_field.CONTENT}</dl>
<!-- END profile_field -->
</div>
</td>
<td><div class="profile-topics"><a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></div>
<div class="profile-msg"><a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a></div>
<div class="profile-co"><div><span>{L_LAST_VISITED} :</span><br />{LAST_VISIT_TIME}</div></div>
<div class="profile-illu">
</div>
</td></tr>
</table>
</div>
<br />
Re: Remonter l'affichage du profil
Re-bonjour
Oooohhh je savais pas du tout que ça faisait ça ! Merci, j'apprends des choses c'est cool, je ferai attention à ça dorénavant !
C'est tout bon du coup, merci beaucoup !
Oooohhh je savais pas du tout que ça faisait ça ! Merci, j'apprends des choses c'est cool, je ferai attention à ça dorénavant !
C'est tout bon du coup, merci beaucoup !
Sujets similaires
» Remonter le QEEL
» remonter un lien.
» Remonter un sujet
» Remonter un sous-forum
» Remonter la barre de navigation
» remonter un lien.
» Remonter un sujet
» Remonter un sous-forum
» Remonter la barre de navigation
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