[Résolu]Une marge en trop

Bonsoir,

Voici la structure de page :

-Entête
-Menu horizontal
-Contenu de page

Mon problème est que lorsque j'utilise la balise <p> dans ma div de contenu, j'ai une marge qui se place entre le menu et le contenu (sous firefox).

<div id="menuhaut">
        <ul>
		<li><a href="index.php">Menu1</a><span>&nbsp;|</span></li>
		<li><a href="2.php">Menu2</a></li>
	</ul>
</div>	
<div id="milieu">
        <p>Test contenu</p>
</div>



La CSS ressemble à ça:

#menuhaut{
	width: 800px;
	background-color: #fff;	
}

#menuhaut ul{
	margin: 0;	
}

#menuhaut li{
	display: inline;
}

#menuhaut a{
	text-decoration: none;
}

#milieu{
	height: 500px;
	width: 800px;
	background-color: #fff;
}

Sous IE7 je n'ai pas le problème.
Je le rencontre uniquement sous Firefox.

Et si je joue de la marge négative, c'est sous IE que ça devient le foutoir...

Merci pour votre aide.
Modifié par Cybergifle (29 Dec 2006 - 00:32)

Bonjour,

C'est une histoire de margin par défaut ... ou tu définis margins et paddings pour chaque bloc ou en début de css tu initialises à 0 l'ensemble des margins et paddings de tous les élements par

*{margin: 0; padding: 0;}

Salut,

Super pratique ta feuille de style avec tout les background en blanc pour se repérer

à ghost

a écrit :

tu initialises à 0 l'ensemble des margins et paddings de tous les élements par

*{margin: 0; padding: 0;}

Je pense que ce n'est pas bien de lancer les gens sur de telles pistes, ce genre de choix ne peut être fait que de manière mûrement réfléchie et est assez lourd à assumer. On n'envoit pas quelqu'un comme ça là dedans surtout quand c'est pour rien.

Effectivement...avec le sélecteur universel ça passe (merci !)
Par contre en redéfinissant manuellement, ça marche pour un h1, li mais pas pour ul.
En effet, si "ul" est ma premiere balise de div, l'espacement reste.

Pourquoi ?

Cybergifle a écrit :

Sous IE7 je n'ai pas le problème.

Et pourtant c'est bien IE qui a un problème. C'est un bug du au haslayout (tu n'as qu"à enlever le width et le height de #milieu et tu verras.

Pour le reste, c'est un comportement très normal de fusion des marges, la marge supérieure du premier <p> (même si tu n'en a mis qu'un) compris dans #milieu est reportée à l'extérieur du div.

pour règler cela trois solution :

. marge supérieure du premier <p> à 0 et éventuellement remplacement par un padding-top

. fermeture de #milieu soit par une border-top soit par un padding-top même minimal (d'1px par exemple).

Pour harmoniser avec IE + haslayout c'est sans doute la 1ère solution la meilleure je pense.
Modifié par clb56 (28 Dec 2006 - 03:50)

clb56 a écrit :
Salut,

Super pratique ta feuille de style avec tout les background en blanc pour se repérer

à ghost


tu initialises à 0 l'ensemble des margins et paddings de tous les élements par

*{margin: 0; padding: 0;}

Je pense que ce n'est pas bien de lancer les gens sur de telles pistes, ce genre de choix ne peut être fait que de manière mûrement réfléchie et est assez lourd à assumer. On n'envoit pas quelqu'un comme ça là dedans surtout quand c'est pour rien.


Oui, j'ai pas collé le background du body qui est de couleur lui

Ghost a eu raison de m'en parler...je sais ce que je fais ^^.
J'avais lu des trucs sur cette méthode mais je ne l'avais pas retenue car il en ressortait que c'était assez violent (Et après de nouvelles recherches, c'est confirmé)

Cependant, comme je l'évoque dans mon message précédent, la définition manuelle ne semble pas fonctionner à tous les coups

Cybergifle a écrit :

Ghost a eu raison de m'en parler...je sais ce que je fais ^^.

Ben tant mieux

Mais tu ne seras pas le seul à lire les messages postés sur ton sujet...

Sinon pour savoir ce qui t'arrive cf mon post précédent

A titre informatif: saurais-tu pourquoi la solution numéro 1 ne marche pas sur "ul" ?

Merci beaucoup en tout cas

Cybergifle a écrit :
A titre informatif: saurais-tu pourquoi la solution numéro 1 ne marche pas sur "ul" ?

<ul> n'a rien de particulier par rapport aux autres balises block.

Un seul conseil, oublie cette histoire d'initialisation des marges à 0. C'est lourd à gérer et ça ne répond pas forcément aux problèmes posés. Un problème de fusion des marges sur des marges par défaut ou des marges indiquées manuellement c'est exactement le même problème.

Bonjour

clb56 a écrit :
Un seul conseil, oublie cette histoire d'initialisation des marges à 0. C'est lourd à gérer et ça ne répond pas forcément aux problèmes posés.

Pourrais-tu argumenter s'il te plait ?
J'utilise souvent cette méthode, depuis que je l'ai vue expliquée
ici, et je n'y vois pas vraiment d'ncnvénients...

clb56 a écrit :
Salut,

Super pratique ta feuille de style avec tout les background en blanc pour se repérer

à ghost


tu initialises à 0 l'ensemble des margins et paddings de tous les élements par

*{margin: 0; padding: 0;}

Je pense que ce n'est pas bien de lancer les gens sur de telles pistes, ce genre de choix ne peut être fait que de manière mûrement réfléchie et est assez lourd à assumer. On n'envoit pas quelqu'un comme ça là dedans surtout quand c'est pour rien.

Bonjour,

Effectivement la méthode est certe violente mais si elle est appliquée dès la conception des premières lignes du site elle permet d'éviter quelques ecueils et pertes de temps liées à la spécificité dont nous gratifie chaque navigateur (a déconseiller sur un css déjà existant) et quand à moi je préfère démarrer sur valeurs fixes définies plutot que patcher au petit bonheur chaque situation ...
Après pour ce qui est de la modification des besoins et préférences de l'utilisateur qu'on le fasse de manière généralisée ou locale, je ne vois pas trop la nuance ... Et pour ce qui est du risque lié à l'utilisation de cette méthode "pour rien", j'ai la faiblesse de penser que les lecteurs de ce forum sont suffisamment éclairés pour se faire leur propre opinion voire de demander des complements d'informations et de tester pour leur besoins les différentes propositions qui leur sont soumises (Même un peu trop succintement, je l'avoue ...)

ghost a écrit :
Et pour ce qui est du risque lié à l'utilisation de cette méthode "pour rien"

Ce que j'ai voulu dire c'est que le problème posé par Cybergifle ne concernait pas du tout les valeurs par défaut des navigateurs mais la combinaison du phénomène de fusion des marges et d'un bug de haslayout chez IE (haslayout provoqué par le dimensionnement de #milieu).

L'initialisation à 0 des marges de tous les éléments ne répond pas à ce problème et comme déjà dit c'est un choix qui ne peux être fait qu'après réflexion et non pour répondre à des problèmes dont la solution ne relève pas d'une telle initialisation.

Si vous déduisez de ce qui précède que je dis qu'il ne faut pas utiliser la technique d'initialisation des marges, alors il faut me relire car c'est précisemment ce que je ne dis pas Sur ce point en fait je n'ai pas d'avis. Perso les valeurs par défaut des navigateurs ne me gênent pas vraiment, et par ailleurs les gens font bien ce qu'ils souhaitent c'est évident.

Pour ma part, j'ai tendance à préférer l'utilisation d'une feuille de style reset.css pour remettre tous les styles par défaut à zéro:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0}

table {border-collapse:collapse;border-spacing:0}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

ol,ul {list-style:none}

caption,th {text-align:left}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}

q:before,q:after {content:''}

abbr,acronym {border:0}

Source: Yahoo! UI Library: Reset CSS
Modifié par Benjamin D.C. (28 Dec 2006 - 13:23)

C'est très intéressant mais une fois encore ça ne concerne pas vraiment le sujet.

si une fois ton reset effectué tu fais le choix par exemple de mettre une marge top/bottom déterminée et qui te convient pour les <p> compris dans tel block et que dans ce block on trouve le fragment html que donne cybergifle avec le stylage qu'il souhaite alors le problème exposé sera exactement le même. Il y aura une fusion des marges à gérer et il y aura un bug de haslayout pour IE.

clb56 a écrit :
C'est très intéressant mais une fois encore ça ne concerne pas vraiment le sujet.

J'en suis bien conscient, je profitais juste du sujet pour introduire cette alternative au sélecteur universel.

Benjamin D.C. a écrit :
J'en suis bien conscient, je profitais juste du sujet pour introduire cette alternative au sélecteur universel.

Ah

Un Coding Style Spam en quelque sorte

clb56 a écrit :
Un Coding Style Spam en quelque sorte

Haha, c'est bien ça oui

clb56 a écrit :

L'initialisation à 0 des marges de tous les éléments ne répond pas à ce problème

En tout cas, en la metttant en place ça règle le problème.

Mais une explication comme tu l'as donnée permet de mieux comprendre l'origine du problème...

Je vote donc pour l'ensemble


PS: Pour le ul, ta premiere solution marche effectivement, je m'étais trompé dans un héritage...

Benjamin D.C. a écrit :
Pour ma part, j'ai tendance à préférer l'utilisation d'une feuille de style reset.css pour remettre tous les styles par défaut à zéro:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0}

table {border-collapse:collapse;border-spacing:0}

fieldset,img {border:0}

address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

ol,ul {list-style:none}

caption,th {text-align:left}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}

q:before,q:after {content:''}

abbr,acronym {border:0}

Source: Yahoo! UI Library: Reset CSS

C'est le genre de code facile à mémoriser ^^

Cybergifle a écrit :
C'est le genre de code facile à mémoriser ^^

Ben faut être tordu pour le faire aussi J'ai un fichier reset.css que je garde bien précieusement et que je duplique pour chaque nouveau site créé, c'est tout