Comment créer une barre horizontale qui s'étend à travers l'écran mais n'est pas dans la balise body?

Question très simple!

J'ai un motif de fond qui se répète tout au long de la balise body. Je voudrais aussi avoir une barre supérieure et la barre du bas (tête/pied de page) pour répéter l'opération sur l'axe x - la création d'un sandwich de nice style de couleur, de motif et de couleur solide de nouveau pour l'arrière-plan.

Comment cela peut-il être réalisé?

Les barres doivent être à 100% de largeur, et c'est pourquoi ce n'est pas le contenu de l'emballage ou de l'en-tête/pied de page div tels qu'ils sont fixés à 1000px de large. Les barres de couleur devrait aller à travers l'ensemble de l'écran.

OriginalL'auteur Tigger | 2011-06-01

  1. 6

    Vous devez:

    • Vous assurer que vous avez html, body { margin: 0; padding: 0 }
    • Ajouter le #headerBar et #footerBar à l'extérieur de votre "contenu de l'emballage".

    Quelque chose comme ceci: http://jsfiddle.net/GDDA5/

    html, body {
    margin: 0;
    padding: 0
}
#contentWrapper {
    width: 300px;
    margin: 0 auto;
    background: #ccc;
    height: 100px
}
#headerBar {
    height: 40px;
    background: blue
}
#footerBar {
    height: 40px;
    background: red
}

    Ou si vous voulez les barres à coller à la fenêtre d'affichage et d'être derrière contenu: http://jsfiddle.net/GDDA5/3/

    L'en-tête fonctionne - mon problème est le pied de page. La barre de pied de page est forcé vers le bas sous le contenu réel. Ce que je veux faire est de continuer à l'horizontale derrière le contenu. Je me demandais si une sorte de positionnement ou de z-index truc, c'était nécessaire.
    Avez-vous vérifiez la seconde jsFiddle lien dans ma réponse?
    Oui, je l'ai fait - je vous remercie pour cette réponse. Je suis à la recherche d'une réponse qui est fenêtre indépendante. Voici un site qui a l'en-tête et pied de page avec le même design que je suis en train de réaliser. mwatoday.com/initiatives/mwa_grant_program.aspx
    Après avoir examiné le CSS je vois comment ils ont obtenu le pied de page. Le bleu de pied de couleur est en fait la couleur du corps et ensuite le contenu de l'emballage blanc - créer le sandwich look. Sur mon site - le corps d'arrière-plan est un motif et le contenu wrapper a son propre arrière-plan de sorte qu'il ne fonctionne pas pour ma situation.

    OriginalL'auteur thirtydot

  2. 0

    je suis en retard pour la parité ici, mais d'utiliser css3!

    #selector:after { content: '|' }

    OriginalL'auteur jahrichie

  3. 0

    Vous devriez prendre le pied de page de la div du contenu wrapper div, alors il devrait prendre la largeur du corps dimensions automatiquement, en vous donnant l'effet que vous recherchez.

    OriginalL'auteur Etorres