Sujets similaires

Bonjour à toutes et à tous,

J'espère que votre dimanche s'est bien passé, toussa toussa!

Je voudrais vous faire part d'un problème et souligner le fait que je suis une vraie débutante dans le domaine du codage.
J'ai cherché sur le forum pour voir si un précédent message à propos de mon souci avait été posté, mais je n'en ai pas trouvé. Après, je peux me tromper.

Lien du code sur CSSActif : ici
Code CSS, au cas où :

Spoiler:

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 */

Code HTML, au cas où :

Spoiler:

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>Appartenance</em>: Groupe
<em>Date de naissance</em>: 01/01/0001 (100 ans)
<em>Métier</em>: Parmi ceux disponibles
<em>Idéologie</em>: Détails
<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>

L'adresse internet du forum dont il est question :

L'explication du problème : En gros, je ne comprends pas très bien ce qu'il faut faire. Il me semble avoir tout essayer mais la fameuse fiche a une forme complètement différente : l'avatar est découpé en plusieurs parties à la verticale, les liens le longent et les informations des infobulles ne sont écrits sur les icônes... En gros, rien n'est à sa place. Désolée, pas de screenshot : je ne trouve pas cette fonction sur mon Mac ^^ Par contre, j'ai trouvé un forum où le code buggue de la même manière ici.

Des précisions supplémentaires : Je sais que je suis vraiment pas douée dans ce domaine. Mais j'avoue que là, je commence un peu à m'arracher les cheveux. Faut-il accrocher des codes les uns des autres? Les laisser à leur place? Qu'est-ce qu'il faut enlever et laisser? Est-ce que cela vient du forum? Voilà un peu mes questionnements...

N'hésitez pas à me questionner et/ou à me guider pas à pas, s'il vous plaît...
Vous pouvez aussi me dire que je suis nulle, mais de manière très indirecte ^^

Merci d'avance!

Voici une demande d'aide bien complète qui, j'en suis sûre, trouvera vite ses réponses ! Wink

N'étant pas codeur, je ne peux pas t'aider beaucoup, si ce n'est que pour une capture écran sur Mac, c'est très simple, tu fais : Pomme+Maj+"4" et tu sélectionnes la zone à capturer avec le curseur qui est devenu une croix.
(touche "4" du clavier, pas du pavé numérique.) Very Happy

Puis tu récupères ta capture sur ton bureau. Et hop.

Merci pour l'info, Pamina! Mais même ça, je n'y arrive pas Razz

*va se chercher une corde...*

Par contre, j'ai trouvé un lien où la fiche "buggue" de la même manière : là. Il faut regarder le deuxième message. Le résultat est le même que sur le forum que je mentionne dans mon premier message.

(+ J'ajoute ce lien dans mon premier message.)

Pour la capture, tu appuies bien sur les 3 touches Pomme+Maj+"4" simultanément ? Suspect

Bon... J'aurais rien dis, mais vu ta question, j'avoue qu'en fait, ça a marché : c'est arrivé direct sur mon bureau, mais je l'ai vu qu'après avoir posté ici tout à l'heure.
Mais j'avais compris du premier cou qu'il fallait appuyer simultanément Rire

La preuve : là.

On progresse ! Rire

Pour la suite, suffit de rester Problème avec la Fiche PV avec bannière latérale d'Orange 1516208530

... en attendant un codeur.

Mais, mais j'ai l'impression qu'il n'y a pas le CSS du code, tu es sur que tu l'as bien ajouté ?

J'ai essayé avec, mais ça n'a pas marché.

Bon... Quand je dis "essayé", c'est que j'ai tenté d'assembler les deux, avec mes modifs, mais le résultat a été le même que dans le screenshot/le lien que j'ai mis, avec tout plein de codes autour en plus et bien apparents...

Et lorsque tu as "essayé", tu as bien pensé à enregistrer les modifications de ta feuille CSS ?

Je suis pas sûre de comprendre... J'ai directement coller-copier en fait...

Le HTML est a collé dans un message, tandis que le CSS est à mettre directement sur ton forum, dans le panneau d'administration. Si le forum en question ne t'appartient pas, dans ce cas, tu dois faire la transition HTML/CSS ou te créer une page html depuis un forum à toi.
Sinon, pour le CSS, tu vas dans panneau d'administration > Affichage > Couleurs > Feuille de Style.
C'est dans cette fameuse feuille de style que le CSS se copie.

Haaaaan! Je vais essayer ça!
Merci infiniment Hinari!

Edit une heure après : J'ai rien compris, en fait xD
Ce n'est pas du tout ta faute Hinari! C'est bien la mienne!

- Le forum créé peut être .lebonforum.com? ou autre?
- Dans la partie dont tu me parles dans le Panneau, j'enlève ce qu'il a de marqué en rouge bordeau?
- Je "mélange" le CSS et le HTML dans le message que je poste ensute sur le forum?
- Comment on récupère la fiche d'un autre forum pour la mettre sur le forum où je veux qu'elle apparaisse?

Voilà.... Problème avec la Fiche PV avec bannière latérale d'Orange 577704309

Problème avec la Fiche PV avec bannière latérale d'Orange 577704309

Oh là là O.o

Personnellement je te conseillerais d'apprendre les bases du HTML/CSS si tu veux utiliser du code HTML/CSS, sinon c'est pas la peine ^^' Ça prendra peut être une semaine, ou deux, mais c'est essentiel.

Sinon le code est constitué de deux parties, une partie HTML, qui s'utilise dans les messages, et une partie CSS, qui doit être collée dans le panneau d'administration de ton forum, onglet Affichage, menu Images et Couleurs » Couleurs puis onglet Feuille de style CSS.

• Ca ne marchera pas si tu essaies d'utiliser ce code sur un forum qui n'est pas le tien
• On ne mélange pas le CSS et le HTML, orange a donné deux codes différents c'est pas pour qu'ils soient collés ensemble '_'
• Dans le pire des cas, tu peux créer une page HTML et l’appeler dans un forum extérieur via une iframe, mais si tu ne connais déjà pas les bases du HTML et du CSS ce n'est pas la peine d'essayer.

Mais euuuuuuuh! (Non, t'inquiètes, je sais pertinemment que tu as tout à fait raison ^^)

Bon! C'est bon >.< Problème avec la Fiche PV avec bannière latérale d'Orange 3517359236

Problème avec la Fiche PV avec bannière latérale d'Orange 3517359236

Je capitule et vais lire le cssdébutant en entier! Merci à tous ceux qui m'ont répondus!

Je clôture pour le moment et tu reviens quand tu as précisé tes besoins ?
Ou bien tu as encore une question ? Neutral

Clôtures.

OK.
A bientôt ! Wink

Problème avec la Fiche PV avec bannière latérale d'Orange

Problème avec la Fiche PV avec bannière latérale d'Orange

Sujets similaires

Sujets similaires

Partenaires Or