Pixelia

Votre forum de graphisme et d'entraide ~
 
AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  
Pixelia devient Pixels Paradise ! Le forum ferme ici ses portes mais en ouvre de nouvelles à cette adresse : http://www.pixels-paradise.com/ Nous espérons que vous serez nombreux à nous suivre dans cette nouvelle aventure !

Partagez | 
 

 Ajouter une barre de défilement à un bloc + margin/padding :D

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

VIP #
Féminin Messages : 2023
Age : 19
Date d'inscription : 10/04/2009

MessageSujet: Ajouter une barre de défilement à un bloc + margin/padding :D   Lun 1 Aoû 2011 - 16:02

Yoyoyoyo.

Cette partie est pas bien remplie, donc je vais me faire le plaisir de m'en charger, et vous spammer de codes. 8D
Ca a l'air difficile le HTML, m'en fait non, pas du tout, et le CSS encore moins, il vous faut juste du "vocabulaire".

Alors ici je vais montrer aux débutants comment créer un bloc avec une barre de défilement, comme ceci /o/

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 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 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 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 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla



Ben en fait, c'est tout con.

Code:
<p style="overflow:auto;height:LONGUEUR DU BLOC EN NOMBREpx;width:LARGEUR DU BLOC EN NOMBREpx;">Et ici votre petit texte ~ </p>

Le code "style=""" sert à insérer du CSS directement dans un élément HTML, sans passer par la feuille CSS.
overflow:auto indique que si la taille du bloc ne peut pas supporter tout le texte qu'il contient, il affichera automatiquement une barre de défilement.
height, comme vous avez pu l'constater, indique la longueur du bloc, et width sa largeur. Ces trois dernières propriétés sont donc des propriétés CSS. :D

Si vous trouvez que votre texte est trop serré par rapport à la barre de défilement, vous pouvez utiliser les propriétés CSS margin et padding.
Comment utiliser margin ?
margin définit le nombre de pixels extérieurs au bloc vis-à-vis des autres éléments. Un peu comme un champ de force. 8D

padding définit le nombre de pixels intérieurs entre lesquels le bloc et le texte seront séparés.
...
Bon, rien de tout ça est clair alors je vais faire un exemple. :D

sans margin :
Truc.
Truc.


avec margin:10px :
Truc.
Truc.


sans padding :
Truc.


avec padding :
Truc.


Vous noterez que margin et padding s'appliquent à toutes les directions, donc pour les utiliser seulement sur un côté, il faut utiliser les préfixes :
-top pour le haut
-bottom pour le bas
-right pour la droite
-left pour la gauche

En gros, padding-left:10px; décalera le texte de 10px vers la droite, alors que margin-top:10px; ajoutera 10px d'espace en haut du bloc. :D

Maintenant, combinons notre petit bloc défilant avec un padding-right (à rajouter après style=, entre les guillemets)~

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 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 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 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 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 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 Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla



Et voilà les enfants. 8D
Si vous avez des questions, hésitez pas à poster pour les poser ♥
Revenir en haut Aller en bas
avatar
Taz

VIP #
Féminin Team : Heart Skull
Messages : 713
Age : 20
Localisation : Dans une maison volante.
Humeur : Massacrante. 8D
Date d'inscription : 12/02/2010
Système d'exploitation : Vista
Galerie :

MessageSujet: Re: Ajouter une barre de défilement à un bloc + margin/padding :D   Lun 1 Aoû 2011 - 16:42

EH EH MOI J'AI UNE QUESTION ! *lève la main* Oui moi j'ai une question. >>

J'ai jamais compris à quoi il servait le margin ? C'est un "padding" pour les blocs c'est ça ? êe

_______________




Venez nous rejoindreuuuh ! \o\ We have... cookies. uhuh ~
Revenir en haut Aller en bas
avatar
Cocow'

VIP #
Féminin Team : Lawless Royal Rulers
Messages : 5066
Age : 104
Localisation : JE ME TROUVE LA OU JE ME LOCALISE
Humeur : BWAAAAAAAAAAAAAAAAAAAAAAAAAAH
Date d'inscription : 22/04/2009
Système d'exploitation : Windows 7.
Galerie : *tourne sur elle même*

MessageSujet: Re: Ajouter une barre de défilement à un bloc + margin/padding :D   Lun 1 Aoû 2011 - 16:43

Oh ouais merci justement j'le cherchais ce code.
Par contre j'aurai une question : comment mettre la barre de défilement horizontale et en bas ?

Tankyou. ♥
Revenir en haut Aller en bas
avatar
Taz

VIP #
Féminin Team : Heart Skull
Messages : 713
Age : 20
Localisation : Dans une maison volante.
Humeur : Massacrante. 8D
Date d'inscription : 12/02/2010
Système d'exploitation : Vista
Galerie :

MessageSujet: Re: Ajouter une barre de défilement à un bloc + margin/padding :D   Lun 1 Aoû 2011 - 16:50

HAN OUAIS ! J'avoue ça aussi j'ai jamais réussi à faire. Sauf une fois, parce que j'avais fais un tableau dans la scrollbarre, du coup ça c'était mis en bas.

_______________




Venez nous rejoindreuuuh ! \o\ We have... cookies. uhuh ~
Revenir en haut Aller en bas
Zdou

VIP #
Féminin Messages : 2023
Age : 19
Date d'inscription : 10/04/2009

MessageSujet: Re: Ajouter une barre de défilement à un bloc + margin/padding :D   Lun 1 Aoû 2011 - 16:52

Cocow > Si tu veux mettre une barre horizontale ET une barre verticale car ton bloc est trop long dès le départ, c'est overflow:scroll;. :D Mais ça marchera que si c'est une grande image ou un texte sans espaces, t'en as besoin pour plusieurs images ?

Taz > YEEEEEEEEEEAHHHHH \O/
CONTENTE D'AVOIR SERVI TAZOU
Revenir en haut Aller en bas
avatar
Cocow'

VIP #
Féminin Team : Lawless Royal Rulers
Messages : 5066
Age : 104
Localisation : JE ME TROUVE LA OU JE ME LOCALISE
Humeur : BWAAAAAAAAAAAAAAAAAAAAAAAAAAH
Date d'inscription : 22/04/2009
Système d'exploitation : Windows 7.
Galerie : *tourne sur elle même*

MessageSujet: Re: Ajouter une barre de défilement à un bloc + margin/padding :D   Lun 1 Aoû 2011 - 17:07

Bah. Je pense que plusieurs images collées entre elles sont similaires à une grande image non ?
Enfin sinon merci, faudrait que j'essaie. A quand ton tutoriel des choses qui défilent ? :3
Revenir en haut Aller en bas
Zdou

VIP #
Féminin Messages : 2023
Age : 19
Date d'inscription : 10/04/2009

MessageSujet: Re: Ajouter une barre de défilement à un bloc + margin/padding :D   Lun 1 Aoû 2011 - 17:11

Nop, ça va mettre les images à la ligne.
Si tu veux tout sur une ligne, faut faire overflow-y:hidden;, y représentant la longueur, et rajouter overflow-x:scroll;, suivi de width:auto; qui indique que la largeur sera déterminée par toutes celles des éléments, après avoir défini la longueur de ton bloc bien sûr. ~o~

Edit pour Taz car j'avais pas vu son premier post orz : VOILA. 8D Ca rajoute des pixels d'espace autour du bloc sur lequel t'appliques la propriété, exactement comme le padding avec le texte.
Revenir en haut Aller en bas
Contenu sponsorisé


MessageSujet: Re: Ajouter une barre de défilement à un bloc + margin/padding :D   

Revenir en haut Aller en bas
 

Ajouter une barre de défilement à un bloc + margin/padding :D

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
Pixelia :: Codes tout prêts-
Sauter vers: