2009-10-28 13 views
3

Je ne suis pas sûr que le titre décrive vraiment ce que j'essaie de faire. En fait, il s'agit d'une utilisation assez simple et répandue sur Internet:Comment afficher une bande de largeur de 100% dans un design CSS en utilisant un plan de grille fixe?

Je veux en arrière-plan une certaine largeur de rayures liquide/pleine (avec la même hauteur de certains div de la conception) tandis que mon contenu utilise un Blueprint fixe- la grille.

Par exemple, ce site Web: intient.com fait exactement ce que je cherche. Une bande de fond en noir (et une autre en gris) qui est la largeur du liquide et le contenu en utilisant une grille (mais pas Blueprint après avoir regardé le CSS)

J'utilise une grille Blueprint de largeur fixe (950px) pour afficher n'importe quel contenu. Savez-vous comment je peux faire ça? Avec Blueprint? Et sans une image d'arrière-plan statique ...

Merci

Répondre

9

Dans Blueprint, vous faites ceci:

<div class="stripeContainer"> 
    <div class="container"> 
    <div class="span-8">Column 1</div> 
    <div class="span-8">Column 2</div> 
    <div class="span-8 last">Column 3</div> 
    </div> 
</div> 
<div class="container"> 
    <div class="span-12">Body goes here</div> 
    <div class="span-12 last">Some sort of menu perhaps</div> 
</div> 

Ensuite, vous le style .stripeContainer:

.stripeContainer 
{ 
    width: 100%; /* this is usually implied */ 
    background-color: pink; 
} 
+2

+1 pour la couleur de fond : rose; : D – Egon

+0

Bonjour, J'ai essayé votre solution mais elle ne fonctionne pas. Le "stripeContainer" rose est affiché devant le corps et non en arrière-plan. Mon code est:

..
avec style: corps #header {height: 120px; couleur de fond: # 000000; affichage: inline-block; débordement caché; float: à gauche; marge-droite: 0; width: 950px;} – fabien7474

+0

Ok. Ça marche. J'avais besoin d'ajouter au style stripeContainer ce qui suit: "position: absolute; z-index: -1; width: 100%" Thx – fabien7474