>
HautBas
Le Deal du moment :
Cartes Pokémon EV8.5 : coffret dresseur ...
Voir le deal

Helpdesk Code & Graphisme

Nano.

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeFreya (26)
Nano. MondeNano. MondeAlpha Perdu
AvatarAvatarfreya
Kami-sama ~ Voix Off ~ Baasje ♥
Nano.
Messages : 26565
Crédit avatar : Marco Teixeira
OnlineEn ligne
Helpdesk Code & GraphismeVen 24 Avr 2020, 11:27
Réputation du message : 100% (2 votes)

Dis'cuisson de pixels




D'après une suggestion de Silivren, notre reine du code Hewoo, 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  *998
Si vous ne savez pas ou n'êtes pas sûr de vous, floodez juste ne dites rien.

doncookie


Les signalements pour un bug du forum, c'est différent et c'est dans ce sujet dédié.



Les raccourcis vers les codes / tutos




Dernière édition par Nano. le Ven 24 Avr 2020, 12:06, édité 2 fois


blason secret Santa
Silivren

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeCayden Cholena (18)Anoushka (8)Raz'Sha (35)Mikhaïl (30)Viholvärakuuna (777)Rosario (26)Kishareera (15)Nuwarëliya (37)Leif (28)Faélàn (70)
Nano. MondeNano. MondeX-MenChimAPChim AdPX-MenAPAdPZomzomPico.Lockwood
AvatarAvatarCaydenAnouRazMichaViholväSarioKishaElyLeiffaelan
Maître Nanite
Silivren
Messages : 7772
Crédit avatar : kipine.deviantart.com
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 11:28
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é. Awkward


Couleurs:



Helpdesk Code & Graphisme Com_na13
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme Roux10
Siparti

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeDalton (24)Emmett (41)Navi (?)Zenkûga (54)Jem (21)Ryot (28)Oksana (25)Pasha (23)Pavel (35)J'hésite
Nano. MondeNano. MondeX-MenX-MenADPADPZombielandAlpha PerduChimèresChimèresChimèresLockwood
AvatarAvatarDaltonEmmettNaviZenJemRyotOksanaPashapavel
La soudoyée ¤ Assassin privée de Kami-sama
Siparti
Messages : 45452
Crédit avatar : svnddlsnts
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 11:49
Réputation du message : 100% (2 votes)
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>


X-Men
Nano.

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeFreya (26)
Nano. MondeNano. MondeAlpha Perdu
AvatarAvatarfreya
Kami-sama ~ Voix Off ~ Baasje ♥
Nano.
Messages : 26565
Crédit avatar : Marco Teixeira
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 12:01
Réputation du message : 100% (3 votes)
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)
Bidule - Chouette

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 holidaychelli


blason secret Santa
Silivren

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeCayden Cholena (18)Anoushka (8)Raz'Sha (35)Mikhaïl (30)Viholvärakuuna (777)Rosario (26)Kishareera (15)Nuwarëliya (37)Leif (28)Faélàn (70)
Nano. MondeNano. MondeX-MenChimAPChim AdPX-MenAPAdPZomzomPico.Lockwood
AvatarAvatarCaydenAnouRazMichaViholväSarioKishaElyLeiffaelan
Maître Nanite
Silivren
Messages : 7772
Crédit avatar : kipine.deviantart.com
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 12:15
Réputation du message : 100% (1 vote)
J'ai testé avec Cayden et Anoushka et j'ai réussis sans rien casser ! fly

MERCI !! pluiecookies


Couleurs:



Helpdesk Code & Graphisme Com_na13
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme Roux10
Nano.

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeFreya (26)
Nano. MondeNano. MondeAlpha Perdu
AvatarAvatarfreya
Kami-sama ~ Voix Off ~ Baasje ♥
Nano.
Messages : 26565
Crédit avatar : Marco Teixeira
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 12:20
*012 yeah !!!


blason secret Santa
Silivren

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeCayden Cholena (18)Anoushka (8)Raz'Sha (35)Mikhaïl (30)Viholvärakuuna (777)Rosario (26)Kishareera (15)Nuwarëliya (37)Leif (28)Faélàn (70)
Nano. MondeNano. MondeX-MenChimAPChim AdPX-MenAPAdPZomzomPico.Lockwood
AvatarAvatarCaydenAnouRazMichaViholväSarioKishaElyLeiffaelan
Maître Nanite
Silivren
Messages : 7772
Crédit avatar : kipine.deviantart.com
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 12:49
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 ? scream panic stare 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">

Down


Couleurs:



Helpdesk Code & Graphisme Com_na13
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme Roux10
Siparti

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeDalton (24)Emmett (41)Navi (?)Zenkûga (54)Jem (21)Ryot (28)Oksana (25)Pasha (23)Pavel (35)J'hésite
Nano. MondeNano. MondeX-MenX-MenADPADPZombielandAlpha PerduChimèresChimèresChimèresLockwood
AvatarAvatarDaltonEmmettNaviZenJemRyotOksanaPashapavel
La soudoyée ¤ Assassin privée de Kami-sama
Siparti
Messages : 45452
Crédit avatar : svnddlsnts
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 12:52
Réputation du message : 100% (1 vote)
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.


X-Men
Silivren

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeCayden Cholena (18)Anoushka (8)Raz'Sha (35)Mikhaïl (30)Viholvärakuuna (777)Rosario (26)Kishareera (15)Nuwarëliya (37)Leif (28)Faélàn (70)
Nano. MondeNano. MondeX-MenChimAPChim AdPX-MenAPAdPZomzomPico.Lockwood
AvatarAvatarCaydenAnouRazMichaViholväSarioKishaElyLeiffaelan
Maître Nanite
Silivren
Messages : 7772
Crédit avatar : kipine.deviantart.com
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 13:00
J'en avais en effet oublié plein Panic. 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 ?


Couleurs:



Helpdesk Code & Graphisme Com_na13
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme Roux10
Siparti

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeDalton (24)Emmett (41)Navi (?)Zenkûga (54)Jem (21)Ryot (28)Oksana (25)Pasha (23)Pavel (35)J'hésite
Nano. MondeNano. MondeX-MenX-MenADPADPZombielandAlpha PerduChimèresChimèresChimèresLockwood
AvatarAvatarDaltonEmmettNaviZenJemRyotOksanaPashapavel
La soudoyée ¤ Assassin privée de Kami-sama
Siparti
Messages : 45452
Crédit avatar : svnddlsnts
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 15:07
Evidemment. Il faut ajouter l'id dans toutes les fiches, donc je vais m'en occuper !

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


X-Men
Silivren

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeCayden Cholena (18)Anoushka (8)Raz'Sha (35)Mikhaïl (30)Viholvärakuuna (777)Rosario (26)Kishareera (15)Nuwarëliya (37)Leif (28)Faélàn (70)
Nano. MondeNano. MondeX-MenChimAPChim AdPX-MenAPAdPZomzomPico.Lockwood
AvatarAvatarCaydenAnouRazMichaViholväSarioKishaElyLeiffaelan
Maître Nanite
Silivren
Messages : 7772
Crédit avatar : kipine.deviantart.com
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 15:13
C'est tout bon, du coup, merci beaucoup !

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


Couleurs:



Helpdesk Code & Graphisme Com_na13
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme Roux10
Nano.

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeFreya (26)
Nano. MondeNano. MondeAlpha Perdu
AvatarAvatarfreya
Kami-sama ~ Voix Off ~ Baasje ♥
Nano.
Messages : 26565
Crédit avatar : Marco Teixeira
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 17:58
D'ailleurs attention Sip, pour les images c'est /> la fermeture, même si ça marche sans le slash, c'est pas bien.


blason secret Santa
Siparti

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeDalton (24)Emmett (41)Navi (?)Zenkûga (54)Jem (21)Ryot (28)Oksana (25)Pasha (23)Pavel (35)J'hésite
Nano. MondeNano. MondeX-MenX-MenADPADPZombielandAlpha PerduChimèresChimèresChimèresLockwood
AvatarAvatarDaltonEmmettNaviZenJemRyotOksanaPashapavel
La soudoyée ¤ Assassin privée de Kami-sama
Siparti
Messages : 45452
Crédit avatar : svnddlsnts
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 18:04
Oui en effet. J'ai l'habitude des guillemets qui se ferment tout seul sur jsfiddle Joy


X-Men
Nano.

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeFreya (26)
Nano. MondeNano. MondeAlpha Perdu
AvatarAvatarfreya
Kami-sama ~ Voix Off ~ Baasje ♥
Nano.
Messages : 26565
Crédit avatar : Marco Teixeira
OnlineEn ligne
Re: Helpdesk Code & GraphismeVen 24 Avr 2020, 18:05
Réputation du message : 100% (1 vote)
Et moi donc, les balises en font autant sur vscode (et tellement plus)


blason secret Santa
Pazou

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeViktor (17 ans)Luka (47 ans)Pachou (92 ans)Cohbar (352 ans)Swann (18 ans)
Nano. MondeNano. MondeChimèresChimèresAdPAdPXLockwood
AvatarAvatarViktorLukaPachouCohbarSwann
Super Nanite
Pazou
Messages : 1896
Crédit avatar : arandadill
OnlineEn ligne
Re: Helpdesk Code & GraphismeMar 28 Avr 2020, 17:02
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

Titre.
blablablabla


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 !! Cookie plein



Viktor : #daac4c
Luka : #850606
Pachou : #2d936d
Cohbar : #395e42
Swann : #60ccdd

Helpdesk Code & Graphisme Ol53

Helpdesk Code & Graphisme J4v0
Siparti

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeDalton (24)Emmett (41)Navi (?)Zenkûga (54)Jem (21)Ryot (28)Oksana (25)Pasha (23)Pavel (35)J'hésite
Nano. MondeNano. MondeX-MenX-MenADPADPZombielandAlpha PerduChimèresChimèresChimèresLockwood
AvatarAvatarDaltonEmmettNaviZenJemRyotOksanaPashapavel
La soudoyée ¤ Assassin privée de Kami-sama
Siparti
Messages : 45452
Crédit avatar : svnddlsnts
OnlineEn ligne
Re: Helpdesk Code & GraphismeMar 28 Avr 2020, 17:38
Réputation du message : 100% (1 vote)
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.

Titre.blablablabla


Titre.


Blablablabla


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>


X-Men
Pazou

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeViktor (17 ans)Luka (47 ans)Pachou (92 ans)Cohbar (352 ans)Swann (18 ans)
Nano. MondeNano. MondeChimèresChimèresAdPAdPXLockwood
AvatarAvatarViktorLukaPachouCohbarSwann
Super Nanite
Pazou
Messages : 1896
Crédit avatar : arandadill
OnlineEn ligne
Re: Helpdesk Code & GraphismeMar 28 Avr 2020, 20:20
Ah j'ai bien fait de demander, j'aurais pas trouvé toute seule xD Quoique le span si... ^^

Merci Sipipette Coeur Cookie plein



Viktor : #daac4c
Luka : #850606
Pachou : #2d936d
Cohbar : #395e42
Swann : #60ccdd

Helpdesk Code & Graphisme Ol53

Helpdesk Code & Graphisme J4v0
Mey

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeYeva, 26Larae, 423Katja, 26Raïssa, 16Moira, 72Robin, 40Eibhlín, 39
Nano. MondeNano. MondeChimèresAdPX-MenChimèresAdPX-MenLockwood
AvatarAvatar‘Yeva'‘Larae'‘Katja'‘Raïssa'‘Moira'RobinSetesh
Super Nanite
Mey
Messages : 3359
Crédit avatar : anndr sur Deviantart
OnlineEn ligne
Re: Helpdesk Code & GraphismeMer 29 Avr 2020, 18:16
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. :)


Helpdesk Code & Graphisme Fan_ch10
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme J4v0
Siparti

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeDalton (24)Emmett (41)Navi (?)Zenkûga (54)Jem (21)Ryot (28)Oksana (25)Pasha (23)Pavel (35)J'hésite
Nano. MondeNano. MondeX-MenX-MenADPADPZombielandAlpha PerduChimèresChimèresChimèresLockwood
AvatarAvatarDaltonEmmettNaviZenJemRyotOksanaPashapavel
La soudoyée ¤ Assassin privée de Kami-sama
Siparti
Messages : 45452
Crédit avatar : svnddlsnts
OnlineEn ligne
Re: Helpdesk Code & GraphismeMer 29 Avr 2020, 19:43
Réputation du message : 100% (1 vote)
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;
}


X-Men
Mey

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeYeva, 26Larae, 423Katja, 26Raïssa, 16Moira, 72Robin, 40Eibhlín, 39
Nano. MondeNano. MondeChimèresAdPX-MenChimèresAdPX-MenLockwood
AvatarAvatar‘Yeva'‘Larae'‘Katja'‘Raïssa'‘Moira'RobinSetesh
Super Nanite
Mey
Messages : 3359
Crédit avatar : anndr sur Deviantart
OnlineEn ligne
Re: Helpdesk Code & GraphismeMer 29 Avr 2020, 21:02
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? Panic Je suis pas une experte en code du tout.


Helpdesk Code & Graphisme Fan_ch10
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme J4v0
Siparti

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeDalton (24)Emmett (41)Navi (?)Zenkûga (54)Jem (21)Ryot (28)Oksana (25)Pasha (23)Pavel (35)J'hésite
Nano. MondeNano. MondeX-MenX-MenADPADPZombielandAlpha PerduChimèresChimèresChimèresLockwood
AvatarAvatarDaltonEmmettNaviZenJemRyotOksanaPashapavel
La soudoyée ¤ Assassin privée de Kami-sama
Siparti
Messages : 45452
Crédit avatar : svnddlsnts
OnlineEn ligne
Re: Helpdesk Code & GraphismeMer 29 Avr 2020, 21:15
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.


X-Men
Mey

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeYeva, 26Larae, 423Katja, 26Raïssa, 16Moira, 72Robin, 40Eibhlín, 39
Nano. MondeNano. MondeChimèresAdPX-MenChimèresAdPX-MenLockwood
AvatarAvatar‘Yeva'‘Larae'‘Katja'‘Raïssa'‘Moira'RobinSetesh
Super Nanite
Mey
Messages : 3359
Crédit avatar : anndr sur Deviantart
OnlineEn ligne
Re: Helpdesk Code & GraphismeMer 29 Avr 2020, 21:19
Okidok, je vais essayer de faire comme ça un de ces jours, merci :)


Helpdesk Code & Graphisme Fan_ch10
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme J4v0
Nano.

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeFreya (26)
Nano. MondeNano. MondeAlpha Perdu
AvatarAvatarfreya
Kami-sama ~ Voix Off ~ Baasje ♥
Nano.
Messages : 26565
Crédit avatar : Marco Teixeira
OnlineEn ligne
Re: Helpdesk Code & GraphismeMer 29 Avr 2020, 21:27
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.


blason secret Santa
Mey

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeYeva, 26Larae, 423Katja, 26Raïssa, 16Moira, 72Robin, 40Eibhlín, 39
Nano. MondeNano. MondeChimèresAdPX-MenChimèresAdPX-MenLockwood
AvatarAvatar‘Yeva'‘Larae'‘Katja'‘Raïssa'‘Moira'RobinSetesh
Super Nanite
Mey
Messages : 3359
Crédit avatar : anndr sur Deviantart
OnlineEn ligne
Re: Helpdesk Code & GraphismeMer 29 Avr 2020, 21:55
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?


Helpdesk Code & Graphisme Fan_ch10
Helpdesk Code & Graphisme Blason-Touristonanite2
Helpdesk Code & Graphisme J4v0
Nano.

Tes Personnages
Ses Personnages :
Ses Personnages Perso 1Perso 1Perso 2Perso 2Perso 3Perso 3Perso 4Perso 4Perso 5Perso 5Perso 6Perso 6Perso 7Perso 7Perso 8Perso 8Perso 9Perso 9Pico. PersoPico. Perso
Prénom & âgePrénom & âgeFreya (26)
Nano. MondeNano. MondeAlpha Perdu
AvatarAvatarfreya
Kami-sama ~ Voix Off ~ Baasje ♥
Nano.
Messages : 26565
Crédit avatar : Marco Teixeira
OnlineEn ligne
Re: Helpdesk Code & GraphismeMer 29 Avr 2020, 23:46
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.


blason secret Santa
Contenu sponsorisé
OnlineEn ligne