FAIRE DES BOÎTES
~ Ou Comment Faire la Même Chose qu'ici ~

Hello The World ! Bon, j'imagine vos têtes : qu'est-ce que c'est que cette histoire de Boîte encore ? Il a fumé la moquette Ton ton Waya ? Et bien, non...Cependant, j'ignore le terme exacte pour nommer l'effet utilisé ici. Cet effet, et bien, c'est cet espèce d'encadrement "bizarre" qui entoure actuellement mon texte. Bon, j'avoue que si cela vous paraît vraiment trop zarby, je le changerai et le rendrais un poil plus mignon ^^ Dans tout les cas, cette boî-boîte s'obtient grâce à du HTML...avec un brin de CSS ? Mouis, mais très peu. En fait, c'est un CSS que l'on va directement insérer dans un code HTMl via une balise au pouvoir divin : [div style=""] ! Si si, cette balise, elle peut devenir Dieu le Père si on a les idées allant de pair. Et puis, vous verrez, dés lors où on veut mettre du CSS directement dans le code HTML sans passer par la case "Feuille de CSS du forum"...le caractère style="" revient ^^ Enfin, j'avoue qu'il ne me reste plus grand chose à vous dire...Car rien qu'en dévoilant ceci, je vous ai grandement éclairé sur la nature de mes boîtes. Car voilà, ce que je nomme Boîte n'est, ni plus ni moins, que du texte encadré par cette balise. Voici, d'ailleurs, un exemple de code, et son rendu : Code: <center><div style="background-image: url(http://i22.servimg.com/u/f22/11/82/19/32/essai210.jpg); border-color: #275ba6;text-align: justify; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px;-moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;border-style: dashed; border-width: 1px; width: 400px;">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </div></center> Ce qui va vous donner : bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Et si on analysait un peu le code ensemble ? ^^ Tout déjà, Background-image: url(); Bon, pas besoin de vous faire un dessin. Tout ce qui sera dans ce aura un fond différent. Ici, une image. ^^ border-color permet de modifier la couleur de la bordure de votre boîte. Là, il suffit de savoir ce qu'on veut pour la faire ^^ Les -moz-border-radius- sont là pour les coins. Selon que vous avez mit derrière, topright/topleft/bottomright/bottomleft vous manipulerez en pixel, l'arrondis de l'angle correspondant. A 0px, l'angle est droit. border-style détermine si vous avez un trait plein (solid), des pointillés (datted), des tirets (dashed)...ou encore d'autres effets. border-width concerne la taille, ou plutôt, l'épaisseur de votre bordure. ^^ Mais il existe des alternatives ! Par exemple, si vous ne voulez pas les mêmes couleurs sur toutes vos bordures, ou si vous ne voulez pas qu'elles ai le même style, ou la même épaisseur...Vous pouvez passer par : border-left/right/top/bottom : Xpx #XXXXXX solid/datted/dashed; Bon, à la place des X vous mettez les valeurs voulues... Et puis, voilà pour vous donner des idées pour personnalisez vos boîtes. Dernières informations utiles ! On peut mettre des boîtes dans des boîtes ! Les damoiselles sont encastrables. Par exemple, le code employé ici est composé de Trois Boîtes. La première est la principale, celle où j'écris actuellement. La deuxième est celle où le titre est écrit. La grande bande de couleur unie plus sombre. La troisième boîte modifie uniquement la typo de mon titre. ^^ Comme vous vous en doutez, on peut faire plein de choses avec les boîtes...Pour ça, il suffit...et bien...d'avoir les idées, et de trifouiller dans les balises de CSS pour obtenir The solution, et l'effet rendu désiré ^^ Sur ce, bonne journée ! N'hésitez pas à poster à ma suite pour questionner, critiquer, ou dire quoique se soit d'autre. ^^ Oh et, ce Tuto a été fait pour différents forums, dont Libertia et FTAS.