Mise en page CSS fixe-largeur

Je vise une disposition de largeur fixe, avec width:1008px à travers tous les moniteurs. Voici mon HTML-Mise en page CSS fixe-largeur

<body> 
<div id="god_container"> 
    <div id="root"> 
     ... all content ... 
    </div> 
</div> 
</body>

et CSS -

#god_container{                          
    background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;       
    margin:auto;                          
    position:static;                         
    width:auto;                          
}                              

#root {                            
    background-color:#FFFFFF;                       
    margin:auto;                          
    width:1008px;                          
    color:#000000;                          
    font-family:Verdana,Arial,sans-serif;                    
    font-size:10pt;                         
} 
body{ 
    color:#373737; 
    font:16px arial; 
    line-height:1; 
    background-color:#D4D9DD; 
}

Je pensais que ce serait le résoudre. Mais quand je rends, le css root n'adhère pas à la valeur 1008px. De même, le code background-color de la racine ne montre pas #FFFFFF, c'est-à-dire blanc. Il montre toujours le bodybackground-color. Qu'est-ce que je fais mal?

MISE À JOUR: Pour toute personne intéressée, j'ai trouvé d'excellentes mises en page CSS ready-made à http://www.dynamicdrive.com/style/layouts/category/C12/

Source

2010-11-13 Srikar Appalaraju

Je suggère d'ajouter '#god_container {width: 1008px; } 'à votre css, de cette façon l'élément conteneur de votre page respecte le' width' (aussi, en utilisant 'max-width' et' min-width' pourrait être utile.) –

@david juste essayé à la fois '{largeur .. 'et' max-width: .. '. N'a pas fonctionné –

@Marcel, je * pense * l'intention est de centrer l'arrière-plan à la fois verticalement et horizontalement (si cela est nécessaire avec un fond' repeat-y' est inconnu –

Donner la background-image et la couleur du corps, fait en sorte qu'il est affiché sur toutes les pages, et ont le #god_container agir comme un emballage pour la page, le centrer par margin:0 auto; et lui donner le width:1008px;.

Aussi, vous ne devez pas donner le position:static; à la div d'emballage #god_container, au lieu d'utiliser position:relative; pour vous assurer que tous les divs enfants, sont placés à l'intérieur même si en position absolue. Enfin, en donnant #root un width:100% va placer le div à sa largeur div parent.

Essayez d'utiliser ce CSS:

body{ 
    color:#373737; 
    font:16px arial; 
    line-height:1; 
    background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD; 
} 

#god_container{ 
    margin:0 auto; 
    position:relative; 
    width:1008px; 
} 

#root{ 
    background-color:#FFFFFF; 
    margin:auto; 
    width:100%; 
    color:#000000; 
    font-family:Verdana,Arial,sans-serif; 
    font-size:10pt; 
}

Source

2010-11-13 14:41:28

Merci @Marcel Korpel. –

Essayez le ci-dessous.

donnent l'arrière url du sol au corps principal de sorte qu'il ira à toutes les pages

#god_container{                          
     background:url("/site_media/images/bg-1008.png") repeat-y scroll center center #D4D9DD;       
     margin:auto;                          
     position:static;                         
    text-align:left; 
    width:1008px;                         
    }

Source

2010-11-13 14:38:31 kobe

La lecture des commentaires à sa question révèle qu'il a essayé cela. Bien que ** pourquoi cela n'a pas fonctionné ** est inconnu. –

pardon si cette question semble basique, mais très nouveau pour CSS et j'espérais que les gourous CSS ici pourraient me guider. Pourquoi 'width: 1008px' dans' # god_container' n'a pas résolu le problème? donno ... –

Je ne sais pas si je manque quelque chose ici, mais il pourrait être beaucoup plus simple. Vous n'avez pas besoin d'un wrapper DIV ... le corps peut gérer cela. Tout ce dont vous avez besoin est votre racine DIV.

CSS

body{ 
    background: #D4D9DD url("/site_media/images/bg-1008.png") repeat-y center; 
    color:#373737; 
    font: 16px/1 Arial; 
} 
#root { 
    background: #FFFFFF; 
    color: #000000; 
    margin: 0 auto; 
    width: 1008px; 
}

HTML

<body> 
    <div id="root"> 
     ... all content ... 
    </div> 
</body>

Here ya go: http://jsfiddle.net/XdA92/1/

Source

2010-11-13 23:36:18

ou mieux: supprimez root, nous '' pour le rendu de votre arrière-plan et '' pour le rendu de la racine. – Jan

Répondre

Questions connexes