Dons de BB codes
Coucou,
Voici un tout début de code que j'avais commencé, je doute qu'il puisse servir à quelqu'un mais mieux vaut ne pas le perdre ! En principe vous pouvez l'utiliser pour à peu près ce que vous voulez, et... voilà
Je pense qu'il serait facilement combinable au code fait par Mina juste là
Encore une fois, un petit clin d'œil ne fait pas de mal
Voici un tout début de code que j'avais commencé, je doute qu'il puisse servir à quelqu'un mais mieux vaut ne pas le perdre ! En principe vous pouvez l'utiliser pour à peu près ce que vous voulez, et... voilà
Je pense qu'il serait facilement combinable au code fait par Mina juste là
Bloupxxxxxxx
Bloupxxxxxxxxxxxx
Reducio
Code : Tout sélectionner
[quote][table]
[tr]
[td][quote][table]
[tr]
[td][size=90][color=black]Summary[/color][/size][color=transparent]xxxxxxx[/color][/td]
[td][right][icon]times-r[/icon][/right][/td]
[/tr]
[/table][/quote][/td]
[td][quote][table]
[tr]
[td][size=90]Malo[/size][color=transparent]xxxxxxxxxxxx[/color][/td]
[td][right][icon]times-r[/icon][/right][/td]
[/tr]
[/table][/quote][/td]
[td][color=transparent][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][/color][/td]
[td][quote][icon]minus-r[/icon][/quote][/td]
[td][quote][icon]square-r[/icon][/quote][/td]
[td][quote][icon]times-r[/icon][/quote][/td]
[/tr]
[/table][table]
[tr]
[td][quote][color=#00000050]Search[/color][color=transparent][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][icon]circle-s[/icon][/color][/quote][/td]
[td][quote][icon]search-r[/icon][/quote][/td]
[/tr]
[/table]
[/quote]
Encore une fois, un petit clin d'œil ne fait pas de mal
Nouveau compte : Eliott Faulkner
Dons de BB codes
Hello ! Voici un code que j'ai fait pour les badges, en espérant que ça aidera
N'hésitez pas à l'adapter en fonction de votre perso !
Et comme dises mes VDD, un clin d’œil me ferai plaisir mais pas obligé
N'hésitez pas à l'adapter en fonction de votre perso !
Reducio
Reducio
Code : Tout sélectionner
[quote][center][img=300x300]/images/upload/q5uwgzm5xlek.webp[/img][/center]
[center][quote][img]/images/upload/bva4fo2kqy56.webp[/img][/quote][/center][/quote]
[center][img=300x300]/images/upload/2yvdbopeayno.webp[/img][/center]
[quote][center][img=300x300]/images/upload/lgcaim4zyj3u.webp[/img][/center]
[quote][center][img]/images/upload/bva4fo2kqy56.webp[/img][/center][/quote][/quote]
[center][img=400x400]/images/upload/umdofd0hw0uk.webp[/img][/center]
[quote][center][img=300x300]/images/upload/neqmhisbqe42.webp[/img][/center]
[quote][center][img]/images/upload/bva4fo2kqy56.webp[/img][/center][/quote][/quote]
[center][img=300x300]/images/upload/2yvdbopeayno.webp[/img][/center]
[quote][center][img=300x300]/images/upload/q3ksjyeyefjy.webp[/img][/center]
[quote][center][img]/images/upload/bva4fo2kqy56.webp[/img][/center][/quote][/quote]
[center][img=400x400]/images/upload/umdofd0hw0uk.webp[/img][/center]
[quote][center][img=300x300]/images/upload/mr6x1oxsdmc1.webp[/img][/center]
[quote][center][img]/images/upload/bva4fo2kqy56.webp[/img][/center][/quote][/quote]
[center][img=300x300]/images/upload/2yvdbopeayno.webp[/img][/center]
[quote][center][img=300x300]/images/upload/bu2jis3kw22r.webp[/img][/center]
[quote][center][img]/images/upload/bva4fo2kqy56.webp[/img][/center][/quote][/quote]
[center][img=400x400]/images/upload/umdofd0hw0uk.webp[/img][/center]
[quote][center][img=300x300]/images/upload/s2saiepl4jzu.webp[/img][/center]
[quote][center][img]/images/upload/bva4fo2kqy56.webp[/img][/center][/quote][/quote]
[center][img=300x300]/images/upload/2yvdbopeayno.webp[/img][/center]
[quote][center][img=300x300]/images/upload/gsk2v9pw0k5t.webp[/img][/center]
[quote][center][img]/images/upload/bva4fo2kqy56.webp[/img][/center][/quote][/quote]Et comme dises mes VDD, un clin d’œil me ferai plaisir mais pas obligé
Dons de BB codes
Bonjour !
Après plusieurs hiboux de la part de divers élèves, je décide de mettre ce code ici !
J'espère qu'il vous aidera De mon côté, je l'ai utilisé pour le référencement de mes PNJs, mais vous pouvez le bidouiller pour qu'il serve dans la partie "famille" de votre fiche, si vous le souhaitez !
Après plusieurs hiboux de la part de divers élèves, je décide de mettre ce code ici !
J'espère qu'il vous aidera
De mon côté, je l'ai utilisé pour le référencement de mes PNJs, mais vous pouvez le bidouiller pour qu'il serve dans la partie "famille" de votre fiche, si vous le souhaitez !VISUEL
Mises à jourReducio◈ JJ/MM/AAAA - Description de la mise à jour.
◈ JJ/MM/AAAA - Description de la mise à jour.
◈ JJ/MM/AAAA - Description de la mise à jour.
 |
|
◈─────◈─────◈
|
|
Codé par Elena McFly
CODE
Code : Tout sélectionner
[quote][center][b][color=#003375]Mises à jour[/color][/b][reducio][size=80]◈ [b]JJ/MM/AAAA[/b] - Description de la mise à jour.
◈ [b]JJ/MM/AAAA[/b] - Description de la mise à jour.
◈ [b]JJ/MM/AAAA[/b] - Description de la mise à jour.
[/size][/reducio][/center][/quote]
[ref]Nom du membre[/ref][table]
[tr]
[td][center][img=250x250]/images/upload/7ptdac8rxow2.webp[/img][/center][/td]
[td][quote][b][font=cursive]Prénom Nom[/font]
[color=#000000][icon]fill-drip-s[/icon]#000000[/color]
[size=85][color=#000000]◈[/color] Statut de sang
[color=#000000]◈[/color] lien [/size][/b][size=75](justification)[/size][b]
[size=85][color=#000000]◈ [/color] Nationalité
[color=#000000]◈ [/color]Né.e à ? le JJ mois AAAA[/size][/b]
[size=85][b]Liste des RPs où ce PNJ est utilisé en mode actif :[/b][/size]
[reducio][size=90][url=null]◈[url] [b]JJ/MM/AAAA[/b] - Nom du RP
[url=null]◈[url] [b]JJ/MM/AAAA[/b] - Nom du RP[/size][/reducio][/quote][/td]
[/tr]
[/table]
[ref]Nom du membre[/ref][center]◈─────[size=125]◈[/size]─────◈[/center]
[table]
[tr]
[td][center][img=250x250]/images/upload/7ptdac8rxow2.webp[/img][/center][/td]
[td][quote][b][font=cursive]Prénom Nom[/font]
[color=#000000][icon]fill-drip-s[/icon]#000000[/color]
[size=85][color=#000000]◈[/color] Statut de sang
[color=#000000]◈[/color] lien [/size][/b][size=75](justification)[/size][b]
[size=85][color=#5073de]◈ [/color] Nationalité
[color=#000000]◈ [/color]Né.e à ? le JJ mois AAAA[/size][/b]
[size=90][b]Liste des RPs où ce PNJ est utilisé en mode actif :[/b]
[/size]
[reducio][size=90][url=null]◈[url] [b]JJ/MM/AAAA[/b] - Nom du RP
[url=null]◈[url] [b]JJ/MM/AAAA[/b] - Nom du RP[/size][/reducio][/quote][/td]
[/tr]
[/table]
[right][size=75][b]Codé par [color=#84774d][url=https://poudlard.fr/memberlist.php?mode=viewprofile&u=112644][color=#89700a]Elena McFly[/color][/url][/color][/b][/right]
Dons de BB codes
Bonjour,
Avec la récente mise à jour concernant les tableaux, certaines mises en page dans les fiches ont pu être bousculées, et maintenant que le contrôle les largeurs est devenu un peu plus précis et facilité par l’affichage effectif des largeurs sur PC, je me dis que proposer quelques codes pourrait aider à ajuster ou intégrer des tableaux s’affichant sans nécessiter la barre de défilement horizontale.
Dans les exemples, j’utilise la balise de dimension pour toujours travailler la même image, mais vous pouvez tout à fait relever le nombre de pixels nécessaire pour dimensionner en amont les images à intégrer dans les tableaux avec une utilisation simple de la balise image (sans valeur à intégrer). A priori, cette nouvelle balise de dimension ne fait plus dépasser sur mobile donc ça ne nuit pas à l’accessibilité (ces tableaux à colonnes s’afficheront en lignes sur écran étroit)
Dans un tableau à trois colonnes, il faut répartir environ 670 pixels quand aucun quote/reducio est utilisé, ce qui donne par exemple une image à 223 pixels de large dans chaque colonne :
Pour mettre chaque colonne sous quote, on peut mettre la ligne des images de contrôle à part, en dessous ou dessus, afin de garder ces 670 pixels hors quote
Quand on met le tableau entier dans un quote/reducio, alors il faut plutôt répartir environ 645 pixels, ce qui donne par exemple une image à 215 pixels de large dans chaque colonne :
Enfin, avec un quote à chaque colonne, chacune peut contenir une image d’environ 198 pixels de large, soit 594 pixels au total:
Dans un tableau à deux colonnes, il faut également environ 670 pixels quand aucun quote/reducio est utilisé, ce qui peut donner une image à 336 pixels de large dans chaque colonne :
Afin de mettre chaque colonne de texte sous quote, on peut mettre la ligne des images à part :
Quand on met le tableau entier dans un quote/reducio, alors il faut plutôt répartir environ 648 pixels, ce peut donner une image à 324 pixels de large dans chaque colonne :
Enfin, avec un quote à chaque colonne, chacune peut contenir une image allant jusque 311 pixels de large environ soit 622 pixels au total
En respectant les largeurs maximales précédentes (~670 sans quote, ~648 pour un tableau dans quote, ~622 avec un quote par colonne), on peut aussi décider d’avoir une colonne large et une colonne étroite. Les exemples proposent une colonne de droite deux plus fine que celle de gauche mais on peut inverser les valeurs (colonne de gauche plus fine) ou changer les ratios (en prenant en compte la somme maximale conseillée sur la largeur)
Il est possible de faire un tableau à deux colonnes contenant en réalité une troisième colonne centrale d’espacement pour aérer si on trouve les deux colonnes de base trop collées. Pour cela il faut prendre en compte les largeurs maximales des tableaux à trois colonnes, soit ~670 sans quote, ~645 pour un tableau dans un quote, ~620 pixels si chaque colonne est en quote (plutôt que 594 si on ne met pas de quote pour la colonne d’aération). Dans les exemples la colonne pour aérer est de 30 pixels mais c’est possible de changer la répartition en respectant la largeur totale
On peut appliquer la même logique de troisième colonne centrale pour aérer même avec des colonnes inégales (une colonne deux fois plus étroite que l’autre)
Enfin, il est possible de placer des images centrées dans une colonne sans coller aux bords de la façon suivante : en restant dans les balises "center", placer l’image souhaitée sous ou sur l’image servant à dimensionner la colonne, et choisir des dimensions inférieures (si supérieures alors l’image la plus grande deviendra celle contrôlant la largeur de la colonne)
Exemple d’un tableau à deux colonnes égales et espacées avec image centrée d'un côté et texte de l’autre, puis alternance à la ligne suivante (en l’occurence image en 220x220 sous l’image de dimensionnement de la colonne en 320x320 soit ~50 pixels de respiration de chaque côté, ça pourrait être n’importe quelle valeur en dessous de 320 de largeur).
Cet exemple permet aussi de voir que dans un même tableau, il suffit de mettre les images de contrôle de largeur dans une seule ligne pour affecter les autres, il n’est pas nécessaire de mettre partout
Vous pouvez reprendre le code de n’importe quel tableau si cela correspond à une configuration recherchée (j’ai remplacé dans la partie code la bande colorée par une image transparente pour un contrôle discret des largeurs) ; ou vous appuyer sur les limites max de pixels sur la largeur selon l’utilisation ou non des quote pour dimensionner (soit par la balise, soit en ajustant la largeur des images avant hébergement) les différentes colonnes à votre goût.
J’espère que cela vous sera utile et fonctionnera. Il est possible que selon le contenu du post il faille ajuster de quelques pixels, d’où un ordre de grandeur donné (environ...). Ces dimensions sont pensées pour les messages, la section "informations complèmentaires" du profil étant plus étroite, les valeurs sont différentes (plutôt ~460 pixels max au lieu de ~675 sur la largeur)
Largeurs limites (±)
Si la somme des largeurs des colonnes dépasse ces valeurs, les tableaux sont susceptibles de s’afficher avec la barre de défilement
Avec la récente mise à jour concernant les tableaux, certaines mises en page dans les fiches ont pu être bousculées, et maintenant que le contrôle les largeurs est devenu un peu plus précis et facilité par l’affichage effectif des largeurs sur PC, je me dis que proposer quelques codes pourrait aider à ajuster ou intégrer des tableaux s’affichant sans nécessiter la barre de défilement horizontale.
Pour rendre visuelle la technique, j’utilise dans les exemples un image colorée de 500x10 pixels, mais en situation réelle je conseille de remplacer par une image invisible, pour agir discrètement (l’image colorée est d’ailleurs remplacée par une image invisible dans les codes proposés)code pro-accessibilité
(grâce au nouvel affichage des tableaux, il n’y a plus de risque de dépassement sur mobile, ce code est conçu pour équilibrer les colonnes sur PC avant d’en arriver à la barre de défilement)
pas besoin de créditer
Dans les exemples, j’utilise la balise de dimension pour toujours travailler la même image, mais vous pouvez tout à fait relever le nombre de pixels nécessaire pour dimensionner en amont les images à intégrer dans les tableaux avec une utilisation simple de la balise image (sans valeur à intégrer). A priori, cette nouvelle balise de dimension ne fait plus dépasser sur mobile donc ça ne nuit pas à l’accessibilité (ces tableaux à colonnes s’afficheront en lignes sur écran étroit)
Trois colonnes égales
(sommaire)
(sommaire)
Dans un tableau à trois colonnes, il faut répartir environ 670 pixels quand aucun quote/reducio est utilisé, ce qui donne par exemple une image à 223 pixels de large dans chaque colonne :
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Pour mettre chaque colonne sous quote, on peut mettre la ligne des images de contrôle à part, en dessous ou dessus, afin de garder ces 670 pixels hors quote
|
|
|
| | |
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td][/tr]
[tr][td][center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][td][center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][td][center][img=223x223]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Quand on met le tableau entier dans un quote/reducio, alors il faut plutôt répartir environ 645 pixels, ce qui donne par exemple une image à 215 pixels de large dans chaque colonne :
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=215x215]/images/upload/g77huo7b5ohh.webp[/img][/center]
[/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=215x215]/images/upload/g77huo7b5ohh.webp[/img][/center]
[/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=215x215]/images/upload/g77huo7b5ohh.webp[/img][/center]
[/td][/tr][/table][/quote]Enfin, avec un quote à chaque colonne, chacune peut contenir une image d’environ 198 pixels de large, soit 594 pixels au total:
|
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=198x198]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=198x198]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=198x198]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Deux colonnes égales
(sommaire)
(sommaire)
Dans un tableau à deux colonnes, il faut également environ 670 pixels quand aucun quote/reducio est utilisé, ce qui peut donner une image à 336 pixels de large dans chaque colonne :
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=336x336]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=336x336]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Afin de mettre chaque colonne de texte sous quote, on peut mettre la ligne des images à part :
|
|
| |
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[/quote][/td][/tr]
[tr][td][center][img=336x336]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][td][center][img=336x336]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Quand on met le tableau entier dans un quote/reducio, alors il faut plutôt répartir environ 648 pixels, ce peut donner une image à 324 pixels de large dans chaque colonne :
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=324x324]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=324x324]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr]
[/table][/quote]Enfin, avec un quote à chaque colonne, chacune peut contenir une image allant jusque 311 pixels de large environ soit 622 pixels au total
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=311x311]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=311x311]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Deux colonnes inégales (2/3 – 1/3)
(sommaire)
(sommaire)
En respectant les largeurs maximales précédentes (~670 sans quote, ~648 pour un tableau dans quote, ~622 avec un quote par colonne), on peut aussi décider d’avoir une colonne large et une colonne étroite. Les exemples proposent une colonne de droite deux plus fine que celle de gauche mais on peut inverser les valeurs (colonne de gauche plus fine) ou changer les ratios (en prenant en compte la somme maximale conseillée sur la largeur)
Répartition possible des 670 pixels : 445 - 225
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=445x445]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=225x225]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Répartition possible des 648 pixels : 432 - 216
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=432x432]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=216x216]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table][/quote]Répartition possible des 622 pixels : 414 - 207
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=414x414]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=207x207]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Deux colonnes égales (colonne d’espacement)
(sommaire)
(sommaire)
Il est possible de faire un tableau à deux colonnes contenant en réalité une troisième colonne centrale d’espacement pour aérer si on trouve les deux colonnes de base trop collées. Pour cela il faut prendre en compte les largeurs maximales des tableaux à trois colonnes, soit ~670 sans quote, ~645 pour un tableau dans un quote, ~620 pixels si chaque colonne est en quote (plutôt que 594 si on ne met pas de quote pour la colonne d’aération). Dans les exemples la colonne pour aérer est de 30 pixels mais c’est possible de changer la répartition en respectant la largeur totale
Répartition possible des 670 pixels : 320 - 30 - 320
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=320x320]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=320x320]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Répartition possible des 645 pixels : 308 - 30 - 308
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=308x308]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=308x308]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table][/quote]Répartition possible des 620 pixels : 295 - 30 - 295
|
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=295x295]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=295x295]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Deux colonnes inégales 2/3 – 1/3 (colonne d’espacement)
(sommaire)
(sommaire)
On peut appliquer la même logique de troisième colonne centrale pour aérer même avec des colonnes inégales (une colonne deux fois plus étroite que l’autre)
Répartition possible des 670 pixels : 426 - 30 - 213
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
Reducio
Code : Tout sélectionner
[table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=426x426]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=213x213]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table]Répartition possible des 645 pixels : 410 - 30 - 205
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Reducio
Code : Tout sélectionner
[quote][table][tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=410x410]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=205x205]/images/upload/g77huo7b5ohh.webp[/img][/center][/td][/tr][/table][/quote]Répartition possible des 620 pixels : 392 - 30 - 196
|
|
|
Reducio
Code : Tout sélectionner
[table][tr][td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=392x392]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td]
[td][center][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/center][/td]
[td][quote]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.[center][img=196x196]/images/upload/g77huo7b5ohh.webp[/img][/center][/quote][/td][/tr][/table]Astuce
(sommaire)
Enfin, il est possible de placer des images centrées dans une colonne sans coller aux bords de la façon suivante : en restant dans les balises "center", placer l’image souhaitée sous ou sur l’image servant à dimensionner la colonne, et choisir des dimensions inférieures (si supérieures alors l’image la plus grande deviendra celle contrôlant la largeur de la colonne)
Exemple d’un tableau à deux colonnes égales et espacées avec image centrée d'un côté et texte de l’autre, puis alternance à la ligne suivante (en l’occurence image en 220x220 sous l’image de dimensionnement de la colonne en 320x320 soit ~50 pixels de respiration de chaque côté, ça pourrait être n’importe quelle valeur en dessous de 320 de largeur).
Cet exemple permet aussi de voir que dans un même tableau, il suffit de mettre les images de contrôle de largeur dans une seule ligne pour affecter les autres, il n’est pas nécessaire de mettre partout
 |
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. | |
Reducio
Code : Tout sélectionner
[table][tr][td][center][img=320x320]/images/upload/g77huo7b5ohh.webp[/img]
[img=220x220]/images/upload/e6t4uos9e1zc.webp[/img][/center][/td]
[td][img=30x30]/images/upload/g77huo7b5ohh.webp[/img][/td]
[td][center][img=320x320]/images/upload/g77huo7b5ohh.webp[/img][/center]
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. [/td][/tr]
[tr][td]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. [/td]
[td][/td]
[td][center][img=220x220]/images/upload/e6t4uos9e1zc.webp[/img][/center][/td][/tr][/table]Vous pouvez reprendre le code de n’importe quel tableau si cela correspond à une configuration recherchée (j’ai remplacé dans la partie code la bande colorée par une image transparente pour un contrôle discret des largeurs) ; ou vous appuyer sur les limites max de pixels sur la largeur selon l’utilisation ou non des quote pour dimensionner (soit par la balise, soit en ajustant la largeur des images avant hébergement) les différentes colonnes à votre goût.
J’espère que cela vous sera utile et fonctionnera. Il est possible que selon le contenu du post il faille ajuster de quelques pixels, d’où un ordre de grandeur donné (environ...). Ces dimensions sont pensées pour les messages, la section "informations complèmentaires" du profil étant plus étroite, les valeurs sont différentes (plutôt ~460 pixels max au lieu de ~675 sur la largeur)
Largeurs limites (±)
(sommaire)
Si la somme des largeurs des colonnes dépasse ces valeurs, les tableaux sont susceptibles de s’afficher avec la barre de défilement
~670 pixels de large pour deux à trois colonnes sans aucun quote ou reducio
~648 pixels de large pour deux colonnes contenues dans un quote ; plutôt ~645 pixels si trois colonnes
~622 pixels de large pour deux colonnes ayant chacune un quote ; plutôt ~594 pixels si trois colonnes ; et ~620 pixels si deux colonnes en quote et la troisième sans quote
~648 pixels de large pour deux colonnes contenues dans un quote ; plutôt ~645 pixels si trois colonnes
~622 pixels de large pour deux colonnes ayant chacune un quote ; plutôt ~594 pixels si trois colonnes ; et ~620 pixels si deux colonnes en quote et la troisième sans quote