Sujets similaires

Dernière édition par ptitlac le Ven 18 Jan 2013, 15:22, édité 2 fois

Bonjour.

J'ai un problème sur mon forum. Je vous montre à quoi il ressemble (le problème)
Derniers connectés du qeel impossible à mettre un scroll [résolu] Sans_t11

Derniers connectés du qeel impossible à mettre un scroll [résolu] Sans_t11

Comme vous le voyez il n'y a pas de scroll. Ce n'est pas un oublis de ma part, mais bien un problème que je n'arrive pas résoudre.

Voici le template actuel

Code:: <center>
<div style="position:relative;height:400px;width:700px;">
<div style="position:absolute;z-index:1">
<img src="http://img15.hostingpics.net/pics/846422queelMC.png"></img>

<table>
<span class="gensmall">
<div class="qeelyoup">

<span id="matt">{TOTAL_USERS}</span>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Nous sommes en 1978, en Angleterre. Nous avons");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membre enregistré/,"sorcier sur les terres anglaises. ");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"sorciers sur les terres anglaises. ");</script>

<span id="bert">{TOTAL_POSTS}</span>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Ces sorciers sont des acharnés de la plume, ils ont déjà envoyé");</script>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/,"hiboux. ");</script>

<span id="yosh">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier sorcier à avoir mis les pieds sur le territoire anglais est");</script>.<br />

<br /><span id="delf">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Il y a en tout/,"Nous avons").replace(/utilisateur en ligne/,"voyageur en ligne").replace(/utilisateurs en ligne/,"voyageurs en ligne").replace(/Enregistré(s?)/,"maraudeur$1").replace(/Invisible(s?) et/,"fantôme$1 et").replace(/Invité(s?)/,"curieux.");</script>

<br />
<br />
<span id="book">{LOGGED_IN_USER_LIST}</span><script type="text/javascript">document.getElementById('book').innerHTML=document.getElementById('book').innerHTML.replace(/Utilisateurs enregistrés/,"Ils se baladent actuellement sur les terres anglaises");</script>
</div>

<div class="groupesqel">

<a href="http://marauderscalling.bb-fr.com/g2-pnj" style="color:#CCBD5E" class="lienq"> PNG </a> <br />
<a href="http://marauderscalling.bb-fr.com/g3-students" style="color:#EB5757" class="lienq"> Students </a> <br />
<a href="http://marauderscalling.bb-fr.com/g5-order-of-the-phoenix" style="color:#83B2C7" class="lienq"> Order of The Phoenix</a> <br />
<a href="http://marauderscalling.bb-fr.com/g6-death-eaters" style="color:#23805B" class="lienq"> Death Eaters</a> <br />
<a href="http://marauderscalling.bb-fr.com/g4-unwanted" style="color:#BA9D84" class="lienq"> Unwanted</a> <br />
<a href="http://marauderscalling.bb-fr.com/g7-wizardsj" style="color:#9D84E3" class="lienq"> Wizards </a> <br />

</div>
<table class="listlastconnected"><tr><td><table class="qeeltoo" style="background: none;"><tr><td> <div>{L_CONNECTED_MEMBERS} </div></td></tr></table></td></tr></table>
</span>
</table></div></div>
</center>

Et le CSS qui lui est lié

Code:: .groupesqel {
opacity:0.9;
padding: 5px;
margin: 5px;
text-align: center;
text-shadow: 0px 1px 1px #000;
position:absolute;
left: 246px;
top:80px;
width:170px;
height:180px;
z-index:2;
font-weight:bold;
font-family: times new roman;
font-size: 12px;
letter-spacing: 0pt;
overflow:auto;
text-transform: uppercase;
}

.lienq:hover{ color:#898E8F; letter-spacing: -1pt;}

.qeelyoup {
opacity:0.9;
padding: 5px;
padding-top : 0px;
margin: 5px;
text-align: justify;
font-size: 11px;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 30px;
top:87px;
width:170px;
height:215px;
z-index:2;
font-size:10px;
overflow:auto;
color:#898E8F;
}

.qeeltoo{
opacity:0.9;
padding: 5px;
padding-top : 0px;
margin: 5px;
text-align: justify;
font-size: 11px;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 460px;
top:80px;
width:190px;
height:15px;
z-index:2;
font-size:10px;
overflow:auto !important;
color:#898E8F;
}

.listlastconnected td {
background-color:transparent ;
text-color:#898E8F ! important;}

Cependant, je suis actuellement entrain de bidouillé (pour résoudre le problème.)

J'ai donc un template différent (qui me parrait plus simple) ainsi qu'un css différent. Je vous met les deux versions, à voir si vous en préféré un. Dans celui qui suit, il me semble avoir le scroll, mais j'ai un problème de transparence, les derniers connectés ont un fond (pas beau)

Template

Code:: <table class="forumline" id="QEEL" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><td valign="center"><div align="center" class="qeelyoup">

<span id="matt">{TOTAL_USERS}</span>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Nous sommes en 1978, en Angleterre. Nous avons");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membre enregistré/,"sorcier sur les terres anglaises. ");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"sorciers sur les terres anglaises. ");</script>

<span id="bert">{TOTAL_POSTS}</span>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Ces sorciers sont des acharnés de la plume, ils ont déjà envoyé");</script>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/,"hiboux. ");</script>

<span id="yosh">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier sorcier à avoir mis les pieds sur le territoire anglais est");</script>.<br />

<br /><span id="delf">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Il y a en tout/,"Nous avons").replace(/utilisateur en ligne/,"voyageur en ligne").replace(/utilisateurs en ligne/,"voyageurs en ligne").replace(/Enregistré(s?)/,"maraudeur$1").replace(/Invisible(s?) et/,"fantôme$1 et").replace(/Invité(s?)/,"curieux.");</script>

<br />
<br />
<span id="book">{LOGGED_IN_USER_LIST}</span><script type="text/javascript">document.getElementById('book').innerHTML=document.getElementById('book').innerHTML.replace(/Utilisateurs enregistrés/,"Ils se baladent actuellement sur les terres anglaises");</script>
</div></td><td class="groupesqel">

<a href="http://marauderscalling.bb-fr.com/g2-pnj" style="color:#CCBD5E" class="lienq"> PNG </a> <br />
<a href="http://marauderscalling.bb-fr.com/g3-students" style="color:#EB5757" class="lienq"> Students </a> <br />
<a href="http://marauderscalling.bb-fr.com/g5-order-of-the-phoenix" style="color:#83B2C7" class="lienq"> Order of The Phoenix</a> <br />
<a href="http://marauderscalling.bb-fr.com/g6-death-eaters" style="color:#23805B" class="lienq"> Death Eaters</a> <br />
<a href="http://marauderscalling.bb-fr.com/g4-unwanted" style="color:#BA9D84" class="lienq"> Unwanted</a> <br />
<a href="http://marauderscalling.bb-fr.com/g7-wizardsj" style="color:#9D84E3" class="lienq"> Wizards </a> <br />
</td><td valign="center"><div class="qeeltoo"> <div style="overflow:auto;">
<span style="text-align: justify;"><table style="text-align: justify; font-size:10px;">{L_CONNECTED_MEMBERS}</table></span>
</div></div></td></tr></table>

CSS

Code:: .groupesqel {
opacity:0.9;
padding: 5px;
margin: 5px;
text-align: center;
text-shadow: 0px 1px 1px #000;
position:absolute;
left: 246px;
top:80px;
width:170px;
height:180px;
z-index:2;
font-weight:bold;
font-family: times new roman;
font-size: 12px;
letter-spacing: 0pt;
overflow:auto;
text-transform: uppercase;
}

.lienq:hover{ color:#898E8F; letter-spacing: -1pt;}

.qeelyoup {
opacity:0.9;
padding: 5px;
padding-top : 0px;
margin: 5px;
text-align: justify;
font-size: 11px;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 30px;
top:87px;
width:170px;
height:215px;
z-index:2;
font-size:10px;
overflow:auto;
color:#898E8F;
}

.qeeltoo{
opacity:0.9;
padding: 5px;
padding-top : 0px;
margin: 5px;
text-align: justify;
font-size: 11px;
text-shadow: 0px 1px 1px #000;
font-family: Verdana;
position:absolute;
left: 460px;
top:80px;
width:190px;
background-color: transparent !important;
height:220px;
z-index:2;
font-size:10px;
overflow:auto !important;
color:#898E8F;
}

.listlastconnected td {
background-color:transparent ;
text-color:#898E8F ! important;}

#QEEL{
background-image:url('http://img15.hostingpics.net/pics/846422queelMC.png');
height:400px;
width: 700px;
position:relative;}

Je vous remercie infiniment si vous sauriez m'aider ♥

Salut,

Essaie d'augmenter la hauteur (height) de .qeeltoo (environs 200px) et rajoutes lui un display:block Wink

Hello,

Pour l'histoire du fond, il y a ce tutoriel qui t'explique le souci.

Sinon si j'en crois ton code (le deuxième, parce que le premier est horriblement faux XD) toute la partie de la liste des derniers connectés correspond à ce code :

Code:: <div class="qeeltoo"> <div style="overflow:auto;">
<span style="text-align: justify;"><table style="text-align: justify; font-size:10px;">{L_CONNECTED_MEMBERS}</table></span>
</div></div>

Sachant que :
- Il ne faut jamais mettre d'élément bloc (table) dans un élément inline (span)
- Que de toute façon on ne peut pas aligner le contenu d'un span
- Qu'il faut séparer CSS du HTML
- Qu'il y a beaucoup trop de div/span dans cette histoire

Tu devrais plutôt résumer ton code par ceci :

Code:: <div class="qeeltoo">
<table class="deBug">{L_CONNECTED_MEMBERS}</table>
</div>

(Ce qui est plus court et plus lisible)
Il te suffira alors de préciser une hauteur fixe à la classe .qeeltoo ainsi qu'une propriété overflow (et les autres text-align et font-size qui trainaient) et puis voilà Wink

Wow !! Réponse rapide merci infiniment !!

Donc je vais tester.

J'ai pas tout comprit de ce qu'il faut pas faire par contre ><" Et deBug n'a pas de CSS particulier ?