Fusionner deux marges verticales

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Fusionner deux marges verticales

Cutter

Hello!

Voici une page simple:

HTML:

<BODY>
<DIV class="header">
<P>En-tête
</DIV>
<DIV class="menu">
<P>Barre de menu
<UL>
<LI>Menu 1</LI>
<LI>Menu 2</LI>
<LI>Menu 3</LI>
<LI>Menu 4</LI>
<LI>Menu 5</LI>
</UL>
</DIV>
<DIV class="footer">
<P>Pied de page
</DIV>
<P>Paragraphe
</BODY>

CSS:

body {
background: orange;
font-family: sans-serif;
font-size: small;
}

li {
background: blue;
}

.header {
background: yellow;
height: 100px;
}

.menu {
background: green;
width: 150px;
}

.footer {
background: red;
}

Voici ce que j'ai lu dans les recommendations du W3C au sujet des CSS:

Citation :

4.1.1 Mise en forme verticale

Pour les éléments de type bloc non-flottants, la largeur de la marge correspond à une distance minimum entre le contenu et le bord des boîtes qui l'entourent. Si aucune bordure, ni espacement, ni contenu ne séparent deux (ou plus) marges verticales adjacentes, alors elles fusionnent et la résultante est la plus grande de ces valeurs de marge. Dans la plupart des cas, cette fusion des marges verticales donne un meilleur aspect visuel, plus proche des attentes de l'auteur.

A priori, "header" devrait partager sa marge inférieure avec "menu" puisque je n'ai spécifié aucune bordure, ni marge, ni padding. Idem pour "menu" et "footer". Pourtant, même en forcant la valeur de "margin", de "padding" et de "border" à zéro, j'ai toujours un décalage entre les deux. C'est à s'arracher les cheveux. [:jofusion]
J'aimerais comprendre pourquoi ce décalage apparaît, savoir ce qu'il représente (est-ce une marge?), et comment le supprimer le plus simplement possible.

Voilà ce que ça donne:

D'avance merci. :jap:

---------------
last.fm

Publicité

gm_superstar

Appelez-moi Super

C'est à cause des marges des paragraphes, non-nulles par défaut.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Profil supprimé

si je me souvient bien retire le padding/margin du ul et li.

ensuite met ca http://www.w3schools.com/css/pr_li [...] sition.asp en inside.

Cutter

gm_superstar a écrit :

C'est à cause des marges des paragraphes, non-nulles par défaut.

En effet, lorsque je mets

p {
margin: 0;
}

dans les CSS, les écarts disparaissent.

Mais alors comment faire pour avoir des paragraphes qui s'écartent les uns des autres (pour plus de lisibilité) sans que cet écart n'agisse à l'éxtérieur du conteneur (le DIV en l'occurrence)?

Message édité par Cutter le 27-12-2004 à 10:37:40

---------------
last.fm

gm_superstar

Appelez-moi Super

Essaye en donnant un padding aux DIV (par défaut la marge d'un paragraphe est de 1em je crois)

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Cutter

gm_superstar a écrit :

Essaye en donnant un padding aux DIV (par défaut la marge d'un paragraphe est de 1em je crois)

Tu as raison, ça supprime les écarts quelle que soit la valeur du padding (même avec 1px). Pourquoi? Si la valeur de la marge d'un paragraphe est de 1em, il serait plus logique que l'écart soit supprimé lorsque le padding du DIV et supérieur où égal à 1em (ou à 0.5em), non? :??:

P.S: d'ailleurs à quoi correspond une unité "em" svp?

---------------
last.fm

fastclemmy

(re-)Dictateur en plastique

Cutter a écrit :

P.S: d'ailleurs à quoi correspond une unité "em" svp?

http://www.publishtogether.com/pompeurs/CssUniteEm

Cutter

fastclemmy a écrit :

http://www.publishtogether.com/pompeurs/CssUniteEm

Merci.

---------------
last.fm

FORUM HardWare.fr

Programmation

HTML/CSS

Fusionner deux marges verticales

Sujets relatifs
Fusionner des champs :)	[vba]Ignorer marges d'impressions
fusionner plusieurs tables mysql en une seule...(bis)	fusionner plusieurs tables mysql en une seule...
[Java] Fusionner des types "Enumeration"	[CSS] Mac : Problèmes divers - PART II : IE Mac et les marges
CSS - probleme de marges avec IE par rapport à FIREFOX	ACCESS - Modif marges d'un état par VBA
Marges négatives sous Netscape	[LaTeX] Réduction des marges autour du texte sur A4
Plus de sujets relatifs à : Fusionner deux marges verticales

Page générée en 0.052 secondes