Problème avec code PV

2 participants

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

Résolu Problème avec code PV

Message par melinda020 Ven 28 Déc 2012 - 15:48

Bonjour Very Happy

Alors voilà, j'ai un petit soucis un code que j'ai emprunté, la personne ne me donnant pas de nouvelle, je m'adresse à vous pour le régler Wink Le nom-prénom empiète sur le éditer-supprimer etc. et le cadre des icônes pour les liens dépassent desdites icônes au lieu de les entourer. Voilà ce qu'elle est censée donner : http://upload.cssactif.com/demo/1335295768.html et ce qu'elle me donne :
Spoiler:

Voici le code html de la fiche :

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://img10.hostingpics.net/pics/279002welling_2.png);">©️Lellia</td><td valign="top"><div class="cssactif_pv_titre"><!--
--><h1>Prénoms & Nom</h1>
feat. Célébrité, Libre</div><div class="cssactif_pv_content"><!--
--><em>Date de naissance</em>: 01/01/0001 (100 ans)
<em>Métier</em>: Parmi ceux disponibles
<em>Précisions</em>: Autres détails
<em>Personnalité</em>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in  vehicula enim. Mauris non justo est, vitae congue lacus. Nulla molestie  sodales ornare. Fusce nisi massa, tempus in viverra at, dictum id risus.  Sed sit amet elementum nisl. Donec at mauris dui, quis tristique orci.
<em>Liens</em>:
<div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien">Nom & prénom</a> - 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.</div>
</div><!--
--><div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien">Nom & prénom</a> - 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.</div>
</div><!--
--><div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" /><div><a href="#Lien">Nom & prénom</a> -  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.</div>
</div><!--
--><div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien">Nom & prénom</a> - 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.</div>
</div><!--

--></div></td></tr></table>
<div class="cssactif_pv">
<h2>Résumé de l'histoire</h2><!--
--><div class="cssactif_pv_content">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. Integer convallis mollis arcu, id cursus risus venenatis ac. Sed gravida, magna et molestie tempor, ante eros dignissim enim, sit amet volutpat elit nulla sit amet magna. Fusce varius, tellus eget tincidunt semper, quam magna tincidunt nisl, imperdiet condimentum lectus orci et neque. Nullam et erat quam, ac condimentum magna. Donec lobortis dapibus eros, vitae blandit felis faucibus eu. Nulla ipsum velit, posuere vel malesuada eu, rutrum et odio. Maecenas arcu augue, blandit a porta sit amet, vulputate non purus. Nullam quis elit quis sem blandit varius sit amet vitae lacus. Suspendisse potenti. Suspendisse fringilla lacinia sagittis.

<div style="font-size: 10px; text-align: center;">NOM DE VOTRE FORUM soutient la création; cette fiche a été codée par Orange de <a href="http://www.css-actif.com">CSSActif</a></div>
</div></div>

et le code CSS :

Code:
/* ------------- FICHE PV Créee par Orange de CSSActif (http://www.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 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* 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: 320px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande (Hauteur de l'avatar) */
 
  border-right: 15px double #921628; /* 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: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */

  font-size: 32px; /* Taille du texte: TAILLEpx */
 
  text-shadow: 1px 1px 0px #000; /* Ombre du texte */
 
  color: #d51731; /* 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: -28px;
 

  text-align: right;      /* Aligne le texte à droite */
 

  padding-right: 20px;    /* Défifine une marge interne */
  color: #CCCCCC; /* Couleur du feat */
}

.cssactif_pv h2 { /* Sous-titres "Identité", "Opinions" etc. */
 background-color: #111111;  /* Couleur du fond des sous-titres */
 border-color: #6a0e1b; /* 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 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #000000;  /* 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: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #921628;  /* 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: 5px; /* 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 */
}

.cssactif_pv em { /* Libellés */
  font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
  color: #921628;  /* Couleur du titre */
  font-style: normal;
  text-transform: uppercase;
 
}


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: 10px; /* marge entre les icones */
  border: 1px solid #333; /* bordure des icones */
 
  -webkit-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone  (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 5px 0px #000000;  /* Ombre de l'icone  (voir http://css3generator.com/ choix "Box-shadow") */

}

div.infobulle img {
 height: 50px;
 width: 50px; 
}

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: 300px; /* Largeur de l'infobulle */

  top: 50px; /* on positionne notre infobulle */
  left: 0px;

  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 #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000;  /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
      border-left: 6px double #921628;
      padding: 10px; /* marge interne de l'infobulle */
}
/* ------------- FIN FICHE PV */

Merci d'avance pour votre aide Very Happy


Dernière édition par melinda020 le Ven 28 Déc 2012 - 19:02, édité 1 fois
avatar

melinda020
**

Messages : 53
Inscrit(e) le : 13/11/2009

http://twilightinlove.forumtwilight.com/index.htm
melinda020 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec code PV

Message par Matriochka Ven 28 Déc 2012 - 16:33

Bonjour,

Tu peux ajouter une marge à ta zone de message, avec ceci :
Code:
.postbody {padding-top:20px;}
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Problème avec code PV

Message par melinda020 Ven 28 Déc 2012 - 17:31

Merci beaucoup Very Happy cela résout l'un de mes problèmes Very Happy

Reste le cadre qui est plus grand que l’icône...
avatar

melinda020
**

Messages : 53
Inscrit(e) le : 13/11/2009

http://twilightinlove.forumtwilight.com/index.htm
melinda020 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec code PV

Message par Matriochka Ven 28 Déc 2012 - 17:41

Pour ça, le problème vient du fait qu’il manque un saut de ligne juste sous l’image. Il y en a une au-dessous et au-dessous de chacune des icônes contenant une infobulle sauf sur celle-ci :

BON EXEMPLE :
Code:
<div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" />
    <div><a href="#Lien">Nom & prénom</a> - 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.</div>

MAUVAIS EXEMPLE :
Code:
<div class="infobulle">
    <img src="http://i28.tinypic.com/33eseiq.jpg" /><div><a href="#Lien">Nom & prénom</a> -  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.</div>

Voilà Smile C’était un peu sournois !
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Problème avec code PV

Message par melinda020 Ven 28 Déc 2012 - 18:04

ça fait déjà mieux Very Happy mais ça ne fait toujours pas le tour de l’icône, le haut et le bas dépassent :
Spoiler:

Désolée je suis chiante --" Alors que c'est des trucs tout simples en plus Neutral
avatar

melinda020
**

Messages : 53
Inscrit(e) le : 13/11/2009

http://twilightinlove.forumtwilight.com/index.htm
melinda020 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec code PV

Message par Matriochka Ven 28 Déc 2012 - 18:06

Pas de souci, tu n’es pas chiante Smile

Donc, le taille de l’image est définie ici :
Code:
div.infobulle img {
 height: 50px;
 width: 50px; 
}
À toi de modifier 50px par la valeur de ton choix.
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Problème avec code PV

Message par melinda020 Ven 28 Déc 2012 - 18:26

c'est gentil lol

au fait c'est la taille du cadre que je veux changer, l'image est 50x50, mais le cadre semble plus haut qu'elle alors qu'il devrait aussi être à 50x50
avatar

melinda020
**

Messages : 53
Inscrit(e) le : 13/11/2009

http://twilightinlove.forumtwilight.com/index.htm
melinda020 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec code PV

Message par Matriochka Ven 28 Déc 2012 - 18:30

Ah, d’accord, je n’avais pas compris ça. Dans ce cas, alors il faut retirer les sauts de ligne ici :
<div class="infobulle"> ____
___
<img src="https://2img.net/h/oi28.tinypic.com/33eseiq.jpg" /> ___
___
<div><a href="#Lien">Nom & prénom</a> - 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.</div>
Il faut tout coller Smile À faire pour chaque icône.
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Problème avec code PV

Message par melinda020 Ven 28 Déc 2012 - 19:02

ça marche !!!! Merci infiniment pour m'avoir aider et surtout pour ta patience !! Angel

résolu
avatar

melinda020
**

Messages : 53
Inscrit(e) le : 13/11/2009

http://twilightinlove.forumtwilight.com/index.htm
melinda020 a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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