Dis'cuisson de pixels

D'après une suggestion de Silivren, notre reine du code , ce sujet est là pour vous permettre d'avoir de l'aide, des explications, des propositions pour tous vos besoin liés à du codage (possible en livre de bord, je rappelle qu'ailleurs c'est à éviter) et au graphisme (signature, avatar, fiche personnage etc...).

Tout le monde peut aider, l'entraide c'est une des 7 portes sur la Voie du Cookie  
Si vous ne savez pas ou n'êtes pas sûr de vous, floodez juste ne dites rien.

Les raccourcis vers les codes / tutos

• Navigation vers ses fiches de perso dans sa présentation
  

Alors la "reine" du code (ahem...) ouvre le bal.

Je voudrais mettre des raccourcis pour mes fiches dans le premier message. Je sais qu'on a déjà dit comment faire mais j'ai complètement oublié.

En fait il faut juste que tu ajoutes un attribut "id" dans une div existante de ta fiche. Tout en haut c'est mieux. Donc par exemple, pour ma fiche de Pasha j'ai ajouté ça :

Code:

<div class="character-sheet" id="pasha">

Attention, j'ai pas créé cette ligne ; le "div class" existait déjà dans la fiche. J'ai juste ajouté le bout "id". Après, là où tu veux créer ta navigation, tu créés des liens tout simple qui mène vers ta fiche et à la fin tu ajoutes un # avec le id que t'as utilisé.

Pour ma fiche de Pasha c'est donc ça :

Code:

<a href="/t1140-siparti#pasha">fiche de Pasha</a>

Ah oui j'avais remarqué ce code dans ta présentation et celle de Lunatique, j'ai oublié de vous dire d'ailleurs que j'étais repassée pour corriger car ça n'allait pas, la balise.

Du coup le truc à faire c'est pas compliqué, attention c'est parti pour le micro tuto :

Navigation vers ses fiches de perso dans sa présentation

La notion à comprendre ici c'est l'attribut en HTML. Il s'agit de ces alt, src, class, style etc... que vous croisez parfois dans des éléments HTML (exemple d'élément : div, a, img, span).

Pour créer un raccourcis dans une page, il faut créer ce qu'on appelle une ancre. Et pour créer une ancre, on va utilise l'attribut id (pour identifiant). Par exemple, dans une div, on l'ajoute dans la balise ouvrante (elles vont par paire).

Code:

/* un élément div sans attribut */
<div>Ma fiche de perso de Freya</div>

/* un élément div avec attribut id */
<div id="freya">Ma fiche de perso de Freya</div>

Ensuite, on va récupérer cette ancre dans notre navigation en début de fiche. C'est pas compliqué, on utilise l'élément html a et lui met l'attribut href avec pour valeur le même identifiant de notre div, précédé d'un # pour indiquer au navigateur qu'il s'agit d'un identifiant.
Je vous épargne les explications sur le pourquoi on a pas besoin d'ajouter l'url du forum avant.

On aura ainsi un code qui ressemble à ça :

Code:

<a href="#freya">Voir la fiche de Freya</a>

Maintenant que j'ai expliqué le principe, si vous souhaitez l'appliquer à NRP en particulier alors il faut ajouter l'attribut id directement dans la div qui a l'attribut class="charactersheet" car c'est la div qui englobe toute votre fiche de personnage.
Ensuite, vous pouvez présenter la petite navigation en début de fiche comme vous le souhaitez, je vous mets un exemple ci-dessous avec un personnage pour Alpha Perdu et un autre pour Zombieland :

Code:

[center]<a href="#bidule" class="color-ap">Bidule</a> - <a href="#chouette" class="color-zombie">Chouette</a>[/center]

Vous pouvez insérer à la place du nom du personnage, son avatar en petit (sans oublier le alt car si l'image est capoute, c'est le texte du alt qui la remplace, d'où son importance).

Code:

[center]<a href="#bidule"><img src="lien-avatar-bidule"alt="Bidule" /></a> - <a href="#chouette"><img src="lien-avatar-chouette"alt="Chouette" /></a>[/center]

Ce qui nous donnerait (je te pique tes images Silli)

Les trucs à faire gaffe :
- un identifiant est unique, si vous mettez deux fois le même, ça ne marchera pas
- sans alt, l'image est flou (ça vous commençait à prendre le réflexe)
- il y a un guillemet après le = et à la fin du lien/texte et il est soit double " soit simple ' (tant que c'est la même paire)
- les balises div, span et a vont aussi par paires, si vous la fermez mal, c'est souvent ça qui casse le forum ;)

Voili voilou, j'espère que c'est clair

J'ai testé avec Cayden et Anoushka et j'ai réussis sans rien casser !

MERCI !!

yeah !!!

L'état de grâce est passé... ça ne marche pas avec Rosario, pourtant, je ne crois pas avoir changé quelque chose par rapport aux précédentes.

Et j'ai un souci avec les premières fiches... les aurais-je cassées ? Pour une raison qui m'échappe, ça donne ça comme police :

Spoiler:

J'ai mis ça en code :

Code:

[center]<a href="#cayden"><img src="https://zupimages.net/up/20/17/azzn.png"alt="avacayden" /></a> - <a href="#anou"><img src="https://zupimages.net/up/18/29/283e.jpg"alt="avaanou"</a> - <a href="#raz"><img src="https://zupimages.net/up/19/07/ebb2.png"alt="avaraz" /></a> - <a href="#rosario"><img src="https://zupimages.net/up/19/28/a6bj.jpg"alt="avarosario"</a> - <a href="#furaha"><img src="https://zupimages.net/up/20/17/vhty.jpg"alt="avafuraha"</a>[/center]

Et sur la fiche de Rosario :

Code:

<div class="character-sheet" id="rosario">

Code:

<a href="#furaha"><img src="https://zupimages.net/up/20/17/vhty.jpg"alt="avafuraha"</a>

T'as pas fermé ta balise. Il manque le ">" pour fermer l'image.

J'en avais en effet oublié plein . Les fiches sont revenues à la normale, au moins (elles m'ont fait peur !). Et ça marche aussi pour Rosario, ouf. Merci Sip !

Edit : ça ne fonctionne pas pour Micha, Viholvä, Kisha et Leif. La seule différence (que je perçois de ma douétitude en code), c'est que je n'ai pu éditer que leurs fiches en p. 3 alors que les autres, j'ai édité en p. 1 pour mettre id="perso". Ça impacte ?

Evidemment. Il faut ajouter l'id dans toutes les fiches, donc je vais m'en occuper !

Edit : c'est fait, Sili ! Tout marche !

C'est tout bon, du coup, merci beaucoup !

J'arrête de vous embêter sur ce point .

D'ailleurs attention Sip, pour les images c'est /> la fermeture, même si ça marche sans le slash, c'est pas bien.

Oui en effet. J'ai l'habitude des guillemets qui se ferment tout seul sur jsfiddle

Et moi donc, les balises en font autant sur vscode (et tellement plus)

Help !

J'arrive pas à utiliser le cadre+titre qui en me basant sur les explications de la partie libre-service des LdB
Comment il faut les articuler ? Le mieux que j'arrive à faire c'est ça (on voit que le bas du titre). Qu'est-ce que j'ai pas compris ? 8D

Code:

<div class="post-frame bg-light scrollbar scrollbg-dark" style="max-height:100px; border-color:#b4087b"><div class="post-frame-title" style="color:#b4087b">Titre.</div>blablablabla</div>


Merci !!

C'est à cause du scroll. Le scroll est pas compatible avec le post-frame-title.
Ps : avec un bg-light, on verra que le titre est en fait sur un fond gris pour couper la barre.

Code:

<div class="post-frame bg-light" style="max-height:100px; border-color:#b4087b"><span class="post-frame-title" style="color:#b4087b">Titre.</span>blablablabla</div>

Code:

<div class="post-frame bg-light scrollbar scrollbg-dark" style="max-height:100px; border-color:#b4087b"><h4 class="post-subtitle-3" style="color:#b4087b">Titre.</h4>
Blablablabla</div>

Ah j'ai bien fait de demander, j'aurais pas trouvé toute seule xD Quoique le span si... ^^

Merci Sipipette

Hmm, je passe avec une ch'tite question: je sais que certains par ici utilisent un site/outil pour prévisualiser le code autrement qu'en chipotant avec la préviualisation des messages "en direct" sur le forum. J'utilise en général un testeur de code aussi, mais il casse le code du LdB, du coup ça m'intéresserait d'avoir le lien de l'outil que vous utilisez. :)

Personnellement j'utilise JSFiddle.
Il y a une partie HTML, une partie CSS, et tu peux visualiser en bas à droite.

Si tu copies en direct le code que tu as sur le forum ça va pas marcher. Il faut enlever les balises style et aussi mettre les espaces dans le CSS.

Ps : tout ce qui est dans style = CSS.
Tout ce qui est après que la balise se ferme = HTML.

Par exemple, si chez toi sur le forum ça fait ça :

Code:

<style>.imgets { width:150px; height: 150px;margin: 10px 10px 6px; } .imgets img { border-radius:250px 250px 250px 250px; } .imgetabove { position: relative; z-index: 2; width: 150px; height: 150px; opacity:1.0; border:1px solid #B5B5B5; border-radius:250px 250px 250px 250px; padding:3px; } .imgetbelow { position: relative;z-index: 1;width: 150px; height: 150px; margin-top: -158px;opacity: 1.0;border:1px solid #B5B5B5;border-radius:250px 250px 250px 250px;padding:3px; } .imgetabove img, .imgetbelow img {width: a; height: 150px; }</style>

Sur l'outil tu dois le mettre comme ça :

Code:

.imgets {
width:150px;
height: 150px;
margin: 10px 10px 6px;
}

.imgets img {
border-radius:250px 250px 250px 250px;
}

.imgetabove {
position: relative;
z-index: 2;
width: 150px;
height: 150px;
opacity:1.0;
border:1px solid #B5B5B5;
border-radius:250px 250px 250px 250px;
padding:3px;
}

.imgetbelow {
position: relative;
z-index: 1;
width: 150px;
height: 150px;
margin-top: -158px;
opacity: 1.0;
border:1px solid #B5B5B5;
border-radius:250px 250px 250px 250px;
padding:3px;
}

.imgetabove img, .imgetbelow img {
width: a;
height: 150px;
}

Euh... merci, mais mon but c'est de voir si le code marchera une fois sur le forum. Si je dois de toute façon bidouiller et de nouveau changer des trucs pour le passer sur le forum, ça augmente juste le risque que je casse quelque chose lors d'une étape, non? Je suis pas une experte en code du tout.

Normalement y'a pas de risques, faut juste enlever encore une fois les espaces et remettre les balises style en sens inverse. Le CSS fait en externe ne doit pas casser le forum. Le seul truc qui casse le forum c'est si tu oublies des balises.

Okidok, je vais essayer de faire comme ça un de ces jours, merci :)

Vu le niveau du code, mon conseil serait d'utiliser un éditeur simple (genre notepad) pour que ce soit plus simple de s'y retrouver puis de faire les vérifications sur le forum avec la prévisualisation.

Un éditeur permettra de mettre des couleurs au html (et selon l'éditeur plein d'autres trucs utiles). Et même sans changer les retour ou non à la ligne (c'est un soucis avec l'éditeur intégré à FA depuis toujours cette histoire) ça aide carrément.

J'ai commencé par ça à l'époque car ca devenait vite illisible. Même aujourd'hui, pour un petit code j'ai tendance à vite le copier dans mon éditeur car j'ai pas envie de décrypter ici.

Parce que parfois, l'effort de tout formater le texte juste pour avoir un rendu plus rapide vaut pas celui du copier/coller et prévisualisation à répétition.

Oui, les couleurs ça aide vachement pour savoir qu'est-ce qui va avec quoi. À tout hasard, tu sais si Notepad a un équivalent mac?

https://www.sublimetext.com/3
Sublime text. Un peu plus avancé que notepad, je l'ai utilisé quelques temps, il est bien aussi. Je crois que sur Mac c'est bon aussi.