problème avec espace récurrent et scroll
4 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
problème avec espace récurrent et scroll
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Opera
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : création d'un nouveau code
Lien du forum : http://www.ildir.purforum.com
Description du problème
Bonjour,depuis que j'ai trouvé et modifié ce code pour en faire une fiche de personnage il y a un problème avec overflow et max-height qui ne change rien au fait qu'un espace se crée sous l'image dans la fiche dès que le contenu de droite dépasse 400px. Je crois que c'est parce que cela inclue le prénom et le nom à cheval sur le coin droit. Je souhaite mettre 400px max à l'avatar ainsi qu'au contenu et qu'un scroll apparaisse au contenu lorsqu'il est plus grand et ce sans qu'un espace apparaisse sous l'avatar. voici mon css et mon html.
- Code:
<table class="cssactif_pv" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td align="right" valign="bottom" class="cssactif_pv_header"style="background-image: url(http://i39.servimg.com/u/f39/18/63/92/92/image_11.png);"></td><td valign="top"><div class="cssactif_pv_titre"><!--
--><h1>Prénom&nom</h1>[size=8]Citation personnelle ou credo[/size]</div><div class="cssactif_pv_content3"><!--
--><em>Genre</em>: Masculin/féminin
<em>Surnom</em>: facultatif mais apprécié
<em>Âge</em>:
<em>Race</em>:
<em>Terre d'origine</em>: Inscrire un pays, une contrée et/ou un village
<em>Philosophie</em>: Trouve la tienne [url=http://ildir.purforum.com/f193-philosophies]ici[/url]
<em>Faction</em>:
<em>Profession</em>:
<em>Magie</em> <div class="infobulle"><img src="http://i39.servimg.com/u/f39/18/63/92/92/pentac10.png" /><div>Je suis un(e) -votre rang vous sera attribué par le Staff - et je pratique la magie- nom du flux ici - mais plus précisément <a href="http://ildir.purforum.com/t1027-le-flux-elementaire">Lien vers l'École de magie</a>. Voici les sorts que je maîtrise : -Vous devez d'abord recevoir votre rang-. Si vous ne possédez pas la Flamme inscrivez-le tout de même ici.</div></div>
<em>Aptitude(s) particulière(s)</em>: facultatif, détaillez un maximum
<!----></div></td></tr></table>
<div class="cssactif_pv"><div class="cssactif_pv_content"><h2>Apparence</h2>
Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta.
<h3>Personnalité</h3>
Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta.
</div></div>
<div class="cssactif_pv"><div class="cssactif_pv_content2"><h4>Histoire</h4>
[u]Votre histoire détaillée ici. N'oubliez pas de vous relire pour supprimer le plus de fautes possible.[/u] Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta. Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta.
</div></div>
<div class="cssactif_pv"><div class="cssactif_pv_content4"><h5>Hors jeu</h5>
De quelle façon as-tu trouvé le forum ?
→ ...
As-tu des suggestions ou des commentaires ?
→ ...
Quel est le code de validation caché dans les règlements? En l'inscrivant vous acceptez de vous soumettre aux règles établies.
→ ...[hide]Insérez le code ici, entre ces balises[/hide]</div></div>
<div style="font-size: 9px; text-align: center;">La vallée d'Ildir soutient la création; cette fiche a été codée par Orange de <a href="http://www.css-actif.com">CSSActif</a></div>
- Code:
/* ------------- FICHE PV
Créee par Orange de CSSActif (http://css-actif.com)
Merci de conserver cette mention par respect ----------- */
.cssactif_pv { /* Fond de la fiche */
background-color: #1D1D1D; /* Couleur de fond */
-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
-webkit-box-shadow: 0px 0px 10px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
}
td.cssactif_pv_header { /* En-tête avec image de fond */
background-repeat: no-repeat; /* Empêche la répétition de l'image du header */
background-position: top center; /* Postionne l'image du header en haut, au center */
width: 200px; /* Donne la largeur de la bannière latérale (Largeur de l'avatar) */
height: 400px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande (Hauteur de l'avatar) */
max-height:400px;
overflow:hidden;
border-right: 13px double #5860A3; /* Bordure côté du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style) */
/* Bordures gauche arrondies (voir: http://border-radius.com/) */
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
text-shadow: 1px 1px 0px #000; /* Ombre du texte */
font-size: 10px; /* Taille du texte: TAILLEpx */
}
div.cssactif_pv_titre h1 { /* Titre prénoms & nom */
font-family: Delius; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
font-size: 22px; /* Taille du texte: TAILLEpx */
text-shadow: 1px 1px 0px #000; /* Ombre du texte */
color: #5860A3; /* Couleur du texte */
margin: 0; /* Supprime la marge par défaut de l'élément h1 */
text-align: right; /* Aligne le titre à droite */
text-transform: uppercase; /* Met le titre en majuscules */
}
div.cssactif_pv_titre { /* Titre + feat */
/* Positionne le titre "à cheval" sur la bordure */
position: relative;
top: -25px;
text-align: right; /* Aligne le texte à droite */
letter-spacing: 2px; /* Espacement des caractères */
padding-right: 20px; /* Défifine une marge interne */
color: #CCCCCC; /* Couleur du feat */
}
.cssactif_pv h2 { /* Sous-titres "Identité", "Opinions" etc. */
background-color: #1D1D1D; /* Couleur du fond des sous-titres */
border-color: #5860A3; /* Couleur de la bordure */
border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS GAUCHE & DROITE */
border-style: solid; /* Style de la bordure */
-webkit-box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
text-align: center; /* Aligne le titre au centre */
text-transform: uppercase; /* Met le titre en majuscules */
font-family: Delius; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #5860A3; /* Couleur du titre */
margin: 0; /* Supprimer marge */
font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
font-weight: normal; /*Épaisseur du texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
letter-spacing: 3px; /* Espacement des caractères */
}
.cssactif_pv h3 { /* Sous-titres "Identité", "Opinions" etc. */
background-color: #1D1D1D; /* Couleur du fond des sous-titres */
border-color: #5860A3; /* Couleur de la bordure */
border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS GAUCHE & DROITE */
border-style: solid; /* Style de la bordure */
-webkit-box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
text-align: center; /* Aligne le titre au centre */
text-transform: uppercase; /* Met le titre en majuscules */
font-family: Delius; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #5860A3; /* Couleur du titre */
margin: 0; /* Supprimer marge */
font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
font-weight: normal; /*Épaisseur du texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
letter-spacing: 3px; /* Espacement des caractères */
}
.cssactif_pv h4 { /* Sous-titres "Identité", "Opinions" etc. */
background-color: #1D1D1D; /* Couleur du fond des sous-titres */
border-color: #5860A3; /* Couleur de la bordure */
border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS GAUCHE & DROITE */
border-style: solid; /* Style de la bordure */
-webkit-box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
text-align: center; /* Aligne le titre au centre */
text-transform: uppercase; /* Met le titre en majuscules */
font-family: Delius; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #5860A3; /* Couleur du titre */
margin: 0; /* Supprimer marge */
font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
font-weight: normal; /*Épaisseur du texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
letter-spacing: 3px; /* Espacement des caractères */
}
.cssactif_pv h5 { /* Sous-titres "Identité", "Opinions" etc. */
background-color: #1D1D1D; /* Couleur du fond des sous-titres */
border-color: #5860A3; /* Couleur de la bordure */
border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS GAUCHE & DROITE */
border-style: solid; /* Style de la bordure */
-webkit-box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
text-align: center; /* Aligne le titre au centre */
text-transform: uppercase; /* Met le titre en majuscules */
font-family: Delius; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #5860A3; /* Couleur du titre */
margin: 0; /* Supprimer marge */
font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
font-weight: normal; /*Épaisseur du texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
letter-spacing: 3px; /* Espacement des caractères */
}
.cssactif_pv_content { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
font-size: 11px;
max-height:600px
overflow: auto;
}
.cssactif_pv_content2 { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
max-height: 350px;
overflow: auto;
font-size: 11px;
}
.cssactif_pv_content3 { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
font-size: 11px;
max-height: 390px;
overflow: auto;
}
.cssactif_pv_content4 { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
font-size: 11px;
max-height: 350px;
overflow: auto;
}
.cssactif_pv em { /* Libellés */
font-family: Delius; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #5860A3; /* Couleur du titre */
font-style: normal;
text-transform: uppercase;
font-size: 11px;
}
div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
display: inline-block; /*Place les icones un à côté de l'autre */
margin: 1px; /* marge entre les icones */
border: 1px solid #333; /* bordure des icones */
-webkit-box-shadow: 0px 0px 5px 0px #4d4b4b; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 5px 0px #4d4b4b; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 5px 0px #4d4b4b; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
}
div.infobulle img {
height: 50px;
width: 54px;
}
div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;
width: 290px; /* Largeur de l'infobulle */
top: 15px; /* on positionne notre infobulle */
left: 30px;
background-color: #1D1D1D; /* Couleur de fond */
-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
-webkit-box-shadow: 0px 0px 10px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #4d4b4b; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
border-left: 6px double #4d4b4b;
padding: 10px; /* marge interne de l'infobulle */
}
/* ------------- FIN FICHE PV */
merci beaucoup
Re: problème avec espace récurrent et scroll
Hello
Si dans ton CSS tu rajoutes ceci, le résultat est-il mieux ? :
EDIT : prend plutôt la réponse de MlleAlys juste après, ma solution adapte simplement l'image à toute hauteur ^^
Si dans ton CSS tu rajoutes ceci, le résultat est-il mieux ? :
- Code:
td.cssactif_pv_header {
background-size: cover;
}
EDIT : prend plutôt la réponse de MlleAlys juste après, ma solution adapte simplement l'image à toute hauteur ^^
Dernière édition par [Nihil] le Jeu 18 Sep 2014 - 16:00, édité 1 fois
Re: problème avec espace récurrent et scroll
bonjour,
trouvez ce passage dans le css:
et modifiez max-height: 390px; en max-height: 340px;
Ce qui donne :
trouvez ce passage dans le css:
- Code:
.cssactif_pv_content3 { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
font-size: 11px;
max-height: 390px;
overflow: auto;
}
et modifiez max-height: 390px; en max-height: 340px;
Ce qui donne :
- Code:
.cssactif_pv_content3 { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
font-size: 11px;
max-height: 340px;
overflow: auto;
}
MlleAlys- Membre actif
- Messages : 5968
Inscrit(e) le : 12/09/2012
Re: problème avec espace récurrent et scroll
J'ai déjà essayé cela, mais ma section de droite est beaucoup trop petite, j'aimerais pouvoir utiliser la pleine hauteur en évitant au maximum le scroll (donc pas de scroll avant 400px) et donc que le Nom Prénom soit peut-être dans une nouvelle <div> pour éviter qu'elle joue sur la hauteur de ma section de droite...?
Voyez ce que ça donne sur mon forum test http://ildir.forum-canada.net/t100-fiche. Je changerais n'importe quoi dans le code pour être en mesure d'utiliser la zone de droite en sa totalité!!
Merci beaucoup pour votre aide
Voyez ce que ça donne sur mon forum test http://ildir.forum-canada.net/t100-fiche. Je changerais n'importe quoi dans le code pour être en mesure d'utiliser la zone de droite en sa totalité!!
Merci beaucoup pour votre aide
Re: problème avec espace récurrent et scroll
ok, j'espère avoir compris, voilà ce que je propose ^^ :
Modifiez le texte précédent en ceci :
Retrouvez ce passage dans votre css :
Retrouvez ce passage dans votre css:
Modifiez le texte précédent en ceci :
- Code:
.cssactif_pv_content3 {
padding: 5px;
text-align: justify;
text-shadow: 1px 1px 0px #000;
font-size: 11px;
max-height: 390px;
overflow: auto;
}
Retrouvez ce passage dans votre css :
- Code:
.cssactif_pv {
background-color: #1D1D1D;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 10px 0px #4d4b4b;
-moz-box-shadow: 0px 0px 10px 0px #4d4b4b;
box-shadow: 0px 0px 10px 0px #4d4b4b;
}
- Code:
.cssactif_pv {
background-color: #1D1D1D;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 10px 0px #4d4b4b;
-moz-box-shadow: 0px 0px 10px 0px #4d4b4b;
box-shadow: 0px 0px 10px 0px #4d4b4b;
position: relative;
}
Retrouvez ce passage dans votre css:
- Code:
div.cssactif_pv_titre {
top: -15px;
text-align: right;
letter-spacing: 2px;
padding-right: 20px;
color: #CCCCCC;
}
- Code:
div.cssactif_pv_titre {
position: absolute;
right: 0; /*positionnement horizontal du titre*/
top: -20px; /*positionnement vertical du titre*/
width: 300px; /*largeur du bloc titre*/
text-align: right;
letter-spacing: 2px;
padding-right: 20px;
color: #CCCCCC;
}
MlleAlys- Membre actif
- Messages : 5968
Inscrit(e) le : 12/09/2012
Re: problème avec espace récurrent et scroll
J'ai modifié tout ce que vous m'avez donné.
Edit: L'infobulle ne bouge pas peu importe les variables que j'emploie. Je souhaite qu'elle apparaisse en haut à droite mais elle ne bouge plus.
Edit 2: Le problème de l'espace sous l'image semble réglé,-pour l'instant- mais pas celui de l'infobulle.
Re: problème avec espace récurrent et scroll
Je ne comprends pas l'histoire de descendre la div vers le bas, mais l'espace sous l'image est dee au fait que la div à droite fait maintenant 410px de hauteur au lieux de 400, puis que vous avez mis max-height: 400px au lieu de max-height: 390px comme je l'avais fait.
Or la hauteur correspond au contenu de la div, sans le padding (la marge intérieure qui évite au texte d'être collé à ses bords et donc mal lisible)... J'avais laissé un padding de 5px au lieu de 10 dans votre code initial :
490px de hauteur maximale de contenu+ 5px de marge en haut + 5px de marge en bas = 400px, la hauteur voulue.
Mais avec la modification que vous avez faite,
400px + 5px + 5px = 410px de hauteur pour la div.
Le tableau s'adaptant à son contenu, il fait maintenant 410px de haut. Or votre image n'en fait que 400. Voilà d'où viennent les 10px sous l'image.
Vous pouvez, si vous ne voulez vraiment aucun padding, retirer la ligne padding:5px;
Je conseille toutefois de laisser tout de même un padding minimum à gauche et à droite du texte, en modifiant padding:5px; en padding: 0px 3px;
(la première valeur correspond au padding en haut et en bas, ici 0 donc vous pouvez laisser 400px de hauteur pour la div, et la deuxième valeur pour le padding à gauche et à droite)
Or la hauteur correspond au contenu de la div, sans le padding (la marge intérieure qui évite au texte d'être collé à ses bords et donc mal lisible)... J'avais laissé un padding de 5px au lieu de 10 dans votre code initial :
490px de hauteur maximale de contenu+ 5px de marge en haut + 5px de marge en bas = 400px, la hauteur voulue.
Mais avec la modification que vous avez faite,
400px + 5px + 5px = 410px de hauteur pour la div.
Le tableau s'adaptant à son contenu, il fait maintenant 410px de haut. Or votre image n'en fait que 400. Voilà d'où viennent les 10px sous l'image.
Vous pouvez, si vous ne voulez vraiment aucun padding, retirer la ligne padding:5px;
Je conseille toutefois de laisser tout de même un padding minimum à gauche et à droite du texte, en modifiant padding:5px; en padding: 0px 3px;
(la première valeur correspond au padding en haut et en bas, ici 0 donc vous pouvez laisser 400px de hauteur pour la div, et la deuxième valeur pour le padding à gauche et à droite)
MlleAlys- Membre actif
- Messages : 5968
Inscrit(e) le : 12/09/2012
Re: problème avec espace récurrent et scroll
D'accord, désolé et merci! J'avais modifié dans le mauvais panneau d'admin, c'est pourquoi vous n'avez pu voir le 390px...Bref ^^'
Il reste cette histoire d'infobulle qui ne répond pas, elle apparaît toujours au même endroit malgré la modification des variables Haut/gauche
Il reste cette histoire d'infobulle qui ne répond pas, elle apparaît toujours au même endroit malgré la modification des variables Haut/gauche
Re: problème avec espace récurrent et scroll
de rien ^^
EDIT : pardon, je n'avais pas vu les éditions de votre message plus haut !
Mais je ne vois toujours pas de quelles infobulles vous parlez ^^"
EDIT : trouvée ! je ne l'avais pas remarquée ^^" Aucun rapport avec la div elle même par contre.
Retrouvez ce passage dans votre css, et modifiez les valeurs de top et left comme vous le désirez (n'oubliez pas px à la fin des valeurs !) :
EDIT : pardon, je n'avais pas vu les éditions de votre message plus haut !
Mais je ne vois toujours pas de quelles infobulles vous parlez ^^"
EDIT : trouvée ! je ne l'avais pas remarquée ^^" Aucun rapport avec la div elle même par contre.
Retrouvez ce passage dans votre css, et modifiez les valeurs de top et left comme vous le désirez (n'oubliez pas px à la fin des valeurs !) :
- Code:
div.infobulle:hover div {
display: block;
position: absolute;
width: 285px;
top: 0px; /*décalage vertical de l'infobulle*/
left: 54px; /*décalage horizontal de l'infobulle*/
background-color: #1D1D1D;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 10px 0px #4d4b4b;
-moz-box-shadow: 0px 0px 10px 0px #4d4b4b;
box-shadow: 0px 0px 10px 0px #4d4b4b;
border-left: 5px double #4d4b4b;
padding: 5px;
}
MlleAlys- Membre actif
- Messages : 5968
Inscrit(e) le : 12/09/2012
Re: problème avec espace récurrent et scroll
Merci!! Je faisais le bon truc mais encore une fois dans le mauvais panneau d'admin...je crois que la fatigue a eu raison de moi. Bref c'est réglé, vous êtes géniaux!!! Je laisse le sujet ouvert une heure ou deux juste au cas.
Bonne continuation
Bonne continuation
Re: problème avec espace récurrent et scroll
.. | Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif |
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Sujets similaires
» probleme récurrent avec servimg
» Problème récurrent avec la bannière publicitaire
» Problème avec le Header de modernbb - image disparait au scroll - placement du menu
» Problème d'espace avec image de catégorie
» Espace entre image et bordure ! Help s'ilvouplaît ! Problème pour un espace que j'aimerais retiré. Merci.
» Problème récurrent avec la bannière publicitaire
» Problème avec le Header de modernbb - image disparait au scroll - placement du menu
» Problème d'espace avec image de catégorie
» Espace entre image et bordure ! Help s'ilvouplaît ! Problème pour un espace que j'aimerais retiré. Merci.
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