Il ne doit pas y avoir d'espace entre ces deux éléments de bloc

Ma page a une disposition en trois colonnes, les colonnes gauche et droite étant positionnées absolument, tandis que la colonne centrale utilise un positionnement relatif. Les trois colonnes doivent être supprimées du haut de la page à une distance de 184px, mais pour une raison quelconque, la distance entre le haut de la page et la colonne centrale est supérieure à 184px. Je réalise que la colonne centrale est toujours dans le flux normal du document, mais comme le remplissage et les marges sont tous les deux mis à zéro, alors l'en-tête et la colonne centrale doivent être en contact. Une idée de ce qui se passe?Il ne doit pas y avoir d'espace entre ces deux éléments de bloc

body 
{ 
    padding:0px; 
    margin:0px; 
} 

#header 
{ 
    padding:0px; 
    margin:0px; 
    background-image:url(images/HeaderSlice.gif); 
    background-repeat:repeat-x; 
    height:184px; 
} 

#centerCol 
{ 
    position:relative; 
    margin-left:200px; 
    margin-right:200px; 
} 


#leftCol 
{ 
    position:absolute; 
    top:184px; 
    left:0px; 
    width:200px; 
} 

#rightCol 
{ 
    position:absolute; 
    top:184px; 
    right:0px; 
    width:200px; 
}

fichier HTML:

... 
<body> 
    <div id="header">...</div> 
    <div id="centerCol">...</div> 
    ...

Thanx

EDIT:

Cela fonctionne maintenant. A l'intérieur #centerCol J'ai eu un autre div (avec id = » UserManagemeNT ») et comme il est apparu la marge supérieure d'un intérieur #userManagement chevauchée par la marge supérieure de #centerCol

<div id="centerCol"> 
    <div id="userManagement">...</div> 
</div> 

#userManagement 
{ 
    margin-top:16px; 
    margin-left:10px; 
    font-size:12px; 
}

merci à tous de m'avoir aidé

Source

2010-01-29 carewithl

Utilisez-vous un doctype valide? – Sampson

a. Le #header peut avoir un contenu qui provoque un débordement - de sorte qu'il se développe sur sa hauteur. essayez d'ajouter "overflow: hidden" à l'élément #header. b. Êtes-vous certain que centerCol a margin-top et padding-top mis à 0? votre extrait ne montre pas cela.

c. ouvrez la page dans Firefox avec FireBug, et regardez les données de positionnement dans la fenêtre firebug. cela donne un bon aperçu des problèmes de positionnement

Source

2010-01-29 20:38:18

et assurez-vous également que html et le corps a la marge et le remplissage mis à 0, comme l'a souligné jpalbuz. jetez un oeil à la technique reset css de YUI - il vise à apporter un comportement par défaut à travers les navigateurs –

salut, j'ai fait une erreur stupide mais cela fonctionne maintenant. Voir mon article EDITed – carewithl

cool. Je suis content d'avoir pu aider. Rien de stupide à ce sujet; nous faisons tous ces erreurs tout le temps. CSS-ing est un processus d'apprentissage constant :) –

Vous pouvez utiliser la balise de classe html, pour se débarrasser d'un remplissage probablement ajouté en haut de la page. Ceci est provoqué par votre navigateur spécifique (Firefox?) Puisque chrome ne montre pas ce comportement.

Ce serait:

html, body 
{ 
     margin:0; 
     padding:0; 
}

Source

2010-01-29 20:37:32 jpabluz

salut, j'ai fait une erreur stupide mais ça marche maintenant. Voir mon article EDITed – carewithl

Il ne doit pas y avoir d'espace entre ces deux éléments de bloc

Répondre

Questions connexes