fieldset et autres rollboxes

Bonjour,

Ayant récemment découvert les joies des fieldset et autres rollboxes, ce grâce à CraXoR, je me lance dans un tuto à leur sujet.

Les codes viennent du site de CraXoR Le club à CriXoR, en anglais (pour le moment )

(Je n'ai pas encore testé les rollboxes mais je ferai un tuto dès que possible)

FIELDSET

Gné???? Qué esta???
Un fieldset est en encadré de couleur avec un titre inclus dans la partie supérieure de l'encadré. A l'intérieur de l'encadré, vous mettez... ce que vous voulez.

Vous pouvez en voir deux sur ma fiche


Comment procéder concrètement?

Le code:

Citation :

<center>
<fieldset style="border: 1px solid rgb(255, 255, 255); height: 85px; width: 275px;"><legend align="left" style="font-family: Arial; color: rgb(255, 255, 255); font-size: 15px;">TITRE DE LA BOITE</legend><font style="font-family: Arial; color: rgb(255, 255, 255); font-size: 14px; text-align: center;">TEXTE OU IMAGES DE VOTRE BOITE</font></fieldset>
</center>

Le code décortiqué:

Pour centrer votre boîte

Pour définir la taille de la bordure, la couleur, et la taille de l'encadré. On peut voir ici :
- que l'épaisseur de la bordure = 1pixel (px) et de couleur blanche (rgb (255, 255, 255)
- que la hauteur (height) est de 85 pixels et la largeur (width) de 275 pixels. C'est à vous de faire des tests pour voir ce qui convient le mieux par rapport à ce que vous voulez mettre dans la boîte.


Ceci correspond aux caractéristiques du titre de votre fieldset. Ici on voit un alignement à gauche (left), police century gothic, de couleur blanche. Ici encore c'est à vous de voir ce que vous voulez pour personnaliser votre boîte.

Ceci correspond au texte à l'intérieur de votre boite. Vous pouvez y mettre aussi des images, des liens...

Ca a l'air compliqué de prime abord mais c'est assez simple à mettre en place.

C'est à placer, en mode html, entre les codes d'ouverture et de fermeture de votre fond de fiche.

Citation :

<table style="width: 750px; height: 210px;" background="adresse d'hébergement du fond de fiche">
<tbody>
<tr>
<td>FIELDSET A METTRE ICI
</td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

Pour les codes de couleurs, il en existe des dizaines de milliers et de nombreux sites proposent des générateurs de codes de couleurs. J'utilise celui-ci Il suffit de chipoter avec les trois barrêtes bleu vert et rouge pour trouver la couleur adéquate et le code qui lui correspond.


Rollbox

Rollmops???? Naaaaaaaaaaaan Rollbox!

Comme son nom l'indique la rollbox est une boîte sui roule C'est pratique quand vous avez beaucoup de choses à dire puisque ça permet aux textes de ne pas prendre toute la place qu'ils devraient sur votre fiche.

Comment réaliser cette petite prouesse html??? C'est un peu dans le même genre que le fielset mais avec bien avidemment un code différent, que voici:

Citation :

<DIV style="OVERFLOW: auto; WIDTH: 300px; HEIGHT: 100px">votre blabla<br>blabla<br>blabla<br></DIV>

A rajouter comme le fieldset, en mode html, entre les codes d'ouverture et de fermeture de votre fond de fiche, là où vous voulez que la rollbox apparaissent sur votre fiche. Je vous conseille de mettre quelques lignes de textes en mode html, séparées par le code

Citation :

<br>

(code du passage à la ligne), car s'il n'y a rien dedans vous allez avoir plus de difficultés.

A noter que si la hauteur de votre texte est inférieure à la hauteur de votre boite, la roulette n'apparaitra pas sur votre fiche. A ce moment là optez plutôt pour un fieldset ou une boite simple ou diminuez le nombre de pixels de la boite, ou bah, z'avez qu'à être plus bavard.

Si vous voulez centrer votre rollbox il suffit de mettre, en html, le code

Citation :

<center>

juste avant le début du code de votre rollbox et

Citation :

</center>

juste après.

A savoir également que sur les fiches d'equideo quand on chipote un peu en mode normal avec les couleurs et le texte, il y a parfois des codes qui se rajoutent. Si jamais votre rollbox prend TOUT le texte de votre fiche, alors que ce n'est pas prévu, pas de panique, rajoutez en mode html, le code

Citation :

</div>

derrière le

Citation :

</div>

de fermeture de votre rollbox.

Petite note à propos des couleurs, police et taille de texte

Par ailleurs, comme pour le fieldset, vous pouvez changer la police et la couleur de l'écriture de votre rollbox. Dans ce cas vous rajoutez votre texte entre ses balises-ci, elles mêmes insérées dans les balises de la rollbox, en mettant les caractéristiques désirées (tu suis toujours???)

Citation :

<font style="font-family: Arial; color: rgb(255, 255, 255); font-size: 14px; text-align: center;>VOTRE TEXTE</font>

Pour le choix de police, il vous suffit de remplacer century gothic par la police que vous voulez (lien avec liste des codes de police)

Pour le choix de couleur: le code de couleur se compose de trois chiffres, veillez à les insérer dans le bon ordre, sinon ça donnera une autre couleur

Pour la taille de votre écriture. C'est en pixels. Si vous voulez agrandir ou diminuer la taille de l'écriture jouez avec le nombre de pixels (euh ne mettez pas 300, vous allez faire exploser votre fiche OO)

Pour aligner votre texte. Vous pouvez remplacer le center par left ou right si vous voulez aligner votre texte sur la gauche ou sur la droite.


Prochainement: la boite simple, mettre plusieurs boites l'une à côté de l'autre.

Merci Twi!

Si vous ne comprenez pas quelque chose dites le moi, je ne suis pas sûre d'avoir été très claire. Et si vous mettez un fieldset sur votre fiche, n'hésitez pas à mettre le lien ici, histoire qu'on voit ce que ça donne

ouhlà ! ça c'est du tuto madame !

T'as oublié de mettre le lien vers ta fiche enfin c'pas grave suis allée voir, ça donne bien Tu fais de la pub pour le W aussi ça c trèèèèèèèès trèèèèèèèèèès bien

Pour les images c'est bizarre. Comment procèdes-tu?

Voilà j'ai réjouté pour la rollbox et aussi une petite note sur le code d'écriture

Merci TwiTwi ! ^^

j'trouve que ça rend trooop biiien
j'essaierais ça sur ma fiche...quand j'aurais le tps

merciii Twix

Twiiix, j'ai une questiiion
pour le fieldset, là dans le code donné, il sera donc centré...
mais moi j'le veux pas centré, mais à gauche de ma fiche...j'met

Citation :

<left> gnagnagna </left>

à la place? ou j'mets rien?
de plus si je le mets à gauche...mon "titre" de fieldset sera t il tjs à gauche aussi?

Super ! Pour la peine je refais ma fiche 'vec tout ça ^^

Merkii Twi' !
Je vais essayer + tard

J'pense que si tu mets rien ça ira,c'est si tu veux centrer à droite à mon avis que c'est nécessaire de mettre right. Ca ne changera rien à ton titre de fieldset puisque son code à lui ne se trouve pas au même endroit mais après le truc 'legend gnagnagna. Si tu veux ton titre de fieldset centré, à mon avis il faut changer le left après le legend gnagnagna par center. A tester...

okay ^^ j'essaierai demain j'pense

Twiiix ayé j'ai essayé ça rend super j'suis contente. Par contre j'voudrais mettre en italique mon titre de fielset, comme mes autres titre de ma fiche en fait...sauf que quand j'insère après le font familiy : italic; ben en fait...il me vire carrément le "style" d'écriture que j'applique à mon titre, c'est à dire Papyrus...

euh houlà... Tu es sûre que tu mets le bon code pour la mise en italique? Tu as essayé de mettre le titre en italique tout simplement en mode normal?

Y a que moi qui arrive pas [/b]

C'est bon sa marcher !

Merci )

J'arrive pas à mettre de rolbox Qulequ'un pourrait m'aider ?

ah non j'ai pas essayé en morde normal
*va essayer*

EDIT: ça marche *le truc super c*n *

mdrr bisow'

Qu'est ce qui ne fonctionne pas, Mémé?

Moi mon problème c'est que l fieldset est centrée alors que je ne veux pas la centré!
Il faut changer quoi dans le code?

Ba quand je ve mettr de rolbox à coter éba sa ve pas