Le Deal du moment : -29%

PC portable – MEDION 15,6″ FHD Intel i7 ...

Voir le deal

499.99 €

Tuto de Kayl n°4 - L'overflow

La Guerre des Clans RPG :: Avant de Commencer :: Beaux Arts :: Cours :: Tutoriels

Vieille branche

Puf/Surnom : Kayl

Messages : 1784

Kayl

Jeu 6 Aoû 2015 - 21:30

Tuto n°4

Hello les gens ! Aujourd'hui, menu déroulant Tuto de Kayl n°4 - L'overflow 264746

Reprenons celui que j'ai fait la dernière fois :

Code:: <div style="border: 5px double #FF0000; background-image: url(https://www.sophie-g.net/photo/nature/joux/pct/neige2048.jpg); width: 50%; border-radius: 20px;"> <div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div> <div style="text-align: justify; font-size: 14px;">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 </div> <div style="text-align: center; font-size: 10px;">Copyright by...</div> </div>

Ici on écrit un titre

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

Han putain c'est joli *^*
Bref //PAN// Tout d'abord, il faut imposer une taille à la hauteur de la fiche. C'est simple : toujours entre le div style, on ajoute l'information :"height". Sur celui que j'ai fait (et qui rend plutôt pas mal) j'ai mis height: 400px. Après, on peut modifier bien sûr.

Code:: <div style="height: 400px; border: 5px double #FF0000; background-image: url(https://www.sophie-g.net/photo/nature/joux/pct/neige2048.jpg); width: 50%; border-radius: 20px;"> <div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div> <div style="text-align: justify; font-size: 14px;">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</div> <div style="text-align: center; font-size: 10px;">Copyright by...</div> </div>

Ici on écrit un titre

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

Il ne manque plus qu'une seule info pour que tout fonctionne.
On écrit donc, dans la balise div : overflow: auto;
C'est parti :D

Code:: <div style="overflow: auto; height: 400px; border: 5px double #FF0000; background-image: url(https://www.sophie-g.net/photo/nature/joux/pct/neige2048.jpg); width: 50%; border-radius: 20px;"> <div style="text-align: center; font-size: 26px;"><u>Ici on écrit un titre</u></div> <div style="text-align: justify; font-size: 14px;">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</div> <div style="text-align: center; font-size: 10px;">Copyright by...</div> </div>

Ici on écrit un titre

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

Et là, on a un menu déroulant dans sa fiche de RP :D C'est-il pas formidable ? 8D
Et n'oubliez pas : une balise que vous voulez connaître ? Suffit de demander !

Je ferai aussi, un jour, les "table" pour mettre deux blocs côte à côte, par exemple pour faire une fiche de prez Tuto de Kayl n°4 - L'overflow 2049336592

Tuto de Kayl n°4 - L'overflow 2049336592

Bref, voilà, fini pour aujourd'hui ^^

Invité

Jeu 6 Aoû 2015 - 21:59

Merci pour ce tuto Kayouu :keur:

J'essaie demain *-*

Jeune aventurier

Puf/Surnom : Dracko / Mashy ( Sushi pour P'tit Suisse et Koro pour mon Koro )

Messages : 124

Goutte de Rosée

Dim 7 Aoû 2016 - 10:42

Titreuh

Mais ça fontionne trop bien ! C'est stylée :3 J'attends avec impatience le prochain tuto (~~si tu le poste un jour~~) ! Tuto de Kayl n°4 - L'overflow 293941153

Je te mets le codage pour que la barre défilante s’active Tuto de Kayl n°4 - L'overflow 2049336592

Code:: <div style= "overflow: auto; border: 7px double #6633ff; background-image: url(https://pixabay.com/static/uploads/photo/2016/02/03/16/56/background-1177452_960_720.jpg); width: 70%; border-radius: 20px; height: 350px" > <div style= "text-align: center; font-size: 26px; "><u>Titreuh</u></div> <div style= "text-align: justify; font-size: 14; "> [color=#00ffff]Mais ça fontionne trop bien ! C'est stylée :3 J'attends avec impatience le prochain tuto ([strike]si tu le poste un jour[/strike]) ! :kawaii[/color] </div>

Guerrier expérimenté

Puf/Surnom : Fuyu.

Messages : 225

Belle des Astres

Lun 29 Aoû 2016 - 16:52

J'ai enfin réussi grâce à Toi !

On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici
On écrit le texte ici

Merci Kayl Tuto de Kayl n°4 - L'overflow 1408736261

Tuto de Kayl n°4 - L'overflow 1408736261

Invité

Ven 28 Oct 2016 - 14:19

Titre

Merci petit Caillou ♥ Et merci à Mashy aussi pour m'avoir aidée :D
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla
Bla

Invité

Ven 28 Oct 2016 - 21:40

Exercice,

juste on fait comment pour la couleur des textes?
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire
Petite histoire

Guerrier expérimenté

Puf/Surnom : Moony

Messages : 158

Ange Déchu

Mar 14 Fév 2017 - 15:53

Pas de titre en tête !

un petit test, et un grand merci !
Et du texte...
Encore...
Texte.
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE
TEXTE

Copyright by moi avec la précieuse de kayl !

Invité

Dim 9 Avr 2017 - 22:09

Merci Kayl!!

Jeune aventurier

Puf/Surnom : Hivy ou Griffe mais aussi Taxi et Cratère

Messages : 121

Griffe d'Hiver

Lun 24 Avr 2017 - 21:41

Ici on écrit un titre

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

Invité

Lun 17 Juil 2017 - 14:49

I love you

Kayl
Je
T' aime
Trop
pour
ce
tuto
je
t'
adore
merci
merci
merci :keur:

Quand
est
ce
que
tu
fais
ton
prochain
tuto ?

Invité

Dim 30 Déc 2018 - 18:07

Fin d’une Histoire

TEXTE
TEXTE
TEXTE
TEXTE
Texte
texte
texte
t
t
t
t
t
t
t
t
t
t
t
t
t
t
t
t
t
t
t
t
t

Contenu sponsorisé

Sujets similaires

La Guerre des Clans RPG :: Avant de Commencer :: Beaux Arts :: Cours :: Tutoriels

Sauter vers:

Permission de ce forum:

Vous ne pouvez pas répondre aux sujets dans ce forum