[RESOLU] CSS : Marges blanches inexplicables !

Question

maxpower

19 Jul 2011 à 20:49

Bonjour,

J'ai un passif de bidouilleur PHP/CSS/JavaScript d'il y a 2-3 ans. Pour un projet personnel, j'ai besoin de m'y remettre mais je butte sur un problème CSS qui m'a grignoté une partie de quota de sommeil la nuit dernière Smiley smile

J'ai simplifié au maximum les éléments de ma page (1HTML + 1CSS + 3PNG), mais je ne trouve toujours pas le coupable :
http://dpotoir.free.fr/temp/index.htm

http://tof.canardpc.com/preview/62f991c4-6dc5-42ae-bbb8-43fc6b86c79d.jpg

Un oeil expert verra tout de suite le problème j'en suis sur.

D'avance merci.

@+
Max
Modifié par maxpower (20 Jul 2011 - 19:24)

94bri37

19 Jul 2011 à 21:03

Je ne suis pas un expert , mais:
par défaut , les éléments Blocks ont une marge prédéfinies selon les navigateurs.
Il faut que tu définisses tes marges à 0.

Typiquement,

#nom_élément{
margin:0;
padding:0;
}

Il me semble qu'il existe un tutoriels sur alsacréations sur le sujet, je te laisse chercher plus d'explications si tu le souhaites.

maxpower

19 Jul 2011 à 21:12

Sur ma page, j'ai 3 div principales : contenu_top / contenu_main / contenu_bottom.
Sur 3 div ont pour propriété

margin: 0 auto;

donc top&bottom=0 et centrage horizontal des div sur la page.

Pour info, si je supprime le div contenu_main, j'ai alors contenu_top & contenu_bottom qui se touchent completement, sans marge blanche entre les deux.
Le problème doit donc résider dans le div contenu_main... mais où Smiley sweatdrop

Modifié par maxpower (19 Jul 2011 - 21:12)

~~supprimé~~

19 Jul 2011 à 21:17

Ça ressemble à un problème de fusion des marges :

http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

maxpower

19 Jul 2011 à 21:22

Vous avez tous les deux raisons.
C'est la faute à mes blocs <p> inclut dans mon div central, avec leur margin par défaut...
Argh !

Merci à vous deux.

@+
Max

94bri37

19 Jul 2011 à 21:23

Oppps !!!
En effet, T'avais déjà mis une marge à 0 Smiley smile

A ce moment la, tu peux éventuellement mettre une marge négative ( c'est pas géniale comme solution , je te l'accorde).

~~supprimé~~

20 Jul 2011 à 00:43

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

En gros la margin-top de 10px de #contenu_main_sub est reporté sur #contenu_main
mets un padding:1px 0; sur #contenu_main, ou alors un petit clear fix before/after qui marche très bien :


#contenu_main:before, #contenu_main:after {
    display:block;
    content:"."; 
    clear:both;
    height:0;
    visibility:hidden;
}

Voila problème réglé.

maxpower

20 Jul 2011 à 01:30

Gatsu35 a écrit :
Margin collapsing :
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

En gros la margin-top de 10px de #contenu_main_sub est reporté sur #contenu_main
mets un padding:1px 0; sur #contenu_main, ou alors un petit clear fix before/after qui marche très bien :
#contenu_main:before, #contenu_main:after {
    display:block;
    content:&quot;.&quot;; 
    clear:both;
    height:0;
    visibility:hidden;
}
Voila problème réglé.

Merci, je mets de coté également.
Je pensais me débrouiller en CSS mais en fait j'ai beaucoup de choses à rattraper... Smiley smile

Modifié par maxpower (20 Jul 2011 - 01:30)

fvsch

20 Jul 2011 à 11:18

Gatsu35 a écrit :
Margin collapsing :
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

La même info a déjà été donnée en français par jb_gfx (article sur la fusion des marges en CSS). Smiley cligne

~~supprimé~~

20 Jul 2011 à 18:48

Bonjour à toutes et à tous,

tout le problème vient d'une méconnaissance de la mise en page !
Voici une façon de faire en utilisant justement les trois images en background.
Il existe d'autre façon de faire, mais je pense que celle-ci est la plus simple.

<!doctype html>
<html>
<head>
<title>test</title>

<style type="text/css">
body {
		background-color	: lightyellow;

}
#contenu {
		margin				: 25px auto;
		border				: none;
		padding				: 0;

		width				: 978px;
}

#haut {
		background-image	: url(frametop.png);
		width				: 978px;
		height				: 10px;
}

#milieu {
		background-image	: url(framemiddle.png);
		width				: 978px;
		height				: 800px;
}

#gauche {
/*		background-color	: red;  */
		float				: left;

		margin-left			: 10px;
		padding				: 5px;

		width				: 310px;
		height				: 790px;
}

#droite {
/*		background-color	: blue;  */
		float				: right;

		margin-right		: 10px;
		padding				: 5px;

		width				: 610px;
		height				: 790px;
}

#bas {
		background-image	: url(framebottom.png);
		width				: 978px;
		height				: 10px;
}
</style>
</head>

<body>
	<div id="contenu">
		<div id="haut"></div>

		<div id="milieu">
			<div id="gauche">
				<h1>Titre 1</h1>

				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

				<h1>Titre 2</h1>

				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

				<h1>Titre 3</h1>

				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
			</div>

			<div id="droite">
				<h1>Titre 1</h1>

				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

				<h1>Titre 2</h1>

				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

				<h1>Titre 3</h1>

				<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
			</div>
		</div>

		<div id="bas"></div>
	</div>
</body>
</html>

@+
Modifié par Artemus24 (21 Jul 2011 - 18:58)

~~supprimé~~

20 Jul 2011 à 18:55

Artemus24 tu lis les sujets avant de répondre ? Smiley sweatdrop

fvsch

21 Jul 2011 à 15:00

Des fois je me demande aussi...

En passant: attention, la syntaxe de commentaire "//" n'existe pas en CSS (contrairement à JavaScript).

~~supprimé~~

21 Jul 2011 à 18:52

Bonjour à toutes et à tous,

je me pose aussi la même question à votre encontre.

Sous problème est un problème de mise en page et rien d'autre !

Au lieu de tourner autour du pot comme vous le faite souvent, refaite son exemple et corrigé son erreur. C'est ce que j'ai fait. J'ai pris le temps d'analyser son problème et de voir comment on peut le corriger en faisant en sorte de lui donner un bon exemple de développement et non pas une bidouille qui ne fera que dégrader la bonne façon de faire.

Et si mon commentaire vous dérange, personne ne vous oblige de me critiquer.

Tant que les critiques sont constructives, je suis preneur, mais pas les autres !

@ fvsch : tu as entièrement raison pour le commentaire en CSS. J'ai confondu avec le JavaScript. Je corrige mon erreur.

@+
Modifié par Artemus24 (21 Jul 2011 - 18:59)

~~supprimé~~

21 Jul 2011 à 19:15

mouais... tu devrais peut être prendre le temps de lire les ressources qui sont postées : je vois pas en quoi apprendre comment fonctionne les moteurs de rendus CSS est "une bidouille".
Modifié par jb_gfx (21 Jul 2011 - 19:21)

~~supprimé~~

21 Jul 2011 à 21:17

Bonjour à toutes et à tous,

je ne sais pas pourquoi jb_gfx mais dès que je dis quelque chose, tu t'empresses aussitôt de me contredire. Est-ce dans ton caractère d'agir ainsi ?

Comme je l'ai dit ci-dessus, si mes propos te dérange et bien n'y répond pas et cela évitera de polluer cette discussion avec des remarques qui n'apporteront rien à celui qui en est à l'origine.

Et je commence en avoir marre de tes remarques non constructive à mon sujet. Alors ça suffit !

@+
Modifié par Artemus24 (21 Jul 2011 - 21:18)

~~supprimé~~

21 Jul 2011 à 21:30

Je disais juste que si tu avais pris le temps de lire l'article de fvsch que j'ai posté tu aurais vu qu'il répondait parfaitement à la problématique exposée ici et en plus tu aurais pu en apprendre un peu sur le fonctionnement des CSS. Au lieu de publier un bout de code sans aucun intérêt pédagogique et sans plus d'explications et qui ne répond ni au problème posé ni au but du forum qui est est l'apprentissage (c'est marqué sous le logo en haut à gauche).
Modifié par jb_gfx (21 Jul 2011 - 21:33)

~~supprimé~~

22 Jul 2011 à 00:01

Bonsoir à toutes et à tous,

et toi si tu avais pris le temps d'extraire mon code, tu aurais vu que j'ai solutionner son problème. Ce n'est pas parce que la présentation de mes réponses te déplait qu'il faut me critiquer !

Je te signale qu'il se présente comme un bidouilleur n'ayant pas fait de HTML+CSS depuis un certain temps. Donc une bonne écriture du code n'est pas un mal en soi. A moins que là aussi tu as quelque chose à redire ?

@+
Modifié par Artemus24 (22 Jul 2011 - 00:02)

fvsch

22 Jul 2011 à 11:39

Deux-trois remarques sur le code proposé par Artemus24 et on ferme ce sujet qui d'une part est résolu et d'autre part tourne à la foire d'empoigne.

1. Le code proposé règle le problème de fusion des marges (ne pas hésiter à lire ou relire l'article à ce sujet si le concept n'est pas maitrisé!) car au moins deux choses bloquent la fusion des marges dans les conteneur de gauche et de droite: le padding et la propriété float. Mais si on plaçait un titre H1 au dessus des deux colonnes par exemple, le problème de fusion des marges avec le conteneur central se poserait à nouveau, donc c'est pas forcément la solution la plus efficace.

2. Une bonne partie des conteneurs ont des hauteurs fixes en pixels. Les hauteurs fixes (même en EM ou autre unité) c'est à éviter la plupart du temps. D'ailleurs si tu supprimes ces hauteurs fixes, tu te rends compte que tu as un problème de...

3. ... dépassement des flottants. Ça serait pas mal de le gérer.

Ressources:
- La fusion des marges en CSS
- Empêcher les flottants de dépasser de leur conteneur

Bonne suite à chacun, peace and love et ainsi de suite.
Modifié par fvsch (22 Jul 2011 - 11:40)

Sujet clos

CSS et mise en forme, CSS3

[RESOLU] CSS : Marges blanches inexplicables !