|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
tryan
WRInaute accro
Inscrit le: 20 Fév 2005
Messages: 1239
Localisation: Planete terre
|
 Posté le : Mar Avr 22, 2008 19:14 Sujet du message: Propriété margin en css |
|
|
Bonjour,
J'aimerais comprendre pourquoi le code ci dessous (Propriété margin) ne rend pas le résultat escompté...c'est à dire un carré noir parfaitement centré ?
Style css:
| Code: |
.top{
border: 2px solid #000000;
background: #ECCF3E;
width: 200px;
height: 200px;
}
.rr1{
border: 2px solid #000000;
width: 50px;
height: 50px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
margin: 30px 30px 30px 30px ;
} |
Le code:
| Code: |
<div class="top"><div class="rr1">**</div></div>
|
Et par la même occasion pourquoi celui du dessous me colle un carré noir en haut à gauche alors qu'il devrait être en bas décalé de 50px ?
| Code: |
.margin-bottom {
border: 2px solid #000000;
background: #ECCF3E;
width: 200px;
height: 200px;
}
.margin-bottom1 {
border: 2px solid #000000;
width: 80px;
height: 80px;
background: #000000;
color: #FFFFFF;
font-weight: bold;
margin-bottom : 50px
} |
| Code: |
<div class="margin-bottom">
<div class="margin-bottom1">**</div>
</div> |
Merci de vos lumières ^^ |
|
| |
|
 |
Dan_A
WRInaute occasionnel
Inscrit le: 21 Déc 2005
Messages: 160
|
| Posté le : Mar Avr 22, 2008 21:04 Sujet du message: Propriété margin en css |
|
|
Pour le problème 1, peut-être parce que
30+50+30!=200
essaie avec margin:75px;
Pour le problème 2, je ne suis pas sûr de comprendre.
essaie margin-top:50px au lieu de margin-bottom
( http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions ) |
|
| |
|
|
tryan
WRInaute accro
Inscrit le: 20 Fév 2005
Messages: 1239
Localisation: Planete terre
|
| Posté le : Mar Avr 22, 2008 22:32 Sujet du message: Propriété margin en css |
|
|
C'est pas logique ? Si j'ai un carré de 200px de coté et un autre placé à l'intérieure de celui ci de 50px de coté et que je demande une marge de 30px soit 50+(2*30)=110px .Je soustrait donc 110px de 200px qui me donne 90px sinon dit 45px de marge entre le carré intérieure et celui qui l'entoure... donc normalement il devrait être parfaitement centré ... non ?
Pour le numéro 2, je demande selon mon style css que mon carré centrale est une marge de 50px (margin-bottom : 50px;) en bas par apport au carré qui le contient . La il me le colle en haut à gauche...
Ou est l'erreur?
Merci |
|
| |
|
|
Vap
WRInaute accro
Inscrit le: 17 Juin 2007
Messages: 1077
Localisation: Bouches-du-Rhône
|
| Posté le : Mar Avr 22, 2008 23:40 Sujet du message: Propriété margin en css |
|
|
Dan_A a bien répondu, pourquoi tu ne lis pas ce qu'il dit?
Ta logique me laisse perplexe, qu'as tu fumé? 
Peut etre n'as tu pas compris que les entités html sont placées dès que possible en partant du haut vers le bas, et de gauche à droite. Je te conseille d'aller faire un tour sur le site du zero pour réviser tes bases. |
|
| |
|
|
jcaron
WRInaute passionné
Inscrit le: 13 Fév 2004
Messages: 523
Localisation: Paris
|
| Posté le : Mar Avr 22, 2008 23:43 Sujet du message: Propriété margin en css |
|
|
| tryan a écrit: |
| C'est pas logique ? Si j'ai un carré de 200px de coté et un autre placé à l'intérieure de celui ci de 50px de coté et que je demande une marge de 30px soit 50+(2*30)=110px .Je soustrait donc 110px de 200px qui me donne 90px sinon dit 45px de marge entre le carré intérieure et celui qui l'entoure... donc normalement il devrait être parfaitement centré ... non ? |
Ben non, ça donne 90px à mettre quelque part. Qui a dit que ça devait être réparti à part égales des deux côtés? Par défaut tu alignes à gauche...
| tryan a écrit: |
Pour le numéro 2, je demande selon mon style css que mon carré centrale est une marge de 50px (margin-bottom : 50px;) en bas par apport au carré qui le contient . La il me le colle en haut à gauche...
|
Là encore, tu dis que tu veux 50px de marge en dessous de ton carré, mais rien ne dit qu'il ne peut pas y avoir plus de place. Là aussi, par défaut, tu alignes en haut, donc c'est assez normal.
Je pense que tu devrais relire la spec CSS 
Jacques. |
|
| |
|
|
tryan
WRInaute accro
Inscrit le: 20 Fév 2005
Messages: 1239
Localisation: Planete terre
|
| Posté le : Mer Avr 23, 2008 0:19 Sujet du message: Propriété margin en css |
|
|
Vap, promit j'ai rien fumé ^^.
jcaron, raz le bol de lire et re lire ^^.
Bref, j'ai comprit ma connerie, c'est le principal  .
Je partait du principe que si je demandais une marge égal de chaque coté, mon carré ne pouvait être que centré  ..c'était sans prendre en compte les dimensions des carrés eux mêmes!
Pour se servir du CSS faut faire des math. ... chiote  .
Merci pour la compréhension de la chose  |
|
| |
|
|
tonguide
WRInaute accro
Inscrit le: 28 Nov 2003
Messages: 1131
|
| Posté le : Mer Avr 23, 2008 0:43 Sujet du message: Propriété margin en css |
|
|
Pour centrer margin:0 auto;
ou margin-left:auto;margin-right:auto;
c'est fait pour.
Une petite particularité si c'est pour centrer après le Body pour que ce soit compatible partout, ne pas oublier de faire un text-align:center; sur le body (puis un text-align:left; pour remettre le tout à gauche dans le bloc qui suit le body) |
|
| |
|
|
Vap
WRInaute accro
Inscrit le: 17 Juin 2007
Messages: 1077
Localisation: Bouches-du-Rhône
|
| Posté le : Mer Avr 23, 2008 8:08 Sujet du message: Propriété margin en css |
|
|
| tonguide a écrit: |
Pour centrer margin:0 auto;
ou margin-left:auto;margin-right:auto;
c'est fait pour. |
Ca ne centre que horizontalement.
Pour centrer verticalement, il y a des méthodes, mais aucune aussi simple que ça. Il faut aller sur alsacreation par exemple pour voir ces methodes. |
|
| |
|
|
tonguide
WRInaute accro
Inscrit le: 28 Nov 2003
Messages: 1131
|
| Posté le : Mer Avr 23, 2008 12:42 Sujet du message: Propriété margin en css |
|
|
| Ah, j'avais pas vu qu'il voulait centrer verticalement. |
|
| |
|
|
| |
|
|
