Un forum de discussions pour parler de tout et de rien, de vos études,de vos vacances,de vos loisirs et faire plein de connaissances
 

Partagez
 

 Codage pour les nuls 2

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 2 Empty
Message Sujet: Codage pour les nuls 2   Codage pour les nuls 2 EmptySam 28 Mai - 7:31


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*


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  :dino4:
Alors vous faites votre "planche". Armez vous d'imagination ! Vous n'êtes pas graphiste pour rien !
(J'ai fait ça : https://i.imgur.com/UtdL9MV.png )

CODAGE POUR LES NULS N°2



Alors c'est un peu pareil que le premier numéro, ce sera juste le centrage des éléments qu'on va voir ici. Par exemple cette div n'est pas au centre mais sur la gauche, pareil pour le titre. La div qui est en bas est pareil que ce que nous avons vu précédemment, pareil pour le fond. Mais je vais ré-expliquer au cas où Razz
Je copie/colle ce que j'ai écrit précédemment :
Alors j'ai pris cette image :
https://i.imgur.com/UtdL9MV.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://i.imgur.com/UtdL9MV.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:605px;">
Vous y êtes arrivé ? Bravo !
Fermez avec un /div et mettez tout ça entre les balises center ainsi :
Code:

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

Maintenant on attaque le code à l'intérieur *-*

Le titre
On se place avant la /div et on crée une autre div style. Si vous n'appliquez rien à cette div, votre titre sera centré, or j'ai fait exprès d'avoir mis une case vers la gauche comme ça vous saurez si jamais vous voulez décaler un titre :PIl y a plusieurs méthodes pour le décaler, mais pour ne pas tout de suite vous faire du bourrage de crâne, j'ai choisi la méthode simple (la méthode dure viendra après 8D). Bref si votre case est à gauche, vous écrivez text-align:left; (left=gauche), si il est à droite, vous écrivez text-align:right; (right=droite). Le mien est à gauche. Pour ne pas qu'il touche le bord du cadre, je le centre avec un padding:XXpx. Enfin pour placer mon texte où je veux, je lui applique une largeur (width) plus grande et je prévisualise plusieurs fois pour bien centré mon texte. Par exemple je commence avec 300px, puis 400px, puis 450px 410, 430 etc... Tout dépend de votre planche bien sûr ! Je rajoute un height:auto, je ferme les balises, ce qui nous donne :
Code:

<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;">TITRE TITRE TITRE
</div>
</div></center>
Le titre est un peu petit pour un titre, on va donc ajouter la balise font size qui se compte en pts ! Ca grandit vite cette unité :sisi:
Code:

<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;"><font size="4pts">TITRE TITRE TITRE</font>
</div>
</div></center>
N'oubliez pas de toujours bien fermer vos balises !
Le titre est fait, passons à la div à gauche !

Div à gauche
Pas trop morts, vous tenez le coup ? Ca devrait aller plus vite si vous avez bien suivi !
C'est comme pour le premier numéro de Codage pour les nuls ! Donc pour le texte à l'intérieur, ouvrez une nouvelle div. Mettez y width et height comme vous le voulez un petit coup de padding de 3 à 7 px de préférence et un overflow:auto ! Késako ?
Rappel :
width : largeur en px
height : hauteur en px
padding : marge à l'intérieur de votre div en px
overflow:auto : scrollbar (le déroulant)

Bon vous avez ça :
Code:
<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;"><font size="4pts">TITRE TITRE TITRE</font></div>


<div style="width:180px;height:250px;text-align:justify;padding:7px;overflow:auto;">TEXTE TEXTE TEXTE
</div>
</div></center>
J'ai sauté 3 lignes pour que ça rentre dans la case, encore là tout dépend de votre fond. Mais là, votre div est centré. Il faudra donc utiliser margin pour y remédier. Margin, c'est la marge autour de votre div (ne pas confondre avec padding qui est la marge à l'intérieur). Bref cette margin (comme le padding d'ailleurs) peut avoir plusieurs attribut : margin-left, margin-right, margin-bottom (en bas), margin-top (en haut). Si vous ne mettez pas d'attribut, ce sera fait pour toutes les margin, pareil pour le padding.
Moi je veux que ma div soit vers la gauche. Je vais utiliser margin-left pour la réduire. Donc je teste avec plusieurs nombre de 100 à 500px à l'aveuglette et je trouve *-* Pour voir si tout est bon, mettez un long texte dans la votre div, histoire de voir si tout est bien centré et si la scroll bar marche bien !
Code:
<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;"><font size="4pts">TITRE TITRE TITRE</font></div>


<div style="width:180px;height:250px;text-align:justify;padding:7px;overflow:auto;margin-left:-300px;">TEXTE TEXTE TEXTE
</div>
</div></center>
Je vois de la sueur sur votre front *-*

Div en bas
Je vous donne bêtement mon code, qui est pareil que celui d'en haut, mais je n'ai pas mis de margin. C'est tout simple :
Code:
<div style="width:430px;height:170px;text-align:justify;padding:7px;overflow:auto;">

Donc vous avez en tout :
Code:
<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;"><font size="4pts">TITRE TITRE TITRE</font></div>


<div style="width:180px;height:250px;text-align:justify;padding:7px;overflow:auto;margin-left:-300px;">TEXTE TEXTE TEXTE
</div>
<div style="width:430px;height:170px;text-align:justify;padding:7px;overflow:auto;">TEXTE TEXTE TEXTE
</div>
</center>
Comme d'habitude, vérifier avec un long texte que vos dimensions collent bien ! *-*




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


Un merci ne vous coûte rien !  :dino4:  


TUTORIEL BY ARYA



Codage pour les nuls 2 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 2 Hl03vzZ
Revenir en haut Aller en bas
Louve Ailée
Léviathan des Nymphes
Léviathan des Nymphes
Louve Ailée
Messages : 3655
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 2 Empty
Message Sujet: Re: Codage pour les nuls 2   Codage pour les nuls 2 EmptyMer 8 Juin - 8:10

Merci Sweety  :lapin6:

Boutique


Bonjour !
Bienvenue dans ma tanière, là où vous pouvez vous procurez pleins de choses !
Boutique en construction  :lapin8:  Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8:  Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8:  Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8: Boutique en construction  :lapin8:


Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3: Travaux en cours  :dino3:




EDIT : En fait pourquoi il y a un espace avant mon texte ? :pandasad:


Mes récompenses:
 
Comment taguer mon pseudo ?:
 


Dernière édition par Louve Ailée le Mer 8 Juin - 9:00, édité 1 fois
Revenir en haut Aller en bas
Invité
Invité
Anonymous

Codage pour les nuls 2 Empty
Message Sujet: Re: Codage pour les nuls 2   Codage pour les nuls 2 EmptyMer 8 Juin - 8:21









Pseudo: Sheryl
Niveau: Moyen
 Logiciel: Photoshop CS5
Boutique: 
Fermée [X]  
Ouverte☑ 






Hey petits fruits, bienvenue dans ma petite boutique o/  !

Je me tiens volontaire pour répondre à vos commandes, alors venez, veneeeeez ♥️ ~
Je ne prends pas plus que 4 commandes à la fois et je prends momentanément en charge que des avatars.
Merci de respecté mon travail et, voici le formulaire si vous commandez un menu chez moi  Codage pour les nuls 2 610716569

Code:
[b]♔Type de création [/b](Avatar): Réponse ici
[b]♔Image/gif a utilisé[/b]: Réponse ici
[b]♔Ambiance souhaité:[/b] Réponse ici
[b]♔Dimensions:[/b] Réponse ici
[b]♔Texte(s):[/b] Réponse ici
[b]♔Autres: [/b]Réponse ici

Exemples d'avatars:
Codage pour les nuls 2 HutfCodage pour les nuls 2 Ni7zCodage pour les nuls 2 68jj
Codage pour les nuls 2 Fruq
Codage pour les nuls 2 B23eCodage pour les nuls 2 Xp34Codage pour les nuls 2 Cmcn


Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 2 Empty
Message Sujet: Re: Codage pour les nuls 2   Codage pour les nuls 2 EmptyMer 8 Juin - 17:22

Waaaah vous êtes douées les filles !

Louve > Problème corrigé !

Sheryl > Est-ce que tu veux que j'essaie de mettre le texte plus à droite pour que ça ne dépasse pas la marge ? :dino2: (ou c'est fait exprès ? Codage pour les nuls 2 610716569 )



Codage pour les nuls 2 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 2 Hl03vzZ
Revenir en haut Aller en bas
Shakumiro
Carpe Japonaise
Carpe Japonaise
Shakumiro
Messages : 89
Date d'inscription : 07/06/2016

Codage pour les nuls 2 Empty
Message Sujet: Re: Codage pour les nuls 2   Codage pour les nuls 2 EmptyJeu 7 Juil - 11:49

Très jolie vos codes omg ! Si seulement je savais grapher comme vous.




Merci à toi Lucy pour le kit <3
Revenir en haut Aller en bas
Louve Ailée
Léviathan des Nymphes
Léviathan des Nymphes
Louve Ailée
Messages : 3655
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 2 Empty
Message Sujet: Re: Codage pour les nuls 2   Codage pour les nuls 2 EmptyLun 1 Aoû - 14:09

Merci encore @Arya  :lapin6:



T I T R E


Sous titre


Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.

Dumque ibi diu moratur commeatus opperiens, quorum translationem ex Aquitania verni imbres solito crebriores prohibebant auctique torrentes, Herculanus advenit protector domesticus, Hermogenis ex magistro equitum filius, apud Constantinopolim, ut supra rettulimus, populari quondam turbela discerpti. quo verissime referente quae Gallus egerat, damnis super praeteritis maerens et futurorum timore suspensus angorem animi quam diu potuit emendabat.

Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.

Sous titre



Codage pour les nuls 2 Z8HXPTE Si il y a reproduction partielle ou totale, Chibiterasu vous mord.
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.

Dumque ibi diu moratur commeatus opperiens, quorum translationem ex Aquitania verni imbres solito crebriores prohibebant auctique torrentes, Herculanus advenit protector domesticus, Hermogenis ex magistro equitum filius, apud Constantinopolim, ut supra rettulimus, populari quondam turbela discerpti. quo verissime referente quae Gallus egerat, damnis super praeteritis maerens et futurorum timore suspensus angorem animi quam diu potuit emendabat.

Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.

Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.

Dumque ibi diu moratur commeatus opperiens, quorum translationem ex Aquitania verni imbres solito crebriores prohibebant auctique torrentes, Herculanus advenit protector domesticus, Hermogenis ex magistro equitum filius, apud Constantinopolim, ut supra rettulimus, populari quondam turbela discerpti. quo verissime referente quae Gallus egerat, damnis super praeteritis maerens et futurorum timore suspensus angorem animi quam diu potuit emendabat.

Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.





Mes récompenses:
 
Comment taguer mon pseudo ?:
 
Revenir en haut Aller en bas
Arya
Léviathan des Nymphes
Léviathan des Nymphes
Arya
Messages : 4011
Date d'inscription : 14/07/2015
Age : 23

Codage pour les nuls 2 Empty
Message Sujet: Re: Codage pour les nuls 2   Codage pour les nuls 2 EmptyMer 3 Aoû - 8:16

Ouaaah trop joli bravo ! Ravie que le tuto serve ! *-*



Codage pour les nuls 2 29VnchE
Merci Nolwenn ♥
Codage pour les nuls 2 Hl03vzZ
Revenir en haut Aller en bas
Contenu sponsorisé



Codage pour les nuls 2 Empty
Message Sujet: Re: Codage pour les nuls 2   Codage pour les nuls 2 Empty

Revenir en haut Aller en bas
 
Codage pour les nuls 2
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ocean Home :: Our Homes :: Vos talents artistiques :: Codage :: Tutoriaux-