Discussion :

[Clorish]

J'ai quelques questions en vrac pour mieux comprendre le design CSS :

1 - Quel est la difference fondamentale entre margin et padding ? J'ai remarqué que des fois on utilise l'un des fois l'autre. Quand utiliser quoi et pour quel effet ?

2 - Structure des Divs : Un div imbriqué dans un autre div peut il etre desolidarisé de son ancetre ? C'est a dire que si j'inclut un div (menu) dans un header par exemple, puis-je plus tard le deplacer en dehors de son div conteneur ou faut il l'extraire et le placer dessus ?

3 - Ordre de creation des Divs : Y a t il un odre a respecter ou des astuces pour passer outre cet ordre de creation quand on concoit un design CSS ?

4 - Existe t il une sorte de methode pour structurer sa page de telle maniere que plus tard on soit le moins bloqué possible ? ou bien cela depends de l'ensemble des designe que l'on souhaite mettre en place ?

A bientot pour de nouvelles questions

[jmulans]

1 - margin c'est la marge exterieure, et padding la marge interieure (ou l'inverse )

[Clorish]

ok merci mais comment savoir si on opte pour l'un ou pour l'autre

[Clorish]

nouvelle question :
5 - Le positionnement absolut est par rapport a la page ? ou en absolut par rapport a son conteneur ?

[E.Bzz]

ok merci mais comment savoir si on opte pour l'un ou pour l'autre

Si tu as une bordure, l'espace sera généré à l'extérieure avec margin et à l'intérieur (entre la bordure et le contenu) avec padding.
Pour le choix, à toi de voir en fonction du résultat souhaité

A+

[jmulans]

bah... ça c'est ton choix
si par exemple tu veut de l'espace autour d'un tableau, tu met margin
si a l'interieur d'un tableau, tu veut de l'espace à l'interieur des cellules, tu met padding

[E.Bzz]

nouvelle question :
5 - Le positionnement absolut est par rapport a la page ? ou en absolut par rapport a son conteneur ?

absolute = par rapport à la page, qqsoit son contenu (en dehors du flux => pas d'interaction par défaut avec les autres éléments)
relative = par rapport au conteneur (élément parent)

A+

[E.Bzz]

si par exemple tu veut de l'espace autour d'un tableau, tu met margin

... sur <table>

si a l'interieur d'un tableau, tu veut de l'espace à l'interieur des cellules, tu met padding

... sur chaque <td>

[Clorish]

absolute = par rapport à la page, qqsoit son contenu (en dehors du flux => pas d'interaction par défaut avec les autres éléments)
relative = par rapport au conteneur (élément parent)

ok merci
mais cela m'amene vers une autre question : Il y a possibilité de faire du absolute relativement a un div
en fait le but serait de superposer 2 divs dans un divs sans avoir a les specifier de maniere absolue stricte par rapport a la page.

[E.Bzz]

le but serait de superposer 2 divs dans un divs sans avoir a les specifier de maniere absolue stricte par rapport a la page.

Heu ... pas bien compris la fin, là
Si c'est en absolute, c'est par rapport à la page (comme le nom l'indique ... presque).
Pour ça, il suffit de donner les mêmes coordonnées aux 2 div (donc éventuellement, de récupérer les coordonnées du 1° pour placer le 2°) ...

A+

[Bisûnûrs]

absolute = par rapport à la page, qqsoit son contenu (en dehors du flux => pas d'interaction par défaut avec les autres éléments)
relative = par rapport au conteneur (élément parent)

A+

Je dirais même plus :

Absolute, se positionne en fonction de son dernier élément parent positionné, à défaut, le body.

Relative, se positionne par défaut à l'endroit où il aurait dû prendre sa place.

[Clorish]

Heu ... pas bien compris la fin, là
Si c'est en absolute, c'est par rapport à la page (comme le nom l'indique ... presque).
Pour ça, il suffit de donner les mêmes coordonnées aux 2 div (donc éventuellement, de récupérer les coordonnées du 1° pour placer le 2°) ...

A+

En fait c'est simple : J'ai un div Header
Dans ce div, j'ai 2 div (ou balise html specifié comme block ce uqi a priori revient au meme) : logo et Menu

Header a pour width/height : 800/200px.
Je souhaiterais que le logo ai pour coordonnés (x/y) : 300/0 pour une taille de 200/200
Ensuite le menu devra avoir pour cood : 0/150 pour une taille de 800/50, e telle maniere que le logo superpose le menu en son centre ....

Ces coordonné doivent etre relatif au conteneur de base : Header car j'aimerais ne pas avoir a m'occuper du centrage de tous les elements du header en position absolut .....
Le centrage etant effectué pour le div Conteneur, je souhaiterais que mes coord absolut soit en rapport avec les coord de ce conteneur

[Clorish]

Absolute, se positionne en fonction de son dernier élément parent positionné, à défaut, le body.

Donc les coord absolut sont par rapport aux coord du parent ? donc un peu plus a droite serait un left negatif ? (si le parent a un left positif > 0)

[Bisûnûrs]

Donc les coord absolut sont par rapport aux coord du parent ? donc un peu plus a droite serait un left negatif ? (si le parent a un left positif > 0)

Du parent si et seulement si celui-ci est positionné.

Exemples :

Affichage par rapport au body :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<body>
<div style="margin:200px 0 0 200px;width:500px;height:500px">
   <div style="position:absolute;left:0;top:0;width:300px;height:300px">
      Texte
   </div>
</div>
</body>

Affichage par rapport au parent :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<body>
<div style="margin:200px 0 0 200px;width:500px;height:500px;position:relative">
   <div style="position:absolute;left:0;top:0;width:300px;height:300px">
      Texte
   </div>
</div>
</body>

[Clorish]

ok. en resumé, tant que le parent n'a pas de position : absolute/relative c'est par rapport au body ....

[Bisûnûrs]

Ou si le parent du parent [du parent [du parent [...]]] n'est pas positionné non plus, oui, ça marche comme ça.

[Clorish]

Ou si le parent du parent [du parent [du parent [...]]] n'est pas positionné non plus, oui, ça marche comme ça.

ok ... donc absolu c'est par rapport au premier block positionné, par defaut, body.

[Clorish]

another question :
6 - Quand on a un div imbrique dans u nautre div et que l'on souhaite masquer ce div. il masque automatiquement tous les div fils.
Y a t il un moyen de casser cette recursivité ?

[Bisûnûrs]

Y a t il un moyen de casser cette recursivité ?

Pas que je sache.

[Candygirl]

ok ... donc absolu c'est par rapport au premier block positionné, par defaut, body.

Par défaut, c'est la fenêtre, pas le body.