Centre conteneur div, apparaît scrollbar

je suit la structure du site html:Centre conteneur div, apparaît scrollbar

<body> 
    <div id="header"></div> 
    <div id="container">  
     <div id="util_header"></div> 
     <div id="contentwrapper" class="frontpage">Content</div> 
    </div> 
    </body>

Maintenant, je veux centrer le #container. Les travaux suivants lorsque je demande:

css

#container { 
    width: 960px; 
    margin: auto; 
    background:red; 
} 

#util_header{ 
    width: 100%; height:32px; 
    position: relative; 
    background:url('../images/logo.png') no-repeat #eeeeee; 
    border-top:1px solid #b6bac0; 
} 

#header { 
    width: 100%; height:32px; 
    position: absolute; 
    background:#eeeeee; 
    border-top:1px solid #b6bac0; 
} 

#contentwrapper { 
    float: left; 
    position: relative; 
    height: auto; 
    background:red; 
}

Les centres magin: auto; du conteneur. Mon problème est que j'ai besoin que le conteneur soit plus grand, mais quand j'augmente la largeur de 960 à 980, j'obtiens une barre de défilement verticale. J'ai joué avec les css mais je n'ai aucune idée de comment gérer ce problème.

Des idées?

Source

2010-12-15 Lost in OWL

Vous devriez lire un peu sur le centrage vertical (j'aimerais que ce soit si simple): http://blog.themeforest.net/tutorials/vertical-centering-with-css/. – Blender

@ArtWorkAD,

CSS3 introduit le modèle de boîte flexible, peut-être vous pouvez l'utiliser selon l'audience de votre site ...

donc à Verticalement & éléments Horizontalement bloc de centre de niveau dans l'élément de corps, vous auriez juste besoin d'écrire cette déclaration CSS:

body { 
    display: box; 
    box-orient: horizontal; 
    /* horizontally centered */ 
    box-pack: center; 
    /* vertically centered */ 
    box-align: center; 
    width: 100%; 
    height : 100%; 
}

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

modifier

Pour avoir un large soutien du navigateur, vous pouvez toujours compter sur hacks CSS et faire une supercherie de marge négative comme on le voit sur http://www.jakpsatweb.cz/css/css-vertical-center-solution.html ;)

Oh, et si vous ne voulez pas une barre de défilement du tout, assurez-vous que vous avez mis un débordement: caché sur l'élément du corps.

Source

2010-12-15 05:24:46

* pleure *. Maintenant que CSS3 m'a complètement étonné, comment dois-je faire pour développer pour les utilisateurs d'Internet Explorer? Il supporte à peine CSS2, et les utilisateurs IE sont * encore * en transition vers IE7/IE8. * sanglots * – Blender

@Blender, nous devons juste espérer que MSFT sera prêt à supporter la spécification CSS3 complète avec IE9, mais sérieusement j'en doute ... –

J'espère que certains développeurs web/hackers créent un ver internet déchaîné qui installe Chrome 9 Dev (ou FF4 pour les faibles de cœur) sur chaque machine Windows. Je donnerais de l'argent à un tel projet (anonymement: P). – Blender

Centre conteneur div, apparaît scrollbar

Répondre

Questions connexes