Coucou ! Voilà, c'est bien beau de reprendre les codes à droite et à gauche, car en réalité, on apprend pas grand chose en fin de compte. Du coup, j'aimerais bien qu'on m'en explique les bases, et ce qu'on peut en tirer, genre les limites. Qu'est ce qui différencie le HTML, et le CSS ? J'ai entendu dire que le HTML, c'était les fondations et le CSS la décoration, c'est vrai ?

Comment peut-on réaliser un tableau ou rendre une image avec une opacité amoindrie ? Comment peut-on faire pour faire apparaître une image sur un lien, en "mouseover" (merci les maccros sur wow lol) ? Mais surtout y a t il moyen de trouver une explication qui ne sort pas d'un bouquin de chinois, parce que j'avoue, j'ai rien compris dans mes recherches sur notre Dieu Google...

Donc, je viens vers vous dans un moment de solitude intense lol

Ah çà, c'est une question pour moi

HTML est l'acronyme de Hypertext Markup Langage. En gros, c'est donc un langage informatique qui te permet de marquer du texte et de le dynamiser. Ca marche comme les balises BBcode (en fait, les bbcodes sont des raccourcis traîtés pour du html souvent ^^) et on peut voir le HTML comme les poupées russes, les matroiskas, je crois. Ou comme une gélule médicament. les balises sont les capuchons et le texte le médicament. Il existe tout un tas de balises (jumelles ou solitaires) pour tout un tas de paramètres.
Les balises jumelles sont du genre :

Code:

<mabalise>mon blabla</mabalise>

Exemples :
<p>mon paragraphe</p>
<span>ma séquence de mots</span>
<div>mon bloc</div>

et les solitaires du genre :

Code:

<mabalise/>

Exemples :
<img/>
<br/>

Donc oui, on peut parler de fondation ou d'architecture quand on parle de HTML

CSS est l'acronyme de Cascading Style Sheets, les feuilles de style en cascade ! Ce sont des indications groupées de graphisme qui se répercutent sur toutes les balises HTML concernées.
Par exemple, si tu désires que tous les liens de ta page soient colorés en rose (la couleur préféré du Sha) il te suffirait d'écrire a {color : pink;} : c'est la notion de cascade !



Toi, ce qui t'intéresse, c'est pouvoir intéragir avec tes posts, si j'ai bien compris, donc je vais te simplifier la tâche !
Déjà, tu peux oublier tous les paramètres pour javascript ( cad onMouseOver, onClick, onLoad, etc...) car forumactif en interdit l'utilisation. D'ailleurs forumactif interdit aussi d'autres personnalisations, mais je ne connais pas vraiment la liste entière. Bref...
Comme ces codes sont à destination d'un forum, tu peux oublier aussi les balises HTML html, head, meta et body, sinon tu risquerais de fâcher le staff

Bien, maintenant, admettons que tu veuilles faire un titre pour une fiche de relations, par exemple...

Code:

<span>mon titre</span>

Tu sais que tu vas en avoir besoin plus d'une fois et t'as pas envie de réécrire tout ton style associé à chaque fois, donc, tu vas faire comme tout bon père qui se respecte, tu vas nommer ton enfant en le classant

Code:

<span class='dakota_montitre'>mon titre</span>

(j'ai commencé par dakota_, comme çà, tu peux être sûr de ne pas intéragir avec une autre balise du forum qui s'appelerait montitre ^^)
Et voilà, t'as ton titre, t'es content mais il ressemble au reste de ton texte, et toi, tu le veux différemment. Donc, toi, malin, tu vas simplement mettre en début de post, tes instructions en les déclarant comme CSS ( la fameuse cascade)

Code:

<style type='text/css'>.dakota_montitre{color : pink;}</style>

<span class='dakota_montitre'>mon titre</span>

Et là, magie, ton titre se colore en rose, la classe, hein ! Et encore mieux, si tu réutilises une autre span ailleurs dans ton texte avec la même classe, elle sera aussi en rose !
Alors, je te vois venir, tu vas me dire pourquoi ne pas écrire simplement :

Code:

<span style="color : pink;">mon titre</span>

Et bien je te répondrai que c'est aussi une alternative, seulement, dès que tu voudras changer une des propriétés graphiques de ton titre, tu devras la changer pour tous tes titres... Et ca devient vite très chiant, doublé d'une conjonctivite parce que t'as le nez collé sur ton écran à traquer tes titres... Alors qu'en CSS, la fameuse cascade se répercute directement sur tout ce que tu as normé (défini) comme un titre...

Cà, c'était une explication minimaliste de tes premières questions, j'espère que ca t'aidera !

Un tableau
Là, pour un tableau, il va te falloir utiliser tout un tas de balises HTML qui s'appellent :
- table : balise jumelle qui permet à ton navigateur de savoir que tu fais un tableau
- tr : table row : balise jumelle qui permet à ton navigateur de savoir que tu définis une ligne de tableau !
- td : table data : balise jumelle qui te perme de définir une cellule de tableau

Code:

<table>
<tr><td>ma première celulle de ma première ligne</td><td>ma seconde celulle de ma première ligne</td></tr>
<tr><td>ma première celulle de ma seconde ligne</td><td>ma seconde celulle de ma seconde ligne</td></tr>
</table>

Résultat :

ma première celulle de ma première ligne	ma seconde celulle de ma première ligne
ma première celulle de ma seconde ligne	ma seconde celulle de ma seconde ligne

Code:

<style type='text/css'>.dakota_tableau{border-collapse : collapse} .dakota_tableau td{ width : 250px; text-align : center; border : 1px solid pink;}</style>

<table class='dakota_tableau'>
<tr><td>ma première celulle de ma première ligne</td><td>ma seconde celulle de ma première ligne</td></tr>
<tr><td>ma première celulle de ma seconde ligne</td><td>ma seconde celulle de ma seconde ligne</td></tr>
</table>

Résultat :

ma première celulle de ma première ligne	ma seconde celulle de ma première ligne
ma première celulle de ma seconde ligne	ma seconde celulle de ma seconde ligne

Ici, tu remarqueras que j'ai utilisé le style border-collapse pour les coller les cellules entre elles
Et tu remarqueras aussi le tour de passe-passe qui consiste à définir des styles génériques pour une balise spécifique (toutes les td de ton tableau "dakota_montableau" en l'appelant côté css .dakota_tableau td)

L'opacité est une propriété CSS qui s'appelle simplement opacity et qui prend pour valeur un chiffre entre 0 et 1, 0 définissant l'invisibilité et 1, le plein.

Opacité à 1	Opacité à 0.5	Opacité à 0.1

Lien magique
Je réfléchis si je trouve un moyen de contourner l'impossibilité d'utiliser javascript

Lien magique
Après petite vérification, voici une solution basique

Code:

<style type='text/css'>.dakota_lienmagique img{display : none; position : absolute; z-index : 100;} .dakota_lienmagique:hover >img{display :block;}</style>

<a class='dakota_lienmagique' href="http://poet-pendulum.forumsrpg.com/u351">Una de Shalott<img src="http://www.saveursdumonde.net/media/upload/ingredient/20.jpg"/></a>

Résultat :
Una de Shalott
Explication :
- Pour faire ce tour de passe-passe, j'utilise une propriété css "display", elle peut prendre notamment les valeurs none (n'affiche rien) ou block(affiche toi et comporte toi comme un bloc)
- j'utilise aussi les propriétés génériques d'un élément spécifique (.dakota_lienmagique img)
- et j'utilise enfin la sélection d'enfants couplée à la propriété "au survol de la souris" (.dakota_lienmagique:hover >img)

Ensuite tu peux travailler les propriétés de l'image pour la transformer et la mettre comme tu veux !

Edit : j'ai rajouté la condition absolute, pour que l'image écrase le texte...

Waow ! Bah tout d'abords, un grand merci ! ça m'a permit d'apprendre pas mal de chose et t'as répondu à pas mal de mes questions ! Bon, par contre, j'm'excuse d'avance des questions qui vont suivre, car ça risque soit d'être flou soit tu vas pouvoir te foutre de ma gueule bien comme il faut tant elles seront connes pour toi lol

alors class='dakota, je suis obligé de le remettre à chaque code HTML que je souhaite pour qu'ils aient le même effet c'est ça ? mais surtout pour éviter que je prenne les codes d'une autre personne ?

Pour le tableau, je comprends pas trop ce que border:collapse fait sur le tableau... border : 1xp est le seul à faire apparaître le tableau non ?

Ensuite pour l'opacité, en faites, ce que je cherchais à apprendre à faire, c'est : genre y a une image net, toute jolie sur le design ou sur un post, et que, quand on passe le curseur de la souris, et bah, l'opacité se réduise. Ou l'effet inverse par exemple ^^

Et enfin, pour le lien magique, je t'avoue que je suis encore entrain de comprendre. Je pense avoir compris plus ou moins ce que tu as dit sauf que je comprends pas le "dakota" normalement ton lien aurait dû être rose non ?

Faire comprendre à ton navigateur les notions HTML et CSS
Pour faire comprendre au navigateur qu'on va lui causer en HTML, on utilise les balises que je t'ai défini plus haut ;
Et pour pour lui faire comprendre qu'on va lui causer en css, on peut :
- transcrire son style sur la propriété "style" d'une balise :

Code:

<mabalise style="mes différents styles que je veux appliquer pour cette balise">mon blabla</mabalise>

- lier une feuille de style à la page (mais là on peut pas, puisqu'on est pas propriétaire du forum ^^)
- transcrire son style via la balise style et ainsi le répercuter partout sur la page :

Code:

<style type="text/css">mes différents styles que je veux appliquer pour cette page</style>

(Donc si j'avais mis a {color : pink;} dans cette balise, tous les liens de cette page seraient roses, ca aurait fâché Elo et Sha et j'aurais eu la fessée )
En fait, si je te conseille de toujours normer tes balises en commençant par dakota_, c'est pour être sur que tu ne vas pas interférer avec le style général du forum ! (comme changer le fond P&P par une photo de Brandon Stoughton en tenue légère par exemple ^^)

Comment fonctionne CSS
Déjà, avec une balise style, comme tu viens de le voir, le css va se répercuter sur toute la page. Ici sur le forum, ca veut dire que tous les posts de cette page la page 1) vont être assujettis par les propriétés que tu mettras dedans.
Donc pour répondre à ta question, inutile de répéter ce code sur chaque post, sur un seul, ca suffit ! Ensuite, il te suffit de normer tes balises comme tu veux pour appeler le style que tu souhaites.

Identifiants, classes et multinormage
Un identifiant, c'est un nom qu'on donne à une balise, il doit être unique (un peu comme ton n° de sécu ^^) pour chaque balise !
Une classe, c'est un nom générique qu'on donne à une balise, et qui peut appartenir à plusieurs balises, c'est une famille en somme.
Côté HTML, on va utiliser les propriétés id et class pour normer une balise :

Code:

<ma balise id="prénom de la balise" class="famille de la balise">mon blabla</mabalise>

Et côté CSS (dans la balise style, donc ^^), on va pouvoir définir les propriétés des balises nommés (identifiées) et celles affiliées (classées) avec une entête # (pour les noms) ou . (pour les familles)
Le multinormage, c'est un mot que j'ai inventé pour te dire que tu peux classer une balise avec plusieurs noms si tu le souhaites en laissant simplement un espace entre chaque nom.

Code:

<ma balise class="famille1 famille2 famille3">mon blabla</mabalise>

Propriété border-collapse
Exemple d'un tableau dont les cellules sont encadrées en rouge, sans effondrement (collapse) :

cellule A1	cellule A2
cellule B1	cellule B2

Exemple d'un tableau dont les cellules sont encadrées en rouge, avec effondrement (collapse) :

cellule A1	cellule A2
cellule B1	cellule B2

La propriété border est en fait une "superpropriété" qui, quand elle n'est pas occupée à faire régner l'ordre et la justice dans les rues, regroupe en fait trois propriétés qui sont : border-size, border-style et border-color (d'où le border : 1px solid red;)
D'un point de vue pratique, t'as raison, c'est elle qui fait apparaître le tableau mais ce n'est pas elle qui la définit. J'aurais pu aussi simplement appliquer une couleur de fond pour faire apparaître aussi mon tableau.

Gestion de l'opacité au survol de la souris
Au survol de la souris, on parle d'événement. Et en CSS, les événements sont nommés par des :mon_événement. Ici, tu veux le passage de la souris sur ton image, donc c'est :hover qui t'intéresse

Code:

<style type='text/css'>.dakota_ausurvol{width : 250px; opacity : 0.2} .dakota_ausurvol:hover{opacity : 1;}</style>

<img class='dakota_ausurvol' src="http://i24.servimg.com/u/f24/11/04/31/07/noiset10.jpg"/>

Résultat :


Voilà
Tes questions sont pas connes, au contraire ! Et puis si ca peut aussi aider d'autres personnes, c'est tant mieux !

Exemple concret







Côté HTML (seulement le bloc du premier PNJ)

Code:

<div class="dakota_bloc"><img src="http://img852.imageshack.us/img852/8289/al1f.png"/>
<span class="dakota_titre dakota_almodovar">MIGUEL, ALONZÒ ALMADOVAR.</span>
<span class='dakota_soustitre dakota_16'>ex-Auror, ex-Président du Magenmagot</span>
<span class='dakota_soustitre dakota_14'>suspecté comme étant le chef du Chant du Phénix.</span>
<div class="dakota_commentaire">Miguel, Alonzò Almadovar (1961 - ...) est né à Guadalajara, au Mexique. Il approche la cinquantaine, et c'est quelque chose qui surprend étant donné qu'on lui donne plus facilement soixante et des brouettes que la cinquantaine. Miguel est le patriarche de la maison Almadovar, même si son père est toujours en vie. En faites, ce dernier a décidé de laisser les rennes à son fils pour pouvoir se payer une vie cool au large de Cancùn. L'hispanique est ce qu'il y a de pire, et paradoxalement, de meilleur au Mexique. Miguel est un homme de petite taille, certes, mais a ne pas prendre à la légère. Les cheveux noirs, une gueule pas franchement sympathique, mais d'un charisme fou, l'un des sorciers des plus puissants d'Amérique latine sait faire ce qu'il veut des gens qui l'entourent. Raffiné, et très protecteur, il a toujours fait de sa famille un havre de paix totalement en marge avec ses affaires qu'il a. Pas franchement clean sur toute la ligne, il reste quelqu'un de très aimé. C'est un ancien auror violent, mais qui a toujours su trouvé des réponses à ses enquêtes, a ramené les mages noirs pas franchement en accord avec la société. Et malgré le fait qu'il manipule une magie pas particulièrement en adéquation avec ses idéaux, il fait partit de ces sorciers qui ont toujours montré que ce n'était pas ce que l'on manipulait qui faisait de nous quelqu'un de mauvais, mais ce que l'on en faisait. Différence subtile, mais qui prend tout son sens lorsque l'on connaît bien Miguel. C'est grâce à lui, également, que les alliances avec le clan Oleivera, Sandovar, la famille de Rivera, Esperanza mais aussi de la maison Villaraigosa.</div></div>

Côté CSS

Code:

<style type='text/css'>.dakota_bloc{font-size : 10px; color : dimgray;} .dakota_bloc img{opacity : 0.2;}  .dakota_titre{font-size : 24px; font-family : Georgia;} .dakota_soustitre{color : tan; font-family : courier new;} .dakota_16{font-size : 16px;} .dakota_14{font-size : 14px;} .dakota_commentaire{display : none; position : absolute; z-index : 100; width:350px; height : 200px; overflow : auto; background-color : #1c1815; border : 2px solid #121110; margin-left : 150px; margin-top : -150px; padding : 5px;  opacity : 0.9;} .dakota_almodovar{color : firebrick;} .dakota_oleivera{color : olivedrab;} .dakota_bloc:hover img{opacity : 1;} .dakota_bloc:hover > .dakota_commentaire{display : block;}</style>

Si tu cites ce post, tu verras que le code est super allégé, le css se répercute bien, et les blocs se ressemblent assez, sauf pour la famille Oliveira où une classe diffère (pour la couleur olivedrab)

Okay ! Donc, en faites, la seule chose que j'ai a retouché dans ce code c'est à chaque fois que je change de famille ? je mets dakota_oleivera ou dakota_sandovar et ça me changera tout ?

Bon, je pense avoir compris ce que tu as écris ! j'essayerais de mettre ça en oeuvre prochainement ! ^^
Et pour les petits froufrou que j'ai vu... Genre l'ombre qu'il y a dans les fiches types de présentations, etc ? je mets en fonction de là où je veux qu'il soit ? Genre pour un tableau je le mets dans {Border-collapse-shadow} et pour un lien je mets a. {font-shadow} ? (à moins ce que ce soit un autre code bien sûr ^^)

.dakota_almodovar{color : firebrick;} .dakota_oleivera{color : olivedrab;}

Moi j'ai mis que çà, mais effectivement, c'est le principe !

Pour les dégradés, en revanche, pas vraiment...

Ya la propriété text-shadow et la propriété spécifique au moteur Gecko ( le logiciel de Firefox qui compile les pages internet) -moz-box-shadow !
pour un tableau, tu mets donc un -moz-box-shadow et pour du texte seulement text-shadow.

ces deux propriétés prennent les valeurs suivantes : vers la gauche, vers le bas, largeur du dégradé, couleur du dégradé.

Ainsi ca te donne : -moz-box-shadow:0 0 20px #ffffff pour un dégradé blanc large de 20 pixel et centré sur ton bloc par exemple ;
ou text-shadow:2px 2px 2px #ffffff pour un dégradé qui va se faire à deux pixels à gauche, 2 pixels en bas, et qui va reproduire ton texte en fond dégradé sur 2pixels de largeur