Проблема с фоновыми элементами вокруг основного контента - PullRequest
Новая
       10

Проблема с фоновыми элементами вокруг основного контента

1 голос
/ 02 декабря 2009

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

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

Я достиг двух орнаментов, поместив два абсолютно расположенных элемента с фонами в относительно расположенный элемент: 

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

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

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

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

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

Ответы [ 2 ]

1 голос
/ 03 декабря 2009

В итоге было решено создать div, который открывается сразу после тела и заключает в себе все содержимое, закрывающееся прямо перед телом. Стиль div: 

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

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

Нет полосы прокрутки, кроссбраузер, стильный.

0 голосов
/ 02 декабря 2009

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

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

Обновление: 

<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>
...