AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Un encadré avec texte/photo à l'intérieur (PARTIE 2)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
.O'wee
Out Of C0NTR0L ♥
.O'wee

Féminin Messages : 1709
Date d'inscription : 11/05/2010
Age : 26
Logiciels : PS Element 7.
Humeur : Almost Good. :D
Pixel Ou Shop? : Pixeeel. ♥

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeMar 7 Déc - 21:04

Faire un encadré avec du Texte/Photo à l'intérieur.
Par O'wee ©️

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. Wink
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!

- - - - - - - - - - - - - - - - - - - - - - - *
P i X E L . S H 0 P . ♥️
Un encadré avec texte/photo à l'intérieur (PARTIE 2) Ohla12
« I'm gonna break your little heart, Watch you take the fall. Laughing all the way to the hospital
'Cause there's nothing surgery can do When I break your little heart in two. . . »

Spoiler:
 


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pixelshop.forumactif.com
Tity
♡ ☮ life's a b*tch, then you die ☮ ♡
Tity

Féminin Messages : 1567
Date d'inscription : 23/06/2010
Age : 22
Logiciels : GIMP
Humeur : TIRED.
Pixel Ou Shop? : HAKUNAMATATA. Ce mot signifie que tu vivra ta vie sans aucun soucis. (L)

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeMer 8 Déc - 3:29

    Je viens de faire la découverte du sciècle (:.
    LE FOW EST TOUUUUUUT ROND TOUT BEAUW *O*
    J'suis sous Internet Explorer, mais pour voir le résultat chui allée avec Mozilla Firefox.
    O'weeeeeeeeee: Je t'aime =D

    Mais comment t'as fais? O:
    Awww. & ton truc c'est trop malade.
    clown♥️
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
.O'wee
Out Of C0NTR0L ♥
.O'wee

Féminin Messages : 1709
Date d'inscription : 11/05/2010
Age : 26
Logiciels : PS Element 7.
Humeur : Almost Good. :D
Pixel Ou Shop? : Pixeeel. ♥

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeMer 8 Déc - 5:13

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..

- - - - - - - - - - - - - - - - - - - - - - - *
P i X E L . S H 0 P . ♥️
Un encadré avec texte/photo à l'intérieur (PARTIE 2) Ohla12
« I'm gonna break your little heart, Watch you take the fall. Laughing all the way to the hospital
'Cause there's nothing surgery can do When I break your little heart in two. . . »

Spoiler:
 


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pixelshop.forumactif.com
Zakuro
Wolf's Fangs
Zakuro

Masculin Messages : 180
Date d'inscription : 26/08/2010
Age : 23
Logiciels : Gimp
Humeur : .
Pixel Ou Shop? : Pixel

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeMer 8 Déc - 13:00

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 ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
.O'wee
Out Of C0NTR0L ♥
.O'wee

Féminin Messages : 1709
Date d'inscription : 11/05/2010
Age : 26
Logiciels : PS Element 7.
Humeur : Almost Good. :D
Pixel Ou Shop? : Pixeeel. ♥

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeMer 8 Déc - 16:43

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é..

- - - - - - - - - - - - - - - - - - - - - - - *
P i X E L . S H 0 P . ♥️
Un encadré avec texte/photo à l'intérieur (PARTIE 2) Ohla12
« I'm gonna break your little heart, Watch you take the fall. Laughing all the way to the hospital
'Cause there's nothing surgery can do When I break your little heart in two. . . »

Spoiler:
 


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pixelshop.forumactif.com
Zakuro
Wolf's Fangs
Zakuro

Masculin Messages : 180
Date d'inscription : 26/08/2010
Age : 23
Logiciels : Gimp
Humeur : .
Pixel Ou Shop? : Pixel

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeMer 8 Déc - 17:16

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
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Elise-kitty
Petite fée de couleurs
Elise-kitty

Féminin Messages : 147
Date d'inscription : 17/10/2010
Age : 20
Logiciels : Photofiltre,Photoshop-gimp

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeMer 8 Déc - 19:38

Merci pour la deuxieme partie ! Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
.O'wee
Out Of C0NTR0L ♥
.O'wee

Féminin Messages : 1709
Date d'inscription : 11/05/2010
Age : 26
Logiciels : PS Element 7.
Humeur : Almost Good. :D
Pixel Ou Shop? : Pixeeel. ♥

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeJeu 9 Déc - 3:10

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é..


- - - - - - - - - - - - - - - - - - - - - - - *
P i X E L . S H 0 P . ♥️
Un encadré avec texte/photo à l'intérieur (PARTIE 2) Ohla12
« I'm gonna break your little heart, Watch you take the fall. Laughing all the way to the hospital
'Cause there's nothing surgery can do When I break your little heart in two. . . »

Spoiler:
 


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pixelshop.forumactif.com
Zakuro
Wolf's Fangs
Zakuro

Masculin Messages : 180
Date d'inscription : 26/08/2010
Age : 23
Logiciels : Gimp
Humeur : .
Pixel Ou Shop? : Pixel

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeJeu 9 Déc - 7:37

^^ t'es là meilleure
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeLun 20 Déc - 16:11

Salut ,

Merci encore pour se super tutoriel !
Revenir en haut Aller en bas
Baka.
Pixelois(e). ♥
Baka.

Féminin Messages : 13
Date d'inscription : 18/02/2011
Age : 23
Logiciels : Photoshop CS3.
Humeur : Mwahahaha!
Pixel Ou Shop? : Les deux!

Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitimeJeu 24 Fév - 2:05

Merci beaucoup! O:
Je cherchais comment faire... u.u
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




Un encadré avec texte/photo à l'intérieur (PARTIE 2) Empty
MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Un encadré avec texte/photo à l'intérieur (PARTIE 2) Icon_minitime

Revenir en haut Aller en bas
 

Un encadré avec texte/photo à l'intérieur (PARTIE 2)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 

 Sujets similaires

+
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
PixelShop ::  :: • Ehhh ... CSS & HTML?!-
Sauter vers: