PA : problèmes de défilement et d'infobulle

[Kanzaki]

Bonjour,

j'ai quelques soucis avec ma page d’accueil, tout d'abord le défilement va en dehors du cadre :

Spoiler:

Secondement mon infobulle s'affiche en haut sur l'header, au lieu de se mettre à côté de l'image blanche du staff

Spoiler:

Comment régler ça ?

Voici mon CSS

Code:


div.infobulle
{
 position: relative;
 float: left;
color: #B84A21;
}

div.infobulle span
{
 display: none; /* ceci masque l'infobulle */
}

div.infobulle:hover
{
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  color: #B84A21;
}

/* style de l infobulle */

div.infobulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
width:150px;
height:auto;
top: 115px;
left:25px; /* on positionne notre infobulle */
background-color: #E3CDA9;
padding: 3px;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
  padding : 6px 0;
  border-top: 3px solid #cc7023;
  border-bottom: 3px solid #cc7023;
    box-shadow: 0 0 5px #cc7023;
  border-radius: 10px;
}

a.lienpa{
font-size:30px;
font-family:'Cookie', cursive;
color:black;
letter-spacing:2px;
}
a.lienpa:hover{
font-size:30px;
font-family:'Cookie', cursive;
color:gray;
letter-spacing:2px;
}
.contourlien{
width:650px;
padding:10px;
text-align:center;
background-color:#E3CDA9;
float:left;
margin-bottom:-30px;
margin-left:60px;
}
.contourlien:hover{
width:650px;
padding:10px;
text-align:center;
float:left;
margin-bottom:-30px;
margin-left:60px;
}

.contourpa{
padding-top:30px;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
background-color:#E3CDA9;
}

.presforum{
text-align:justify;
padding:10px;
color:black;
font-size:12px;
font-family:comic sans ms;
background-color:#E0CDB1;
  padding : 6px 0;
  border-top: 3px solid #cc7023;
  border-bottom: 3px solid #cc7023;
    box-shadow: 0 0 5px #cc7023;
  border-radius: 10px;
}

.presforum:hover{
overflow:auto;
padding:10px;
  padding : 6px 0;
  border-top: 3px solid #d0a175;
  border-bottom: 3px solid #d0a175;
  box-shadow: 0 0 5px #d0a175;
}


.titre{
font-size:30px;
font-family:'Cookie', cursive;
letter-spacing:1px;
text-align:center;
color:#B84A21;
margin-bottom:-7px;
}

.actus{
height:90px;
text-align:justify;
padding:10px;
color:black;
font-size:12px;
font-family:comic sans ms;
background-color:#E0CDB1;
  padding : 6px 0;
  border-top: 3px solid #cc7023;
  border-bottom: 3px solid #cc7023;
    box-shadow: 0 0 5px #cc7023;
  border-radius: 10px;
}
.actus:hover{
overflow:auto;
padding:10px;
  padding : 6px 0;
  border-top: 3px solid #d0a175;
  border-bottom: 3px solid #d0a175;
  box-shadow: 0 0 5px #d0a175;
}

.partenaire{
height:90px;
overflow:auto;
text-align:center;
padding:10px;
color:black;
font-size:12px;
font-family:comic sans ms;
background-color:#E0CDB1;
  padding : 6px 0;
  border-top: 3px solid #cc7023;
  border-bottom: 3px solid #cc7023;
    box-shadow: 0 0 5px #cc7023;
  border-radius: 10px;
}

.partenaire:hover{
height:90px;
overflow:auto;
text-align:center;
padding:10px;
  padding : 6px 0;
  border-top: 3px solid #d0a175;
  border-bottom: 3px solid #d0a175;
  box-shadow: 0 0 5px #d0a175;
}

.credits{
text-align:justify;

padding:10px;
color:black;
font-size:10px;
font-family:comic sans ms;
  padding : 6px 0;
  border-top: 3px solid #cc7023;
  border-bottom: 3px solid #cc7023;
    box-shadow: 0 0 5px #cc7023;
  border-radius: 10px;
  background-color:#E0CDB1;
}

.credits:hover{
  border-top: 3px solid #d0a175;
  border-bottom: 3px solid #d0a175;
  box-shadow: 0 0 5px #d0a175;
}



et le html de la PA

Code:

<table width="800px" border="0"><tr><td><center><div class="contourlien"><a class="lienpa">Contexte</a> - <a class="lienpa">Règlement</a> - <a class="lienpa">Avatars</a> - <a class="lienpa">Prédéfinis</a> - <a class="lienpa">Scénarios</a>- <a class="lienpa">Invités</a></div></center></td></tr>

<tr><td><table border="0" width="800px" class="contourpa"><tr><td width="50%" height="200px"><div class="titre">Bienvenue</div><div class="presforum"> Unique école de magie au monde, Baythiel est un passage inévitable pour tous les sorciers qui rêvent de maîtriser à la perfection leurs pouvoirs et qui veulent être renommés dans le monde magique. L’établissement a un cadre unique puisqu’il se trouve en Islande, ce pays éloigné de tous les continents qui regorge de paysages naturels aussi splendides les uns que les autres et qui donne le meilleur des environnements pour travailler. La réputation de l’école n’est plus à faire puisqu’elle a formée les 10 meilleurs sorciers de ces derniers siècles et ce n’est pas prêt de s’arrêter.

Rejoignez donc la meilleure des écoles et tenez vous prêt, car pour faire partie de l'élite de la sorcellerie il ne faut pas dormir sur ses lauriers ;)
</div></td>

<td><div class="titre">Le Staff</div><center><table><tr><td width="80px"><div class="infobulle"><img src="http://i47.servimg.com/u/f47/16/77/81/09/75x15010.jpg"  class="gradualfader" /><span><div><center>
<strong><font color="gray">PSEUDO</font><br/>
<font color="#888888">Rang</font><br/>
<br/><a href="LIEN" class="postlink">Profil</a> - <a href="LIEN" class="postlink">MP</a></strong> </center></div>
</span></div></td>

<td width="80px"><div class="infobulle"><img src="http://i47.servimg.com/u/f47/16/77/81/09/75x15010.jpg"  class="gradualfader" /><span><div><center>
<strong><font color="gray">PSEUDO</font><br/>
<font color="#888888">Rang</font><br/>
<br/><a href="LIEN" class="postlink">Profil</a> - <a href="LIEN" class="postlink">MP</a></strong> </center></div>
</span></div></td>

<td width="80px"><div class="infobulle"><img src="http://i47.servimg.com/u/f47/16/77/81/09/75x15010.jpg"  class="gradualfader" /><span><div><center>
<strong><font color="gray">PSEUDO</font><br/>
<font color="#888888">Rang</font><br/>
<br/><a href="LIEN" class="postlink">Profil</a> - <a href="LIEN" class="postlink">MP</a></strong> </center></div>
</span></div></td></tr></table></center></td></tr>

<tr><td height="150px"><div class="titre">L'actualité</div><div class="actus"><marquee class="html-marquee" direction="down" scrollamount="3"  onmouseover=this.stop(); onmouseout=this.start();>Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla Blabla </div></td></marquee>

<td><div class="titre">Nos Amis</div><div class="partenaire"><a href="LIEN"><img src="http://i48.servimg.com/u/f48/16/68/18/95/et_vou10.jpg"></a> <a href="LIEN"><img src="http://i48.servimg.com/u/f48/16/68/18/95/et_vou10.jpg"></a> <a href="LIEN"><img src="http://i48.servimg.com/u/f48/16/68/18/95/et_vou10.jpg"></a> <a href="LIEN"><img src="http://i48.servimg.com/u/f48/16/68/18/95/et_vou10.jpg"></a> <a href="LIEN"><img src="http://i48.servimg.com/u/f48/16/68/18/95/et_vou10.jpg"></a> <a href="LIEN"><img src="http://i48.servimg.com/u/f48/16/68/18/95/et_vou10.jpg"></a> <a href="LIEN"><img src="http://i48.servimg.com/u/f48/16/68/18/95/et_vou10.jpg"></a> <a href="LIEN"><img src="http://i48.servimg.com/u/f48/16/68/18/95/et_vou10.jpg"></a> </div></td></tr>

<tr><td height="80px"><div class="titre">On les Attends</div><table width="100%"><tr><td><img src="http://i47.servimg.com/u/f47/16/77/81/09/65x6510.jpg" title='Nom du PV'></td>

<td><img src="http://i47.servimg.com/u/f47/16/77/81/09/65x6510.jpg" title='Nom du PV'></td>

<td><img src="http://i47.servimg.com/u/f47/16/77/81/09/65x6510.jpg" title='Nom du PV'></td>

<td><img src="http://i47.servimg.com/u/f47/16/77/81/09/65x6510.jpg" title='Nom du PV'></td>

<td><img src="http://i47.servimg.com/u/f47/16/77/81/09/65x6510.jpg" title='Nom du PV'></td></tr></table></td>

<td><div class="credits">Codage PA by Alÿnea, Codage & design by Ecstatic Ruby<br/>
L'intégralité du forum appartient à ses administrateurs, toute reproduction partielle ou totale est strictement interdite !</div></td></tr></table></td></tr></table>

Lien du forum : http://theedgeofhalliwell.forumactif.ws/

[Matriochka]

Bonjour,

Pour le premier problème, la source se situe ici, dans ton CSS :

.actus{
height:90px;
text-align:justify;
padding:10px;
color:black;
font-size:12px;
font-family:comic sans ms;
background-color:#E0CDB1;
padding : 6px 0;
border-top: 3px solid #cc7023;
border-bottom: 3px solid #cc7023;
box-shadow: 0 0 5px #cc7023;
border-radius: 10px;
}

Visiblement, tu as mis une hauteur de 90 pixels, or ton texte s'étend sur plus que cette valeur. Mais sachant qu'il n'est pas définitif, ça n'est peut-être pas la peine de changer… Il faudra adapter cette hauteur en fonction du texte que tu placeras ici.

Sinon, tu as toujours moyen :
1) de diminuer la taille de la police avec font-size:10px; (par exemple)
2) de diminuer l'espace entre chaque ligne avec line-height:10px; (par exemple)

Concernant le problème d'infobulles, pourrais-tu envoyer ici l'URL du forum concerné afin d'avoir un visuel direct ?

[Kanzaki]

J'ai essayé les deux méthodes ça ne marche pas, même en changeant la hauteur c'est toujours pareil :/ (en plus il faut qu'elle reste à 90 pour qu'elle arrive au même niveau que " nos amis "). Y'a t-il un code de défilement pour le css ?

J'ai ajouté le lien du forum tout en bas de mon premier post x)

[Matriochka]

Merci pour le lien
Pour le défilement, tu peux utiliser ceci : overflow:auto;

Et pour les infobulles, à mon avis, le problème vient d’ici, dans ton CSS :

div.infobulle:hover span
{
display: inline; /* on affiche l'infobulle */
position: absolute;
width:150px;
height:auto;
top: 115px;
left:25px; /* on positionne notre infobulle */
background-color: #E3CDA9;
padding: 3px;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
text-align: center;
font-size: 14px;
padding : 6px 0;
border-top: 3px solid #cc7023;
border-bottom: 3px solid #cc7023;
box-shadow: 0 0 5px #cc7023;
border-radius: 10px;
}

Là, tu mets ton infobulle à 115 pixels du haut du forum et à 25 pixels du bord gauche, ce qui renvoie ton infobulle dans ton header, en fait

[Kanzaki]

En ajoutant le scrollbar le défilement ne dépasse pas le scroll est pas super esthétique mais bon, c'est déjà ça... L'infobulle se positionne bien maintenant donc tout est bon
Merci beaucoup, problème résolu