Problème avec les éléments d'arrière-plan autour du contenu principal

J'ai ce site où j'ai besoin de placer deux images en haut de la page de chaque côté du contenu. Temporairement, il peut être atteint [enlevé].Problème avec les éléments d'arrière-plan autour du contenu principal

Si votre résolution est assez large, vous pouvez voir à droite et à gauche les décorations de Noël rouges sont alignés sur le contenu principal. Cependant, les bons ne sont pas retirés du flux de la page et créent une barre de défilement horizontale si le navigateur est plus petit que ~ 1300px.

J'atteint les deux ornements en plaçant deux divs position absolue avec des fonds dans une div position relative:

<div id="alignment"> <!-- position:relative --> 
<div></div> <!-- first image: position:absolute;right:-210px --> 
<div></div> <!-- second one: position:absolute;right:915px --> 
</div>

Bien que les éléments en position absolue devraient être retirés du flux de documents, la deuxième image n'est pas: (Ainsi, la barre de défilement en bas apparaît

Ce que j'ai essayé.

faire une image des deux ornements 910px (la largeur du contenu) des em espace pty séparé et en utilisant seulement un div absolu au lieu de deux: même numéro
en ajoutant l'image ci-dessus pour être le fond no-repeat top center de <html> qui a abouti à un seul fond d'affichage. Soit j'ai les flocons de neige sur le body bg ou les ornements rouges sur un fond blanc uni. Ce dernier dépend de quel élément (corps ou html) a quelle image comme arrière-plan.
plaçant divs d'image dans un div absolu et de faire les deux par rapport (à l'opposé de la situation actuelle) - même problème et ne pas afficher sur < IE8

Je sais et je suis désolé pour cela est un gros problème et dur comprendre. J'ai beaucoup étudié et je n'ai plus d'idées. Toute solution possible à essayer serait grandement appréciée. Aussi, je me rends compte que le codage du site auquel je suis lié est sur le point de terribles, mais je viens de commencer à travailler dessus, donc pas de commentaire là-dessus, s'il vous plaît :)

Source

2009-12-02 raveren

Le site me semble bien et c'est le comportement attendu, donc si la largeur de votre navigateur est inférieure à 1300px .. qu'est-ce que vous attendez? Si les deux images sont montrées ce qui arrive au contenu entre, quand la largeur du navigateur est réduite? .. Corrigez-moi Si j'ai mal compris. Merci :) –

La solution à la fin était de créer un div qui ouvre juste après le corps et enrobe tout le contenu, juste avant la fermeture ne corps. Le style de la div:

background: url('/client/images/xmas-burbulai.png') no-repeat top center;

Le png lui-même est les deux décorations que je voulais être de chaque côté du corps. Les deux images ont été collées en une avec un vide vide de 910px entre - la largeur exacte du corps.

Pas de barre de défilement, de style croisé, élégant.

Source

2009-12-03 16:44:00 raveren

essayez de définir cette div (#alignmen) avec :

dépassement: masqué;

Mise à jour:

<div id="main"> //Position this relatively 
    <div> //Positon this absolutely, this height should be the max of the two floated divs 
    //In here 
    <div>Left</div>//Float Left 
    <div>Right</div>//Float Right 
    </div> 
<div>

Source

2009-12-02 18:08:32 Tebo

Cela n'a pas aidé; toute la fenêtre du navigateur reçoit la barre de défilement et non cette div. Le contenu principal du site est également dans le #alignment.Ajouter votre solution cache les décorations que ce soit, mais merci d'essayer d'aider :) – raveren

Pourriez-vous ajouter mon correctif suggéré sur le site. Donc, je pourrais jeter un coup d'oeil à l'échantillon vivant. J'attendrai. – Tebo

en direct! allez le voir, je vais l'enlever dans une demi-heure ou quand vous postez – raveren

Problème avec les éléments d'arrière-plan autour du contenu principal

Répondre

Questions connexes