Problème avec code PV
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
Problème avec code PV
Bonjour
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 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 :
Voici le code html de la fiche :
et le code CSS :
Merci d'avance pour votre aide
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 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
Dernière édition par melinda020 le Ven 28 Déc 2012 - 19:02, édité 1 fois
Re: Problème avec code PV
Bonjour,
Tu peux ajouter une marge à ta zone de message, avec ceci :
Tu peux ajouter une marge à ta zone de message, avec ceci :
- Code:
.postbody {padding-top:20px;}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Problème avec code PV
Merci beaucoup cela résout l'un de mes problèmes
Reste le cadre qui est plus grand que l’icône...
Reste le cadre qui est plus grand que l’icône...
Re: Problème avec code PV
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 :
MAUVAIS EXEMPLE :
Voilà C’était un peu sournois !
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à C’était un peu sournois !
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Problème avec code PV
ça fait déjà mieux mais ça ne fait toujours pas le tour de l’icône, le haut et le bas dépassent :
Désolée je suis chiante --" Alors que c'est des trucs tout simples en plus
- Spoiler:
Désolée je suis chiante --" Alors que c'est des trucs tout simples en plus
Re: Problème avec code PV
Pas de souci, tu n’es pas chiante
Donc, le taille de l’image est définie ici :
Donc, le taille de l’image est définie ici :
- Code:
div.infobulle img {
height: 50px;
width: 50px;
}
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Problème avec code PV
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
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
Re: Problème avec code PV
Ah, d’accord, je n’avais pas compris ça. Dans ce cas, alors il faut retirer les sauts de ligne ici :
Il faut tout coller À faire pour chaque icône.<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>
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Problème avec code PV
ça marche !!!! Merci infiniment pour m'avoir aider et surtout pour ta patience !!
Sujets similaires
» Problème avec le code [Sélectionner un code]
» Problème avec le code Javascript pour le feu d'artifice (code pour les fêtes)
» Problème avec mon code de formulaire de problème.
» problème avec un code
» Problème avec un code
» Problème avec le code Javascript pour le feu d'artifice (code pour les fêtes)
» Problème avec mon code de formulaire de problème.
» problème avec un code
» Problème avec un code
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