Wrapper DIV dans 100% largeur site Web

Im créer un site Web où l'en-tête, pied de page, le corps sont tous 100% de largeur de la page, mais j'ai besoin de tout le contenu pour être centré de la page, peu importe la résolution. J'ai essayé d'utiliser un wrapper, mais l'en-tête et les autres éléments ne sont que de 100% de la largeur de l'enveloppe et non de la page.Wrapper DIV dans 100% largeur site Web

Source

2009-12-02 Keiron Lowe

Je vais sur une branche et devinez que la couleur/l'image de fond est 100% large, mais vous voulez que le contenu réel soit centré (avec une largeur fixe?). Voici un exemple de code qui utilise un wrapper interne div sur chaque élément pour conserver le contenu interne centré. Je recommanderais de faire quelque chose de totalement différent et éventuellement d'utiliser des arrière-plans répétitifs sur les éléments html et body, mais je ne sais pas à quoi ressemble votre page.

So .., cela devrait fonctionner, mais les puristes HTML d'alarme en raison de la majoration supplémentaire :)

Vous pouvez voir un (super laid) exemple de cette méthode on this sample page je mets ensemble.

CSS:

.wrapper { 
    width: 960px; /* fixed width */ 
    margin: 0 auto; /* center */ 
}

HTML:

<div id="header"> 
    <div class="wrapper"> 
    <h1>My Title</h1> 
    </div> 
</div> 
<div id="content"> 
    <div class="wrapper"> 
    <h2>Sub Title</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
     do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
     nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
</div> 
<div id="footer"> 
    <div class="wrapper"> 
    <p class="credits">Copyright 2009 by Your Company.com, LLC</p> 
    </div> 
</div>

Source

2009-12-02 20:44:00

vous ne pouvez pas le faire avec un élément div sauf s'il a une largeur spécifiée.

pour le texte juste, vous pouvez utiliser

<div style="text-align: center;">text content</div>

Source

2009-12-02 20:31:13

cela devrait fonctionner pour vous:

Le CSS:

body { 
background-color: #e1ddd9; 
font-size: 12px; 
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif; 
color:#564b47; 
margin: 20px 140px 20px 140px; 
text-align: center; 
} 
#content { 
width: 100%; 
padding: 0px; 
text-align: left; 
background-color: #fff; 
overflow: auto; 
}

Le code HTML:

<body> 
<div id="content"> 
<p><b>center</b><br /><br /> 
This BOX ist centered and adjusts itself to the browser window.<br /> 
The height ajusts itself to the content.<br /> 
</div> 
</body>

Cet exemple a été prise sur ce site, que j'ai fou e il y a un moment et toujours s'y référer pour les modèles css simple et agréable, propre: http://www.mycelly.com/

Source

2009-12-02 20:34:10 Upgradingdave

avoir un jeu avec ce

body { 
    text-align: center; 
    position: relative; 
} 

#content { 
    width: 100%; 
    height: auto; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
}

Puis dans le code HTML

<html> 
<body> 
<div id="header"></div> 
<div id="content"> 
    <!-- place all of your content inside of here --> 
</div> 
</body> 
</html>

Source

2009-12-02 20:35:02 Matt

la 'marge @ Matt-left' et' marge right' ne rien significatif parce que la largeur est '' 100% . –

Wrapper DIV dans 100% largeur site Web

Répondre

Questions connexes