2009-12-02 2 views
1

У меня есть этот сайт, где мне нужно разместить два изображения в верхней части страницы с каждой стороны содержимого. Временно его можно достичь [удалено].Проблема с элементами фона вокруг основного содержимого

Если ваше разрешение достаточно широкое, вы можете видеть как правое, так и левое красное рождественское украшение, выровненное по основному содержимому. Однако правильные не выводятся из потока страниц и создают горизонтальную полосу прокрутки, если браузер меньше, чем ~ 1300 пикселей.

я достиг два украшений пути размещения два абсолютно позиционированных див с опытом работы в относительно расположенной DIV:

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

Хотя абсолютно позиционируемые элементы должны быть выведены из потока документов, второе изображение не является: (Таким образом, появляется нижняя полоса прокрутки

Что я пробовал:.

  • делает изображение обоих украшений с 910px (ширина содержимого) ЕМ pty отдельно и используя только один абсолютный div вместо двух: тот же вопрос
  • добавление вышеупомянутого изображения в no-repeat top center фон <html>, в результате чего отображается только один фон. Либо у меня есть снежинки на body bg, либо красные орнаменты на сплошном белом фоне. Последнее зависит от того, какой из двух элементов (body или html) имеет изображение в качестве фона.
  • размещение дивы изображений в абсолютной DIV и сделать два относительные (противоположность текущей ситуации) - тот же вопрос и не отображается на < IE8

Я знаю, и я извиняюсь за это большой проблемой, и трудно понимать. Я много исследовал, и я не в курсе. Любое возможное решение для опроса было бы весьма полезным. Кроме того, я понимаю, что кодирование сайта, на котором я связан, находится на грани ужасного, но я только начал работать над этим, поэтому никаких комментариев по этому поводу, пожалуйста :)

+0

Сайт выглядит хорошо для меня и его ожидаемого поведения, поэтому, если ширина вашего браузера меньше 1300 пикселей ... что вы ожидаете? Если отображаются оба изображения, что происходит с содержимым между ними, когда ширина браузера уменьшается? Поправьте меня, если я понял это неправильно. Спасибо :) –

ответ

1

Решение в конце концов должно было создать DIV, который открывается сразу после тела и упаковывает все содержание, закрытие перед телом делает. Стиль DIV:

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

сама PNG является два украшения, которые я хотел быть на каждой стороне тела. Обе фотографии были вставлены в один с пустым промежутком 910px между - точной шириной тела.

Нет полос прокрутки, крестовина, стильно.

0

попробуйте установить этот div (# alignmen) с помощью :

переполнение: скрыто;

Update:

<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> 
+0

Это не помогло; во всем окне браузера появляется полоса прокрутки, а не div. Основное содержание сайта также находится в # выравнивании.Добавление вашего решения скрывает украшения вообще, но спасибо за попытку помочь :) – raveren

+0

Не могли бы вы добавить мое рекомендуемое исправление на сайт. Поэтому я мог бы взглянуть на живой образец. Буду ждать. – Tebo

+0

в прямом эфире! посмотри, я уберу его через полчаса или когда вы опубликуете – raveren

Смежные вопросы