Remplissage arrière-plan et marges - Page 1

1

Le 24/05/2010 à 15:25

J'ai une page avec 2 DIV, une extérieure et une intérieure. La DIV extérieure a un arrière plan (rouge ici), la DIV intérieure a une marge, nécessaire pour en placer plusieurs à la suite. Le problème c'est que l'arrière-plan de la DIV extérieure ne couvre pas la zone de marge de l'élément interne.
[URL=http://img8.imageshack.us/i/img080.png/][IMG]http://img8.imageshack.us/img8/7146/img080.png[/IMG][/URL]

Le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<body>
		<style type="text/css">
		div#ext {
			background-color: #ff8080;
			width: 640px;
			height: 360px;
			/* border: 1px solid; */
		}
		div#int {
			background-color: #80ff80;
			margin: 20px;
		}
		</style>
		
		<div id="ext">
			<div id="int">Texte</div>
		</div>
	</body>
</html>

J'ai regardé les différentes propriétés CSS concernant l'arrière plan, le placement, le clipping, etc. et je n'ai rien trouvé. Mais comme c'est imbitable, j'ai peut être manqué quelque chose

Le fait de mettre une bordure (décommenter le border: ) corrige le problème mais ajoute une bordure que je ne veux pas. Est-ce qu'il y a un moyen de faire autrement?

Merci d'avance ^^

Highway Runners, mon jeu de racing à la Outrun qu'il est sorti le 14 décembre 2016 ! N'hésitez pas à me soutenir :)

https://itunes.apple.com/us/app/highway-runners/id964932741

2

Le 24/05/2010 à 15:35

Ajouter un padding sur #ext marche aussi, mais c'est dégueulasse. Vraiment je ne sais pas à quoi ils ont pensé. Genre si on aimerait que la DIV soit proche de notre texte (comme c'est le cas sans bordure/padding) mais quand même laisser 2px de rab pour faire joli -> pas possible, on se tape en plus l'addition de tous les espaces laissés sur le bas par les éléments contenus -_-
Il y a des propriétés permettant de contrôler ça?

Highway Runners, mon jeu de racing à la Outrun qu'il est sorti le 14 décembre 2016 ! N'hésitez pas à me soutenir :)

https://itunes.apple.com/us/app/highway-runners/id964932741

3

Le 24/05/2010 à 17:45

Coller un PNG transparent de 2px de large avant le texte...

Kochise

Si Dieu m'a de nouveau fait homme, cette fois il m'a pas raté : marcher sur l'eau et dupliquer les pains, ça marche p'us :/

4

Le 26/05/2010 à 15:12

je n'ai pas du tout compris ce que tu veux faire... tu pourrais être plus explicite ? avec un schéma de ce que tu veux obtenir ?

Ancien pseudo : lolo

5

Le 26/05/2010 à 17:40

Si j'ai bien compris, et Brunni me corrigera si ça n'est pas le cas, voilà son problème :

HcXb

Le rectangle noir du haut représente la page telle qu'il s'attendait à la voir, et le rectangle noir du bas représente le résultat obtenu. Le background du bloc #ext ne commence qu'à partir de 20px du haut alors que le bloc lui-même est à la bonne place, c'est à dire tout en haut de la page. Cet effet est provoqué par la marge du bloc #int, ce qui lui semble incohérent (et je suis d'accord, c'est pas hyper logique que la marge d'un élément intérieur affecte le fond de l'élément extérieur).

All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

6

Le 26/05/2010 à 18:05

Brunni (./1) :
Le fait de mettre une bordure (décommenter le border: ) corrige le problème mais ajoute une bordure que je ne veux pas.

Ça n'est pas très satisfaisant sur le principe, mais tu peux mettre une bordure de la même couleur que l'arrière-plan, donc invisible, non ?

Sinon que se passe-t-il si tu spécifies explicitement une marge de 0 à l'élément div#ext ?

« Le bonheur, c'est une carte de bibliothèque ! » — The gostak distims the doshes.
Membrane fondatrice de la confrérie des artistes flous.
L'univers est-il un dodécaèdre de Poincaré ?
(``·\ powaaaaaaaaa ! #love#

7

Le 26/05/2010 à 18:17Edité par Sally le 26/05/2010 à 18:30

Bon voici ce qui se passe :

the expression collapsing margins means that adjoining margins (no
non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths.

En d'autres termes, si la toute première chose qui apparaît dans #ext est la marge de #int sans qu'il y ait de bordure ni rien, les marges de #ext et #int sont fusionnées, autrement dit tu te retrouves avec une marge commune à ces deux divs imbriquées et dont la largeur est égale au max des deux (donc à la largeur de celle de #int puisque pour #ext c'est 0). C'est tordu...

In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins.

Donc il semblerait que tu puisses résoudre ça en mettant une marge négative à #ext...

( http://www.w3.org/TR/CSS2/box.html#collapsing-margins )

Ils donnent aussi quelques cas où ça collapse pas, ce qui peut aussi t'être utile. Essentiellement ça collapse pas si ton contenant est directement la racine (ie l'élément <html> si je ne m'abuse), si c'est un float, s'il est en position:absolute, ou s'il a un overflow autre que visible (c'est-à-dire hidden ou scroll). Apparemment dans tous les autres cas ça collapse et donc il faut mettre à #ext soit une marge négative pour compenser soit un border ou un padding pour séparer. Je ne sais pas si ça marche de mettre un border de largeur nulle ?

« Le bonheur, c'est une carte de bibliothèque ! » — The gostak distims the doshes.
Membrane fondatrice de la confrérie des artistes flous.
L'univers est-il un dodécaèdre de Poincaré ?
(``·\ powaaaaaaaaa ! #love#

8

Le 26/05/2010 à 18:25

Zeph> Vala c'est exactement ça, joli schéma ^^
Sally> Merci, je vais essayer

Highway Runners, mon jeu de racing à la Outrun qu'il est sorti le 14 décembre 2016 ! N'hésitez pas à me soutenir :)

https://itunes.apple.com/us/app/highway-runners/id964932741

9

Le 26/05/2010 à 18:26

Bah, d'un autre côté, Brunni cherche à utiliser margin pour faire ce qu'on est sensé faire avec padding. C'est pour moi sa principale erreur. (Margin = Pour espacer des éléments de toi; Padding = Pour espacer des éléments enfants de ta bordure, ce qui semble être l'effet recherché ici)
Après c'est vrai que les règles de recouvrement des marges sont un peu complexes car dépendantes du contexte, mais bon...
Pour info: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
#ext { padding: 10px 20px; }
#int { margin: 10px 0; }
Cela résout le problème montré ici (sauf que si tu as plusieurs #int, ce qui est interdit vu que ID = unique (

), ils ne seront espacés que de 10px et non 20px), mais si c'est juste un cas miniature d'un plus gros problème, évidemment ça servira à rien.
Après, les bordures transparentes sont autorisées aussi mais bon...
(Oui, j'ai méga cross avec Sally)

Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

10

Le 26/05/2010 à 18:31Edité par Brunni le 26/05/2010 à 18:36

En fait ça n'a pas l'air de marcher, mais:

Margins of inline-block elements do not collapse (not even with their in-flow children).

Donc rajouter un display: inline-block; dans div#ext marche, même si je ne comprends pas encore bien l'implication et la compatibilité de la propriété

Je vous redis comment, merci!

GC> heu non j'ai qu'une #int

Ensuite j'ai bien dit que le margin-top était dû à l'élément. Je pourrais en effet la supprimer et mettre un padding dans l'élément englobant, mais il y a des endroits dans ma page où ça n'irait pas comme je veux (principalement ceux où ...

j'aimerais ajouter de l'espace avant cet élément).

Highway Runners, mon jeu de racing à la Outrun qu'il est sorti le 14 décembre 2016 ! N'hésitez pas à me soutenir :)

https://itunes.apple.com/us/app/highway-runners/id964932741

11

Le 26/05/2010 à 18:33

(j'ai édité pour quelques précisions. Le coup du border de largeur 0 je pense pas que ça marche par contre ^^)

« Le bonheur, c'est une carte de bibliothèque ! » — The gostak distims the doshes.
Membrane fondatrice de la confrérie des artistes flous.
L'univers est-il un dodécaèdre de Poincaré ?
(``·\ powaaaaaaaaa ! #love#

12

Le 26/05/2010 à 18:39

Ah tiens, je ne connaissais pas du tout cette règle de "collapsing-margins", merci pour les liens

(ça explique pas mal de trucs, et à condition d'être au courant ça donne pas mal d'intérêt à margin ^^)

All right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

13

Le 26/05/2010 à 18:47

Mais sinon le conseil de GC est le plus simple pour ceux qui veulent pas s'embêter: définir un padding dans #ext et ne laisser une marge QUE en-dessous des éléments internes (#int), jamais au-dessus. Malheureusement en définissant un padding dans #ext, on perd le "collapsing" des marges, du coup en donnant une margin-bottom aux éléments internes, celle-ci sera ajoutée sur le bas de #ext.

Exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
	<body> 
		<style type="text/css"> 
		div#ext {
			background-color: #ff8080; 
			width: 160px; 
			padding: 20px;
			/* display: inline-block; */
		}
		div.int {
			background-color: #80ff80; 
			margin-bottom: 20px;
		} 
		</style> 
		 
		<div id="ext"> 
			<div class="int">Texte 1</div>
			<div class="int">Texte 2</div>
		</div> 
	</body> 
</html>

Donnera ça, alors qu'on aurait aimé que la marge du bas de "Texte 2" ne soit pas prise en compte dans la hauteur de #ext, comme c'est le cas si #ext n'a pas de padding...

LZdG

Highway Runners, mon jeu de racing à la Outrun qu'il est sorti le 14 décembre 2016 ! N'hésitez pas à me soutenir :)

https://itunes.apple.com/us/app/highway-runners/id964932741

14

Le 26/05/2010 à 21:09

En fait, si tu as un navigateur suffisamment récent ( comprendre IE ≥ 7 ) tu devrais plutôt utiliser margin-top et le sélecteur :first-child . Je n'ai pas proposé cette solution car évidemment elle ne marche pas sur IE6. (Mais personnellement je m'en fous de IE6 donc je me sers souvent de first-child… De toutes façons IE6 ne gère pas le box model correctement donc t'as du avoir des emmerdes avec aussi

)

Brunni (./10) :
GC> heu non j'ai qu'une #int

Bah ouais mais c'est un exemple ton truc, et pour moi c'est pas clair si tu mets un ID (comprendre: plutôt qu'une classe) parce que l'élément est unique dans l'exemple, ou parce que l'élément est unique dans ce que tu comptes faire en vrai et dont tu ne nous as pas parlé.

(En fait je trouve que ton intention était pas assez détaillé. Y'a plein de façon de faire "X" en CSS, mais y'en a souvent beaucoup moins de faire "X parce que Y" si tu vois où je veux en venir ^^)

Sinon, le top du top c'est d'avoir :first-child et :last-child, comme ça tu peux mettre une marge symétrique partout, sauf cas particulier du premier et dernier élément.

Après, concernant inline-block, c'est pas vraiment fait pour ce que tu veux faire. Par contre la propriété rox, et elle a été apportée par IE en premier (il me semble) donc elle est aujourd'hui supportée partout. Appliquer cette propriété à un élément, quel qu'il soit, lui fait perdre certaines des propriétés pour lesquelles tu l'avais utilisé. Cela crée un élément avec une partie des propriétés des éléments de types blocs et une partie des propriétés des éléments de type « en ligne ». (En gros c'est un bloc qui s'insère dans le flux de mise en page, donc pas de retour à la ligne forcé avant ou après, mais propriétés width & height & co. utilisables)

Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

15

Le 26/05/2010 à 21:15

GoldenCrystal (./14) :
De toutes façons IE6 ne gère pas le box model correctement

faux, il suffit juste de lui indiquer quel box model utilisé via le doctype.

Ancien pseudo : lolo

16

Le 26/05/2010 à 23:27

Brunni > et si tu mets un padding-top mais pas de padding-bottom, ça marche pas ?

« Le bonheur, c'est une carte de bibliothèque ! » — The gostak distims the doshes.
Membrane fondatrice de la confrérie des artistes flous.
L'univers est-il un dodécaèdre de Poincaré ?
(``·\ powaaaaaaaaa ! #love#

17

Le 26/05/2010 à 23:40

./15 > Arf désolé de l'erreur, ça fait trop longtemps que j'y ai pas touché…

Le scénario de notre univers a été rédigée par un bataillon de singes savants. Tout s'explique enfin.
T'as un problème ? Tu veux un bonbon ?
[CrystalMPQ] C# MPQ Library/Tools - [CrystalBoy] C# GB Emulator - [Monoxide] C# OSX library - M68k Opcodes

18

Le 27/05/2010 à 07:39

pas de souci, mais ca fait quand meme plus de 5 ans que le model box switching existe sous ie6

donc en effet, ca doit faire bien longtemps que tu n'en as pas fait

Ancien pseudo : lolo