Maintenant que vous avez appris comment faire l'encadré, nous allons jouer avec les propriétés pour le rendre plus personnalisé. Prenons un simple carré de base avec une bordure, sans image. Voici notre code :

Code:

<table style="border:3px solid #2a9ec8; padding: 5px;background:#ffffff;"><td >BLABLABLABLABLABLABLABLABLA</td></tr></table>

Ce qui donne :

BLABLABLABLABLABLABLABLABLA

Voici une petite liste de propriétés intéressantes :

» -moz-border-radius:CHIFFREpx CHIFFREpx CHIFFREpx CHIFFREpx
Ce code arrondi les coins. Il suffit juste de changer le ''Chiffre'' par un chiffre.
Exemple, si je change ce chiffre par ''12'', ça va me donner quelque chose comme ça :
* Attention, ce code ne fonctionne pas sous Internet Explorer!

BLABLABLABLABLABLABLABLABLA

» -moz-box-shadow: CHIFFREpx CHIFFREpx CHIFFREpx
Ce code permet de faire de l'ombre. Tu changes les chiffres par les ceux qui te plaisent, tu peux faire des tests. Pour que l'ombre soit égale partout, tu ne changes que le dernier chiffre. Par exemple, dans l'exemple qui suit, je n'ai changé que le dernier chiffre, les autres sont à ''0''.

BLABLABLABLABLABLABLABLABLA

Si je met le dernier chiffre plus élevé, ça va donner quelque chose comme ceci:

BLABLABLABLABLABLABLABLABLA

« Comment on fait pour rajouté des propriétés? »

Voici notre code de départ :

Code:

<table style="border:3px solid #2a9ec8; padding: 5px;background:#ffffff;"><td >BLABLABLABLABLABLABLABLABLA</td></tr></table>

Vous voyez le « Table style=''......'' », c'est là qu'il faut ajouter nos propriétés. Il faut prendre bien soin de ne pas négliger les '' ; '' qui sont insérés entre chaque propriétés. Par exemple, si j'ajoute « -moz-box-shadow: 0px 0px 5px », c'est ainsi que je vais m'y prendre :

Code:

<table style="border:3px solid #2a9ec8; padding: 5px;background:#ffffff; -moz-box-shadow: 0px 0px 5px;"><td >BLABLABLABLABLABLABLABLABLA</td></tr></table>

C'est aussi simple que ça. Je n'ai pas donné beaucoup de propriétés, c'est que
je n'en connais pas encore des centaines disons. Voici un lien où vous pourrez trouver
beaucoup de propriétés et qui peut grandement vous aider.

Liste des propriétés CSS

Question?

Tutoriel par O'wee.
Merci de ne pas reproduire!

En fait, moi aussi j'étais sous Internet Explorer avant. J'avais mis les codes pour les coins arrondis sur PxS mais ça ne fonctionnait pas et je me demandais pourquoi.. Mais je les ai laissé là. & puis un jour, tout bonnement, (=P) j'ai décidé de me mettre sous Firefox.. Puis j'ai découverts PxS avec les coins rond.. et j'ai fait... WOOOOOO . .. Tout ce temps là, il était beau comme ça et je ne le savais pas. =P

Je sais pas trop comment j'ai fait. xD Avec beeeeaaaaucoup de patience et d'essai qui ne servait à rien vu que j'étais sous Explorer et qu'il n'y avait rien à faire. =P C'est pour ça que je le demande, dans le formulaire de présentation, quel est le navigateur..

Salut ^^
Bon j'aime bien ton tutoriel. mais les personnes ne devrait pas copier tout bêtement le code et remplir il faut qu'il le comprenne ^^

Et tu as fait une erreur u.u

Code:

 <table style="border:3px solid #2a9ec8; padding: 5px;background:#ffffff;"><td >BLABLABLABLABLABLABLABLABLA</td></tr></table>

Que fait t-il là ton

Code:

</tr>

et il n'y a même pas sa balise d'ouverture

Code:

<tr>

Et tu n'en à pas besoin vu que tu fais sa sur UNE ligne ^^

Voilà mon essai

Super Tutoriel Pour Débutant ! Bonne chance aux autres ^^

Moi j'ai compris à force de faire du copier coller. (:

* Ça ce peut, pour l'erreur, c'est une signature sur un de mes forums que j'ai recopié..

XD mais tu peut expliquer u.u moi c'est pareil mais bon

Tu corrige l'erreur ?
Vu que si il essaye de comprendre alors qu'il y a une erreur sa va être dur

Zakuro a écrit:

XD mais tu peut expliquer u.u moi c'est pareil mais bon

Tu corrige l'erreur ?
Vu que si il essaye de comprendre alors qu'il y a une erreur sa va être dur

Je l'ai corrigé..

^^ t'es là meilleure

Salut ,

Merci encore pour se super tutoriel !

Merci beaucoup! O:
Je cherchais comment faire... u.u