Stardust Team SDT Forum SDT | Pour tous les fans de mangas & japanimation
LES NEWS DU FORUM SDT
Aquisition hébergeur mise en ligne des projets SDT "En cours"
Mise a jour du forum "En cours d'édition"
Ouverture Streaming Zone "Prochainement"
Ouverture Gaming Live Site "Prochainement"
Ouvertures Forums RPG Mangas & Et Forums RPG Games "Prochainement"
Réouverture Officiel 2011 Prochainement"
Visionneuse | Lecture de Chapitres Scans en ligne "Chapitres en cours de mise a jour"
Choisissez Votre Langue En Cliquant Sur Votre Drapeau
Lecteur Musique "En travaux".
Télécharger Les Polices D'Ecritures Forum Ici / Nouvelles Options Forum
Nouveau !
Stardust Team SDT Forum est désormais compatible avec l'extension FastNews.kiwi disponible pour votre navigateur. Avec cette extension, vérifiez s'il y a des nouveaux sujets sur ce forum en un clic depuis n'importe quelle page !Cliquez ici pour en savoir plus.
Posté le: Jeu 30 Juil 2009 - 17:28 Sujet du message: Codage CSS #10 : Marge
Salut à tous et salut à toutes. De ce cours...qui a parler des simpsons ... non ce n'est pas cette marge dont je parle dans le titre du topic
Bah alors c'est quoi? (d'ailleurs pas mal l'encadré
)
Merci, je l'ai justement réalisé avec des marges. Et ouais, en faite, quand je parle de marges, je parle d'espacement. Comment ça? Simple regarder le cadre, il y a des marges extérieurs entre les cotés droites et gauches de ce post et ceux du cadre rouge cadre rouge. De même, il y a des marges intérieurs qui définit l'espace entre le cadre rouge et le texte. Je précise ces marges s'utilise pour des blocks, non pas pour des balises inlines. Pour cela il y a les propriétés vue ICI comme word-spacing...
Dans ton explication, tu as distingué deux types de marche, c'est fait exprès?
Bien sur
. Car les marges extérieurs se met en CSS avec margin et les marges intérieurs par padding et s'exprime en pixel ou en %. Par exemple si je veux séparer la ligne du dessous de 50px (donc marge extérieur) comme ça:
Il vous suffit de mettre :
Code:
<div style="margin:50px">Il vous suffit de mettre :</div>
Eh
mais pourquoi ça me met une marge a gauche, moi je la veux en haut.
C'est normal^^ par défaut les marges s'appliquent aux 4 cotés. Pour préciser le coté il faut mettre margin(ou padding,ça marche pareil)-(nom du coté en anglais toujours). Un exemple?
Code:
p { margin-top:50px; margin-bottom:50px; padding-left:50px; padding-right:50px; }
Ça marche mais ce n'est pas très pratiques. Ca serait bien de pouvoir dire, en haut et en bas tant de pixel... Pour cela reprenons notre balise général, margin (ou padding c'est pareil, je vous dis). Si on met une valeur, elle s'applique au 4 cotés. On a vu cela plus haut. Mais vous n'êtes pas obligé de mettre une seul valeur. Si vous mettez deux valeurs, la premier définira le haut et le bas alors que la seconde définira à gauche et à droite On peut donc simplifier notre code plus haut:
Code:
p { margin:50px 0px; padding:0px 50px; }
Mais on peut aussi mettre 4 valeurs, la première définit le haut, la seconde la droite, la troisième le bas et la quatrième la gauche. Dans le cours précédent tu nous avais parler de margin:auto, c'est quoi
En faite, c'est que les marges se font automatiquement pour que le block soit centrer en tenant compte de sa largeur. Ainsi vous pouvez l'utiliser mais ATTENTION, IL FAUDRA TOUJOURS PRECISER UNE LARGEUR. En effet, imaginez qu'on definisse pas de largeur, les margeurs peuvent valoir 0 et l'on aura un truc qui prend toute la page ou au contraire un truc tout petit en largeur. C'est pour ça qu'on exige de mettre une largeur avec width.