[résolu]Marge entre img et paragraphe sous Firefox

Question

le menuisier

19 Dec 2004 à 15:31

Bonjour à tous

J'ai un problème de marge qui apparait entre mes images et mes paragraphes qui font partit d'une même div, mais ce décalage n'apparait que sous FF car sour IE il me le colle bien en dessous Smiley ohwell

Voici le lien http://lemenuisier.free.fr/site/accueil2.html

Ps ne vous fiez pas au couleur c'est juste pour bien se rendre compte de l'espace qui est créé, et je suis un débutant en la matière alors allez y doucement dans les explications car je ne risue de ne pas comprendre Smiley smile

Merci d'avance Smiley cligne

EDIT je rajoute l'image car sinon çà va être dur de savoir ou c'est
http://img144.exs.cx/img144/9532/margeff4za.png
Modifié le 22 Dec 2004 - 21:37

Raphael

Administrateur

19 Dec 2004 à 15:33

Salut, je te réponds en coup de vent puisque je ne suis pas chez moi.

Je t'invite à suivre la Méthodologie complète qui se trouve en post-it du Salon CSS. Elle devrait te permettre de trouver rapidement quel est le problème et comment le résoudre... de plus, elle te servira pour la suite Smiley smile

Bonne chance !

Felipe

Administrateur

19 Dec 2004 à 15:44

Rien à voir: attention à "pied_mailto" complètement décalé. Il doit manquer un clear: both; je suppose (dans ce div ou dans le précédent)

le menuisier

19 Dec 2004 à 15:51

Merci Raphael je vais de ce pas lire tout çà qui me fera du bien !!!

Merci Felipe car j'avais bien vu que cela clochais mais je ne savaispas comment régler ce problème Smiley decu

Felipe

Administrateur

19 Dec 2004 à 15:56

A force d'avoir la même réponse de la part de Raphael, j'ai fini par l'apprendre. Smiley cligne

Même que maintenant je m'en souviens Smiley biggrin

le menuisier

19 Dec 2004 à 17:13

Bon ben je viens de lire des tonnes de pages très interressantes qui m'ont appris beaucoup mais je n'ai pas trouver de solutions à mon problème Smiley confus

malheureusement Smiley ohwell

Modifié le 19 Dec 2004 - 17:13

Raphael

Administrateur

19 Dec 2004 à 20:43

Pourtant, je suis sûr qu'il s'agit d'un problème de marges par défaut.

As-tu testé la méthode du sélecteur universel ?

* {margin:0; padding:0}

(Dommage que je ne sois pas chez moi pour tester ça)

le menuisier

19 Dec 2004 à 21:26

Oui j'ai bien testé mais aucun changement voici la page ou j'ai testé http://lemenuisier.free.fr/site/accueil4.html

Et voici mon css où je l'ai mis http://lemenuisier.free.fr/site/css/accueil4.css

Mais en fait je me rend compte que celà doit être dù au paragraphe car en bas sous mon menu j'ai le même problème alors que pourtant les padding et margin dans mon code sont bien à zéro et j'ai même supprimé les border Smiley confus

Il y a quelque chose qui m'échappe mais je ne sais vraiment pas quoi Smiley bawling

le menuisier

20 Dec 2004 à 21:19

Vraiment personne d'autre n'aurrais une petite idée Smiley bawling

N'hesitez surtout pas je suis toujours preneur pour faire des essais Smiley cligne

Stephan

20 Dec 2004 à 23:12

Ça semble hors contexte, mais un bête :


#menu { 
   overflow: hidden; 
}

Semble régler le problème... Smiley hum

Stephan

20 Dec 2004 à 23:19

Un nettoyage de ta feuille de style met à jour un problème de double-marge avec IE :


* {margin:0; padding:0}

body{	
	background-image:url("http://lemenuisier.free.fr/site/img/calligraphy5j.png");
	background-repeat: repeat;
	text-align:center;
	}
img{
	background-color:blue;
	border:none;
	}
a{
	text-decoration:none;
	}	
p{
	font-family:"Bradley Hand ITC","Times new roman",serif;
	word-spacing:5px;
	background-color:red;
	}
ul{	
	list-style: none;
	text-align:center;
	}
li{	
	float:left;
	display:inline;
	border:none;
	}
#page{
	background-color:magenta;
	text-align:center;
	margin-right:auto;
	margin-left:auto;
	height:560px;
	width:760px;
	}
#entete{
	margin-right:auto;
	margin-left:auto;
	height:230px;
	width:760px;
	}
#sallededessin{
	background-color:orange;
	padding-top:36px;
	padding-left:40px;
	height:194px;
	width:329px;
	float:left;
	}
#pinceaux{
	background-color:green;
	padding-top:118px;
	padding-left:57px;
	height:112px;
	width:334px;
	float:left;
	}
#milieu{
	background-color:aqua;
	padding-bottom:50px;
	padding-right:80px;
	padding-left:120px;
	margin-right:auto;
	margin-left:auto;
	height:100px;
	width:560px;
	}
#bas{
	background-color:green;
	height:147px;
	width:760px;
	}
[#red]#gauche{
	background-color:pink;
	margin-left:111px;
	height:147px;
	float:left;
	}
#centre{
	background-color:gray;
	margin-left:111px;
	margin-right:111px;
	height:147px;
	float:left;
	}
#droite{
	background-color:orange;
	margin-right:111px;
	height:147px;
	float:left;
	}[/#]
#pied_liens{
	background-color:yellow;
	height:43px;
	width:760px;
	}
#menu { 
  	background-color:gold;
	padding-right:57px;
	padding-left:57px;
	text-align:center;
	height:43px;
	width:646px;
	overflow: hidden; 
}
#pied_mailto{
	background-color:green;
	margin-right:auto;
	margin-left:auto;
	height:20px;
	width:760px;
	text-align:center;
	clear: both;
	}

Maintenant, remplaces par des margin-left uniquement :


#gauche{
	background-color:pink;
	margin-left:111px;
	height:147px;
	float:left;
	}
#centre{
	background-color:gray;
	margin-left:111px;
	height:147px;
	float:left;
	}
#droite{
	background-color:orange;
	margin-left:111px;
	height:147px;
	float:left;
	}

Tu vois le problème ?

Le hack :


#gauche{
	background-color:pink;
	/* False margin value for all versions of IE Win, including 6.0 */
	margin-left: 55px; 
	height:147px;
	float:left;
	}
html>body div#gauche{ 
	/* Correct value for browsers that don't suffer from IE Win's bugs */
	margin-left: 111px; 
}

Modifié le 20 Dec 2004 - 23:30

le menuisier

21 Dec 2004 à 20:24

Bonsoir à tous
Merci Stephan de t'avoir penché a mon problème

Je pense avoir tout compris pour ce qui est du nettoyage mis a part que je vais remettre la largeur pour mes trois div gauche,centre et droite car suivant la police de l'utilisateur cela change l'affichage : normal Smiley confus

Pour ce qui est du overflow: hidden; alors là je ne comprends plus rien je ne vois pas ce qui viens faire là mais bon si cela va tant mieux.

Et pour ce qui est de mon problème principal : l'espace entre mes trois images et les trois textes en dessous dans les div gauche,centre et droite je ne sais toujours pas comment faire Smiley bawling

Et enfin pour le "hack" y va encore falloir que je lise car je n'ais pas exactement compris comment çà marchait Smiley confus

Merci beaucoup Smiley biggrin

EDIT j'ai essayé de concevoir un peu différement pour supprimer ce fameux espace et voilà a ce que je suis arrivé http://lemenuisier.free.fr/site/accueil7.html
Très bien sur Firefox mais un décalage en largeur de mes trois texte sous IE Smiley eek

Et j'ai l'impression aussi que le tout est plus haut Smiley confus

Modifié le 21 Dec 2004 - 22:31

Stephan

21 Dec 2004 à 22:55

le menuisier a écrit :

Très bien sur Firefox mais un décalage en largeur de mes trois texte sous IE

Le problème des doubles marges IE.

Le overflow: hidden; visait à résoudre un problème de compatibilité entre les images de ton <ul id="menu"> et le paragraphe <p id="pied_mailto">, mais je viens de constater que tu parlais d'un autre problème.

Pendant que je me penchais sur ton ce problème, tu as placé ton <ul id="menu"> dans un <div id="pied_liens"> et tu as changé ton <p id="pied_mailto"> pour un <div id="pied_mailto"><p> ce qui règle ce problème (mais en amène un autre), donc le overflow: hidden; devient inutile.

Pour ton nouveau "ancien problème", j'ai déjà eu des misères à gérer cet espace entre <img> et <p>.

Ceci devrait fonctionner :


#bas img { 
   display: block; 
}

Je te suggère d'appliquer ceci à la feuille de style que je t'ai fourni, et de revenir en arrière avec les changements ci-haut mentionnés. Sinon, reste un bug à corriger avec ton <div id="pied_mailto">, et un pas évident problème de doubles marges IE. Smiley cligne

Ouf !!!

Modifié le 21 Dec 2004 - 23:41

Stephan

21 Dec 2004 à 23:22

Pour résumer, tu appliques la feuille de style suivante à http://lemenuisier.free.fr/site/accueil4.html et tout baigne !


* {margin:0; padding:0}

body{	
	background-image:url("http://lemenuisier.free.fr/site/img/calligraphy5j.png");
	background-repeat: repeat;
	text-align:center;
	}
img{
	background-color:blue;
	border:none;
	}
a{
	text-decoration:none;
	}	
p{
	font-family:"Bradley Hand ITC","Times new roman",serif;
	word-spacing:5px;
	background-color:red;
	}
ul{	
	list-style: none;
	text-align:center;
	}
li{	
	float:left;
	display:inline;
	border:none;
	}
#page{
	background-color:magenta;
	text-align:center;
	margin-right:auto;
	margin-left:auto;
	height:560px;
	width:760px;
	}
#entete{
	margin-right:auto;
	margin-left:auto;
	height:230px;
	width:760px;
	}
#sallededessin{
	background-color:orange;
	padding-top:36px;
	padding-left:40px;
	height:194px;
	width:329px;
	float:left;
	}
#pinceaux{
	background-color:green;
	padding-top:118px;
	padding-left:57px;
	height:112px;
	width:334px;
	float:left;
	}
#milieu{
	background-color:aqua;
	padding-bottom:50px;
	padding-right:80px;
	padding-left:120px;
	margin-right:auto;
	margin-left:auto;
	height:100px;
	width:560px;
	}
#bas{
	background-color:green;
	height:147px;
	width:760px;
	}
#bas img{
	display:block;
	}
#gauche{
	background-color:pink;
	/* False margin value for all versions of IE Win, including 6.0 */
	margin-left: 55px; 
	height:147px;
	float:left;
	}
html>body div#gauche{ 
	/* Correct value for browsers that don't suffer from IE Win's bugs */
	margin-left: 111px; 
}
#centre{
	background-color:gray;
	margin-left:111px;
	height:147px;
	float:left;
	}
#droite{
	background-color:orange;
	margin-left:111px;
	height:147px;
	float:left;
	}
#pied_liens{
	background-color:yellow;
	height:43px;
	width:760px;
	}
#menu { 
  	background-color:gold;
	padding-right:57px;
	padding-left:57px;
	text-align:center;
	height:43px;
	width:646px;
	overflow: hidden; 
}
#pied_mailto{
	background-color:green;
	margin-right:auto;
	margin-left:auto;
	height:20px;
	width:760px;
	text-align:center;
	clear: both;
	}

le menuisier

22 Dec 2004 à 21:03

Merci Stephan Smiley biggrin

C'est super çà marche tout nickel comme je veux Smiley cligne

Après quelques petites ameliorations et compléments voici le résultat pour ceux que çà intéresse ICI

Ne regardez pas les autres pages car c'est tout ce qui me reste à faire et je suis loin d'avoir fini Smiley ohwell

Encore merci Smiley lol

EDIT enfin je viens de faire un tour pour votre la validation, pour le CSS c'est bon mais par contre c'est pas bon pour le XHTML Smiley fache

http://validator.w3.org/check?verbose=1&uri=http%3A//lemenuisier.free.fr/site/accueil.html

Je crois avoir compris que je ne peux mettre une balise <p> dans une balise <a> mais alors avec quoi je peux la remplacer ?
Modifié le 22 Dec 2004 - 21:18

doomer

22 Dec 2004 à 21:17

Et bien tu retires la balise <p>esquisse</p> et tu laisses esquisse c'est tout.

même chose pour les autres
Modifié le 22 Dec 2004 - 21:17

le menuisier

22 Dec 2004 à 21:20

Bonsoir Doomer

Désolé j'étais en train d'édité en même temps que tu répondais mais le problème si je retire les <p> je n'aurrais plus les propriétées que j'ai mis à mes paragraphes comme la police par exemple Smiley ohwell

doomer

22 Dec 2004 à 21:28

Et si tu fais ceci

    <div id="gauche"><p><a href="esquisse.html" title="esquisse"><img src="img/esquisse.png" width="100" height="100" alt="esquisse"/>esquisse</a></p></div>

à la place de

    <div id="gauche"><a href="esquisse.html" title="esquisse"><img src="img/esquisse.png" width="100" height="100" alt="esquisse"/><p>esquisse</p></a></div>

le menuisier

22 Dec 2004 à 21:31

Eh ben ci ce fais çà çà marche Smiley biggrin

http://validator.w3.org/check?verbose=1&uri=http%3A//lemenuisier.free.fr/site/accueil.html

C'était tout con mais il fallait y penser merci Doomer Smiley cligne

doomer

22 Dec 2004 à 21:34

Un petit resolu Smiley cligne

et peut être que tu aurais également une solutoin pour mon probleme en CSS Smiley cligne

Sujet clos