Comment les marges fonctionnent-elles avec le positionnement div?

La div #content contient la majeure partie du contenu Web. Comme vous pouvez le voir ci-dessous, il y a une marge supérieure de 280px, car c'est la hauteur de l'image d'en-tête du site, qui est placée dans le 'corps' en arrière-plan (image/sky1.jpg).Comment les marges fonctionnent-elles avec le positionnement div?

Comment puis-je positionner un div en tant que support au-dessus du « marge » des #content div afin que je puisse placer mes #navigation, #Title divs dessus de l'image d'en-tête? Le #top-float div juste au-dessus du div #content était le début mais chaque fois que j'ajoute plus à la hauteur, la 'marge' est affectée en la poussant en dessous.

J'ai essayé de mettre le <div id="top-float></div> au-dessus du <div id="content"></div> dans le html. Est-ce ainsi que je devrais le positionner?

html { 
    background: #73ADD7 url(images/gradient.gif) repeat-x; 
} 
body { 
    padding: 0; 
    margin: 0; 
    background:url(images/sky1.jpg) no-repeat center top; 
    color: #666; 
    width: 100%; 
    display: table; 
} 
#top-float{ 
    padding-left:2.3em; 
    padding-right:2.3em; 
    height:10em; 
} 
#content { 
    width: 890px; 
    margin: 280px auto 0; 
    background: #fff; 
    border: solid 0px #ccc; 
    padding: 0px; 
} 
#footer { 
    width: 890px; 
    margin: px auto 0; 
    background:url(images/footer-bg.jpg) 
    no-repeat center bottom #fff; 
    border: solid 0px #ccc; 
    height:250px; 
}

Source

2009-07-23 Anonymous

Essayez de corriger la langue (ponctuation). C'est assez épuisant de lire comme ça. – weiqure

C'était un concours d'édition –

@weiqure - ne vous inquiétez pas, au moins 4 autres personnes écraseront les modifications des autres :) –

La meilleure façon serait de donner à votre #top-float une hauteur de 280px et déposez-le top-margin pour #content en tant que tel:

<html> 
    <head> 
    <style type="text/css"> 
     html { 
     background: #73ADD7 url(images/gradient.gif) repeat-x; 
     } 
     body { 
     padding: 0; 
     margin: 0; 
     background:url(images/sky1.jpg) no-repeat center top; 
     color: #666; 
     width: 100%; 
     display: table;  
     } 
     #top-float{ 
     margin: 0; 
     padding: 0 2.3em; 
     height:280px; 
     } 
     #content { 
     width: 890px; 
     margin: 0 auto; 
     background: #fff; 
     border: solid 0px #ccc; 
     padding: 0px; 
     } 
     #footer { 
     width: 890px; 
     margin: 0 auto; 
     background:url(images/footer-bg.jpg) 
     no-repeat center bottom #fff; 
     border: solid 0px #ccc; 
     height:250px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="#top-float"> 
    </div> 
    <div id="#content"> 
    </div> 
    <div id="#footer"> 
    </div> 
    </body> 
</html>

Si vous avez besoin em taille, puis donner aux enfants de taille #top-float em , et assurez-vous de donner #top-floatoverflow: hidden;

Si vous souhaitez que votre contenu apparaisse ve votre tête dans votre balisage à des fins de référencement, vous pouvez effectuer les opérations suivantes:

<html> 
    <head> 
    <style type="text/css"> 
     html { 
     background: #73ADD7 url(images/gradient.gif) repeat-x; 
     } 
     body { 
     padding: 0; 
     margin: 0; 
     background:url(images/sky1.jpg) no-repeat center top; 
     color: #666; 
     width: 100%; 
     display: table;  
     } 
     #top-float{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     padding: 0 2.3em; 
     height:280px; 
     } 
     #content { 
     width: 890px; 
     margin: 280px auto 0; 
     background: #fff; 
     border: solid 0px #ccc; 
     padding: 0px; 
     } 
     #footer { 
     width: 890px; 
     margin: 0 auto; 
     background:url(images/footer-bg.jpg) 
     no-repeat center bottom #fff; 
     border: solid 0px #ccc; 
     height:250px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="#content"> 
    </div> 
    <div id="#footer"> 
    </div> 
    <div id="#top-float"> 
    </div> 
    </body> 
</html>

Source

2009-07-23 18:37:57

Merci beaucoup pour ce champion! ouais aussi merci à tous ceux qui ont répondu. C'est un site génial je suis juste un newbie.thank vous. –

enlèverait juste la marge supérieure de votre div de contenu et ajoutez l'espace réservé au-dessus de la hauteur spécifiée.

HTML snip:

<body> 
    <div id="header">Stuff</div> 
    <div id="content">Body stuff.../div> 
</body>

et CSS:

#content { 
    margin-top:0; 
} 

#header { 
    height:280px; 
}

S'il est plus logique pour les informations d'en-tête supplémentaire pour être dans le div de contenu (sémantiquement), vous pouvez utiliser une marge négative .

HTML snip:

<body> 
    <div id="content"> 
    <div id="header">Stuff</div> 
    Body stuff... 
    </div> 
</body>

et CSS:

#content { 
    margin-top:280px; 
} 

#header { 
    margin-top:-280px; 
}

Source

2009-07-23 18:38:28

Il est un peu réponse délicat cela sans voir aussi votre code HTML, mais quelques suggestions:

Placez votre # top-float div en dehors de votre contenu div
Utilisez négatif marges
Mettez votre contenu div vider avec le haut du navigateur avec un div en-tête à l'intérieur.Ensuite, placez votre image d'en-tête dans votre div d'en-tête comme l'image d'arrière-plan
il ne ressemble pas à vous CENTRAGE quoi que ce soit de sorte que vous pouvez également utiliser le positionnement absolu pour l'en-tête div

Comme toujours, il n'y a pas un manière d'accomplir cela.

Source

2009-07-23 18:38:38

Vous pouvez utiliser un positionnement absolu ou fixe pour votre div # top-float. Pourquoi voulez-vous placer l'image d'en-tête en tant qu'image d'arrière-plan?

Je pense que vous trouverez que tout cela fonctionne plus facilement si vous ne mettez pas l'image d'en-tête du site comme arrière-plan. Il est également courant que le fait de cliquer sur le logo du site (que je suppose être dans votre image d'en-tête) ramène l'utilisateur à la page d'accueil. Faire du logo du site une image d'arrière-plan désactive efficacement cette fonctionnalité.

Source

2009-07-23 18:40:36

Comment les marges fonctionnent-elles avec le positionnement div?

Répondre

Questions connexes