AccueilCalendrierFAQRechercherGroupesS'enregistrerConnexion



 

Partagez |

Codage sur mesure ;) Les fonds ~

Voir le sujet précédent Voir le sujet suivant Aller en bas
Auteur Message
Invité
Invité


MessageSujet: Codage sur mesure ;) Les fonds ~ Lun 31 Déc - 6:32

Le titre est parlant ~

Bon voilà le topo, je pourrais vous expliquer point par point, mais vous serez vite lassé... Donc dans un premier temps, je me contente de vous donner quelques astuces pour faire vos codages sur mesure. Si l'envie vous tente de comprendre mieux cela, je rajouterais le pourquoi du comment...

Bon vous ne rêvez pas, je vais vous parler un peu chinois là...

On appellera cette partie la "famille fond",
Vous comprendrez pourquoi quand ça se corsera (mais c'est pas pour aujourd'hui Wink )

Tout d'abord:

- Personnellement, je commence tous mes codages par:
Code:
 <div style=" ... ;">
Pourquoi? Simplement je trouve que c'est la balise d'ouverture la plus simple et rapide à manier.

Envie d'un fond?

Pour un fond couleur, voici le code:
background-color: votre couleur ici;

Pour un fond image:
background-image: url(URL_de_image);

Où le placer dans votre codage? Très simple:
Ex:
Code:
<div style="background-image: url(URL_de_image); "> TExte </div>

!!attention!! le ";" ne doit jamais être oublié à la fin d'un morceau de code, c'est lui qui sépare les différentes informations de ce dernier !!

Pour contrôler la taille de vos fonds:

Sa hauteur:
height: Xpx;

Sa largueur:
width: Xpx;

Ex:
Code:
<div style="background-color: white; width: 500px; height: 50px; "> Texte </div>
Ce qui donne:
Texte


!! Attention !! Si vous imposez une hauteur et que votre texte est plus long que ce que cette dernière peut contenir, celui-ci va dépasser et ça sera pas joli, joli... Pour que le fond s'étire en fonction du texte, il suffit de ne tout simplement pas mettre de valeur en hauteur...
* Pour ceux qui voudraient une image de fond fixe dont la taille ne varie pas et dont le texte défile grâce à une barre de défilement, l'astuce consiste à créer 2 fonds si on peut dire. Je m'explique:

Créer le fond de votre image :
Code:
<div style="background-image: url(http://static4.fjcdn.com/comments/speshulist+rolled+a+random+image+posted+in+comment+1901451+at+_09921f32ce051520bb897a04d22a95b1.jpg);width: 500px; height: 150px; "> TExte </div>
Ce qui donne :
TExte


Pour "soumettre" le texte à l'élément, il suffit de créer une nouvelle balise <*div style=" ... et sans oublié le magique:
overflow : auto; qui crée votre barre de défilement automatique
Code:
 <div style="width: 500px; height: 100px;overflow : auto;"> TExte </div>
En additionnant les deux:
Code:
<div style="background-image: url(http://static4.fjcdn.com/comments/speshulist+rolled+a+random+image+posted+in+comment+1901451+at+_09921f32ce051520bb897a04d22a95b1.jpg);width: 500px; height: 150px; ">
<div style="width: 500px; height: 100px; overflow : auto;"> TExte </div>
</div>
Ce qui donne:

TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte




Libre à vous de jouer sur les tailles de l'image de fond et du faux fond qui contient votre texte. N'oubliez pas d'user d'un :
Code:
 <center>  votre code </center>

Pour éventuellement center en auto tout ça. Pour un effet plus élaborer on use du Padding, mais c'est plus compliqué, cependant j'y viens, même de base il est utile !

Le padding Quesako? (facultatif)

Code magique que j'affectionne beaucoup <3
padding: 10px 10px 10px 10px;
C'est lui qui permet de créer les espacements entre votre texte et votre cadre notamment (entre beaucoup de choses, on va commencer simple ^^)
Ce simple code qui s'ajoute à la suite de votre morceau de faux fond dans notre cas va vous permettre d'éviter que votre texte "colle" au bord ou à la barre.

Les valeurs définissent l'espace dans cet ordre :
haut
droite
bas
gauche


Si vous voulez jouer de différents espacements selon vos bords, vous serez contraint de l'utiliser ainsi, sinon, à la condition que votre valeur soit unique pour tout votre contour, un simple :
padding: 10px ; suffit amplement. (plus un code est long, plus il est pénible de le remanier, au début du moins!)
J'ai mis 10 de valeur en Px, vous pouvez changer à souhait, 10 est la valeur standard.
Bien sûr, le padding s'utilise dans le faux fond comme dans le vrai, à vous de voir si vous vous sentez de maîtriser son effet. On peut faire plus simple aussi en usant à la place du code blockquote qui ressert le texte:

Code:
 <blockquote> Texte </blockquote>
Pratique au milieu d'un texte par exemple que l'on veut rétrécir qu'en partie.

Donc en reprenant l'exemple de notre code ça donne:
Code:
 <div style="width: 500px; height: 100px;overflow : auto;padding: 10px ;"> TExte </div>
En additionnant les deux:
Code:
<div style="background-image: url(http://static4.fjcdn.com/comments/speshulist+rolled+a+random+image+posted+in+comment+1901451+at+_09921f32ce051520bb897a04d22a95b1.jpg);width: 500px; height: 150px; ">
<div style="width: 400px; height: 100px; overflow : auto;  padding: 10px ;"> TExte </div>
</div>

TExte
TExte Texte TExte Texte TExte Texte TExte Texte TExte Texte TExte Texte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte
TExte



La différence est assez subtile au final, c'est ma petite manie plus qu'autre chose cela x)

!!! Attention !!!
La valeur du padding se rajoute à celle de votre largueur, pensez donc à la prévoir ou l'ajuster pour éviter des déformations.

!!! Rappels importants !!!

-En codage une règle est d'or: Toute balise ouverte doit être fermée sinon c'est le bug assuré.
Ex un < div... doit toujours avoir sa paire <./ div..> à la fin du codage de l'élément souhaité. Idem pour un center ect. Tout ce qui ouvre par "<" se referme obligatoirement !

- Oublier un ";" est aussi source de problème qui empêche souvent le code de fonctionner correctement. Il sépare les différents ordres du code.

- Idem pour la " qui ouvre et ferme l'intérieur de la balise div style .




Prochains chapitres: Les bordures (famille bordure)> mise en forme texte (famille texte)> Combinaison genre tableau ect...

[tuto libre de droit by Oni]


Dernière édition par Hinata Hyuga le Lun 31 Déc - 22:20, édité 2 fois
Revenir en haut Aller en bas
Invité
Invité


MessageSujet: Re: Codage sur mesure ;) Les fonds ~ Lun 31 Déc - 6:43

Ah oui avant que j'oublie ! XD

Pour arrondir le contour d'un fond, on use de :
border-radius: 50px;

Comme pour le Padding, deux choix, une seule valeur ou celle de chaque angles !

Plus en monte en pixel, plus l'effet se fait rond

Code:
<div style="background-image: url(http://static4.fjcdn.com/comments/speshulist+rolled+a+random+image+posted+in+comment+1901451+at+_09921f32ce051520bb897a04d22a95b1.jpg);width: 500px; height: 150px; border-radius: 50px;">
<div style="width: 400px; height: 100px; overflow : auto;  padding: 10px ;"> TExte </div>
</div>


TExte



Plus en monte en pixel, plus l'effet se fait rond, ex:



TExte



Là l'intérêt du padding prend tout son sens Wink

Mon astuce spoiler qui change de nom aussi, en compensation de ma flemme à faire la suite...
Votre new nom:
 
Code:
 [spoiler= Votre new nom] XX [/spoiler]

Ps: les codes marchent aussi pour les sign mais attention à la taille du tout qui est restreinte !
Revenir en haut Aller en bas
Nëssa U.Eikaeiën
♥♥ Simply divine ♥♥
♥♥ Simply divine ♥♥
avatar

Messages : 4370
Date d'inscription : 06/12/2011
Age : 29

Profil Ninja
XP:
2180/2300  (2180/2300)
Rang: SS
Ryos: 4831
MessageSujet: Re: Codage sur mesure ;) Les fonds ~ Lun 31 Déc - 16:51

Ah merci ^^ Ça va aider plusieurs membres. =)

Puis les codages sont toujours mieux quand ils sont faits par soi-même.

_________________

♥ ♥ ♥


Spoiler:
 
Revenir en haut Aller en bas
Akane Mitsuki
Juunin de Kiri
 Juunin de Kiri
avatar

Messages : 277
Date d'inscription : 02/04/2012
Age : 29

Profil Ninja
XP:
805/1000  (805/1000)
Rang: B
Ryos: 1653
MessageSujet: Re: Codage sur mesure ;) Les fonds ~ Mer 2 Jan - 2:52

on dirait presque des commandes SQL lol, mais en plus simple.

_________________

Présentation de la Princesse

Déchirée entre les ténèbres et la lumière, ma vision de la justice s'en voit que tachée. Consumée par la haine et les remords, je cherche la rédemption.

Spoiler:
 
Revenir en haut Aller en bas
Kaito Akimoto
Genin de Konoha
 Genin de Konoha
avatar

Messages : 62
Date d'inscription : 28/03/2013
Age : 19
Localisation : France

Profil Ninja
XP:
148/450  (148/450)
Rang: D
Ryos: 85
MessageSujet: Re: Codage sur mesure ;) Les fonds ~ Mer 3 Avr - 10:40

Comment fait-on pour avoir un cadre entre le transparent et le blanc au-dessus de l'image de fond parce que quand on a une image de fond foncé c'est dure de trouver une bonne couleur d'écriture.

_________________

"Une personne ne devient forte que si elle veut protéger quelqu'un qu'elle aime."
Revenir en haut Aller en bas
Contenu sponsorisé



MessageSujet: Re: Codage sur mesure ;) Les fonds ~

Revenir en haut Aller en bas

Codage sur mesure ;) Les fonds ~

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

Sujets similaires

-
» La Suisse débloque les fonds de Jean-Claude Duvalier » Haiti-Politique :Fonds national d’éducation : illégale, la méthode utilisée » SECURITÉ DE PREVAL ET ARISTIDE: L'ETAT DOIT METTRE FREIN AU GASPILLAGE DES FONDS » Dilapidation des fonds de Pétrocaraibe en préparation » Haïti: J-C Duvalier pourra récupérer ses fonds bloqués
Page 1 sur 1
Permission de ce forum: Vous ne pouvez pas répondre aux sujets dans ce forum
Naruto Sensou :: Blabla :: +Section GFX+ :: Tuto' -