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

Partagez | 
 

 Un encadré avec texte/Photo à l'intérieur

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   Dim 5 Déc - 19:10

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

Voici le code avec lequel nous allons travailler.

Code:
<table style="border:3px solid #COULEUR DE LA BORDURE; padding: 5px;background:#COULEUR DU FOND;">
<tr>
<td ><img src="LIEN DE LA PHOTO" /></td><td style="background:#COULEUR DU DEUXIÈME FOND; padding: 2px;">TEXTE</td>
</tr>
</table>

Exemple du résultat :




PxS c'est telllllement meilleur que du Wisky. Wink


[center]Couleur de la bordure : Orange.
Couleur du fond : Orange plus pâle.
Lien de la photo : https://i.servimg.com/u/f60/15/20/01/09/oli_sy10.jpg
Couleur du deuxième fond : Bleu

Les variantes

Commençons par les variantes associées à la bordure. Vous allez devoir modifié cette partie :
Code:
border:3px solid #d84c14

• Le 3px équivaut à la grosseur de la bordure.
• Le solid équivaut au style de la bordure. Vous pouvez le modifié par :
none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de bordure de 3px minimum)
dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D

Pour ne pas avoir de bordure, vous n'avez qu'à supprimer cette partie du code. Ça s'applique également à la photo, le deuxième fond et tout finalement. Vous enlevez les parties relier à ce que vous ne voulez pas voir dans votre code. Voici un exemple du code si j'enlève la photo et le deuxième fond :

Code:
<table style="border:3px solid #COULEUR DE LA BORDURE; padding: 5px;background:#COULEUR DU FOND;">
<tr>
<td ></td><td style="padding: 2px;">TEXTE</td>
</tr>
</table>

Ce qui donne:




PxS c'est telllllement meilleur que du Wisky. Wink

Pour que votre cadre soit centré, vous devez ajouté
Code:
<center>
avant le code et
Code:
</center>
après le code.



Merci à O'wee de nous avoir soumis ce tutoriel. I love you
& Merci à Liste des propriétés CSS de m'avoir inspiré de certaines parties.

Questions?

- - - - - - - - - - - - - - - - - - - - - - - *
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
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   Dim 5 Déc - 19:33





J'essaye !

La bordure ne marche pas... Crying or Very sad

Merci de ce tuto Cool
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   Dim 5 Déc - 19:39

Elise-kitty a écrit:




J'essaye !

La bordure ne marche pas... Crying or Very sad

Code:
<table style="border:5px solid #720076 padding: 5px;background:#d569d9;">
<tr>
<td ></td><td style="padding: 2px;">J'essaye !</td>
</tr>
</table>

Tu as supprimé le « ; » après le numéro de couleur c'est pour ça.
Voici le bon code :

Code:
<table style="border:5px solid #720076; padding: 5px;background:#d569d9;">
<tr>
<td ></td><td style="padding: 2px;">J'essaye !</td>
</tr>
</table>

Ce qui donne :





J'essaye !

- - - - - - - - - - - - - - - - - - - - - - - *
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
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   Dim 5 Déc - 19:44





J'espere que ça va marcher !
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   Dim 5 Déc - 19:48

Si tu as d'autres questions, n'hésite pas à me les demander. (:

- - - - - - - - - - - - - - - - - - - - - - - *
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
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   Lun 6 Déc - 11:53





rendeer MERCI O'WEE rendeer pour ce tuto ça m'a vraiment mais hyper aidé quoi !
Si je besoin de quelque chose ne t'inquiete pas Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
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   Lun 6 Déc - 17:51

bravo ^^
Pas mal ton tutoriel =)
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   Lun 6 Déc - 18:11

Merci Zak. (:

- - - - - - - - - - - - - - - - - - - - - - - *
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
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   Lun 6 Déc - 18:52





Je vous conseille vraiment d'essayer le code et encore MERCI O'WEE !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



MessageSujet: Re: Un encadré avec texte/Photo à l'intérieur   Mar 7 Déc - 17:30

Tu fais sa avec Adobe Flash ?
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: Un encadré avec texte/Photo à l'intérieur   Mar 7 Déc - 17:57





Merchi j'adore ^^ en plus je cherchai comment faire ^^'
Revenir en haut Aller en bas
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   Mar 7 Déc - 17:59

Les codes comme sa tu les faits à la main ^^
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   Mar 7 Déc - 21:05

Voici la suite :

http://pixelshop.forumactif.com/ehhh-css-html-f15/faire-un-encadre-avec-du-texte-photo-partie-2-t100.htm#693

Peut-être que ça va t'aider Cupydhon. (:
Sinon hésite pas à me poser des questions.

- - - - - - - - - - - - - - - - - - - - - - - *
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
Invité
Invité



MessageSujet: Re: Un encadré avec texte/Photo à l'intérieur   Mar 7 Déc - 21:24

Mais je voulais juste savoir si je pouvais faire du flash avec parce que j'utilise Adobe Flash
Revenir en haut Aller en bas
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   Mer 8 Déc - 17:17

Flash c'est pas la même chose, tu utilise des script pour faire des animations pas du HTML

Telecharge notepad il est bien il met en couleur les différentes balises ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité



MessageSujet: Re: Un encadré avec texte/Photo à l'intérieur   Lun 20 Déc - 16:23

Salut,





Attention, je griffe ! Merci O'wee pour se tutoriel !
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Un encadré avec texte/Photo à l'intérieur   

Revenir en haut Aller en bas
 

Un encadré avec texte/Photo à l'intérieur

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: