PA : problèmes de défilement et d'infobulle
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
PA : problèmes de défilement et d'infobulle
Bonjour,
j'ai quelques soucis avec ma page d’accueil, tout d'abord le défilement va en dehors du cadre :
Secondement mon infobulle s'affiche en haut sur l'header, au lieu de se mettre à côté de l'image blanche du staff
Comment régler ça ?
Voici mon CSS
et le html de la PA
Lien du forum : http://theedgeofhalliwell.forumactif.ws/
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/
Dernière édition par Kanzaki le Sam 2 Fév 2013 - 13:49, édité 1 fois
Re: PA : problèmes de défilement et d'infobulle
Bonjour,
Pour le premier problème, la source se situe ici, dans ton CSS :
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 ?
Pour le premier problème, la source se situe ici, dans ton CSS :
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..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;
}
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 ?
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: PA : problèmes de défilement et d'infobulle
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)
J'ai ajouté le lien du forum tout en bas de mon premier post x)
Re: PA : problèmes de défilement et d'infobulle
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 :
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 :
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 faitdiv.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;
}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: PA : problèmes de défilement et d'infobulle
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
Merci beaucoup, problème résolu
Sujets similaires
» Defilement
» Important: Modification du widget Derniers Sujets
» Défilement horizontal
» Boîte de défilement
» Vitesse de défilement.
» Important: Modification du widget Derniers Sujets
» Défilement horizontal
» Boîte de défilement
» Vitesse de défilement.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum