Kit pour forum

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

Partagez | 
 

 Codage pour les nuls n°1

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Admin
avatar

Messages : 74
Date d'inscription : 03/09/2010
Age : 21
Localisation : Alsace

Feuille de personnage
BLabla: hopk^^$
Blablaa: Coucou


MessageSujet: Codage pour les nuls n°1   Ven 24 Jan - 12:07


LE CODAGE POUR LES NULS

En fait ce serait plutôt "Le codage pour les graphistes 8D"
LE CODAGE POUR LES FLEMMARDS *comme moi quoi*

(Pour une fois que j'ai le temps de le faire, ce matin j'suis tombé dans les pommes, privé de lycée 8D)
Bon alors c'est trèèèès simple Razz
Vous êtes graphiste ?
Vous utilisez Photoshop/Gimp/photofiltre et vous aimeriez avoir de beaux "codes" ? Cool
Et bien bienvenue dans ce tutoriel assez original !

Alors en fait l'astuce, c'est de faire le fond... C'est déjà une première approche au codage, ce sera votre base.
C'est très simple :sisi:
Alors vous faites votre "planche". Armez vous d'imagination ! Vous n'êtes pas graphiste pour rien !





Exemple 1
Alors là c'est vraiment simple. Mais ça marche seulement si vous avez la transparence bien sûr (donc pas Photofiltre, mais bon vous pouvez prendre le fond du forum, attention par contre il change tous les deux mois Cool). Alors j'ai pris cette image :
http://img15.hostingpics.net/pics/710846notration.png

Ensuite il faudra donc que cette image soit votre fond.
Fond se dit "Background" en anglais (et oui l'anglais vous suivra partout è_é )
Bref, vous voulez que ce background soit une image. Facile, ça donne ....?? *Dora*
Background-image, bravo !!
Bon alors pour mettre un fond, il vous faut le mettre dans la balise "div style".
Code:
<div style="background-image:url('')">
Ah oui j'avais oublié, il faut mettre url aussi, puis vous collez l'adresse url entre la parenthèse et l'apostrophe ainsi :
Code:
<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png')">
Chaque élément mis est très important n'enlevez rien è_é
Maintenant les dimensions de l'image ! Height est la hauteur, Width est la largeur, en px le tout ! Espacez vos éléments avec ";", ça vous donne :
Code:

<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width:540px; height:300px;">
Vous y êtes arrivé ? Bravoooo *-*

Maintenant on passe au texte à l'intérieur. C'est pareil, mais rétrécissez la largeur et la hauteur pour que ça rentre dans l'image ! *-*
Code:

<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width:540px; height:300px;">

<div style=" height:170px; width:520px; ">
Ensuite j'ai rajouté un padding, qui permet que votre texte ne touche pas les bords (en clair c'est pour les idiots comme moi, qui ont mal redimensionner la partie texte donc c'est pour rétrécir 8D)
Pour le déroulant à droite, c'est overflow:auto
Code:

<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width:540px; height:300px;">

<div style=" height:170px; width:520px; padding:20px;overflow:auto;">
Vous écrivez votre texte à la suite de cette balise et vous fermez avec deux /div, puisque vous en avez ouvert deux.
Code:

<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width:540px; height:300px;">

<div style=" height:170px; width:520px; padding:20px;overflow:auto;">
TEXTE TEXTE TEXTE
</div></div>



Ca vous donne (c'est pas étonnant) :



TEXTE TEXTE TEXTE



Facile hein ? Vous pouvez faire ça pour n'importe quelle image *-*
Vous avez juste besoin de ces choses :
background-image:url('http://www.url.com')
width:XXpx
height:XXpx
padding:XXpx
overflow:auto

Un merci ne vous coûte rien !

Dans Codage pour les nuls n°2, apprenez à coder sur cette planche !
http://i.imgur.com/UtdL9MV.png


A la prochaine *-*


TUTORIEL BY SWEETY DON'T COPY OU AIE AIE AIE 8D
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://sweetykit.forumgratuit.org
 

Codage pour les nuls n°1

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» logiciel de dessin pour les nuls comme moi
» L'histoire du café pour les nuls par Younga
» Terme photo pour les nuls
» La TNT pour les nuls
» A lire : Napoléon pour les Nuls !

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Kit pour forum :: Administration :: Présentations-