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 ♥
avatar

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

MessageSujet: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Mar 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 . ♥️
« 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 ☮ ♡
avatar

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)

MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Mer 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 ♥
avatar

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

MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Mer 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 . ♥️
« 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
avatar

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

MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Mer 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 ♥
avatar

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

MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Mer 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 . ♥️
« 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
avatar

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

MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Mer 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
avatar

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

MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Mer 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 ♥
avatar

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

MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Jeu 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 . ♥️
« 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
avatar

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

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

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



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

Salut ,

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

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

MessageSujet: Re: Un encadré avec texte/photo à l'intérieur (PARTIE 2)   Jeu 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é




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

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: