problème avec espace récurrent et scroll

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu problème avec espace récurrent et scroll

Message par thaom melcrudak le Jeu 18 Sep 2014 - 15:08

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

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par [Nihil] le Jeu 18 Sep 2014 - 15:47

Hello Smile

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par MlleAlys le Jeu 18 Sep 2014 - 15:52

bonjour,
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
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par thaom melcrudak le Jeu 18 Sep 2014 - 19:02

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é!! Sad


Merci beaucoup pour votre aide Smile

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par MlleAlys le Jeu 18 Sep 2014 - 20:02

ok, j'espère avoir compris, voilà ce que je propose ^^ :

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;
}
et ajoutez position:relative; ce qui donne :
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;
}
Modifiez-le ainsi :
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
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par thaom melcrudak le Jeu 18 Sep 2014 - 20:28

Nous y sommes presque, mais dès que le contenu dépasse le 390px, un espace apparaît encore sous l'image de gauche. J'aimerais que cela ne se produise pas.

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.

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par MlleAlys le Jeu 18 Sep 2014 - 20:52

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)

MlleAlys
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par thaom melcrudak le Jeu 18 Sep 2014 - 21:00

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

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par MlleAlys le Jeu 18 Sep 2014 - 21:10

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 !) :
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
+ Hyperactif +

Messages : 4404
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par thaom melcrudak le Jeu 18 Sep 2014 - 21:27

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 Smile

thaom melcrudak
***

Féminin
Messages : 123
Inscrit(e) le : 12/01/2014

http://www.ildir.purforum.com
thaom melcrudak a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec espace récurrent et scroll

Message par Lixyr le Ven 19 Sep 2014 - 20:41

..Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton

A bientôt sur ForumActif Smile





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5645
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum