Фоновые изображения вокруг гибкого контента? - PullRequest
Новая
       5

Фоновые изображения вокруг гибкого контента?

2 голосов
/ 27 января 2010

Я пытаюсь получить фоновые изображения вокруг содержимого div. Дело в том, что содержимое div должно иметь гибкую ширину (без проблем). Фоновые картинки всегда должны быть слева и справа прикреплены к контенту div. НО: горизонтальная полоса прокрутки должна срабатывать только тогда, когда пользователь уменьшает окно до ширины содержимого div.

Изображение: Структура

Я придумал что-то вроде этого: 

<div>
    <div class="header">/div>
 <div class="wrapper">  
     <div class="left"></div>
     <div class="right"></div>
     <div class="content">Content</div>
 </div>
    <div class="footer">/div>
</div>



.wrapper{
 margin:auto;
 width:950px;
position:relative;
}

.left {
background:transparent url(../images/left.png) no-repeat scroll 0 0;
position:absolute;
top:0;
left:-120px;
width:120px;
height:500px;
}

.right {
background:transparent url(../images/right.png) no-repeat scroll 0 0;
position:absolute;
top:0;
right:-120px;
width:120px;
height:500px; 
}

Полосы прокрутки всегда появляются, когда окно достигает нужного абсолютного значения div. Мне нужно, чтобы они составляли два div (влево / вправо), потому что div содержимого должен быть гибким и не скрывать фон, когда он простирается на многое.

Кто-то получил технику для этого?

Ответы [ 2 ]

3 голосов
/ 28 января 2010

у вас есть неназванный простой корневой контейнер div.

Добавьте этот стиль для этого div (или укажите имя класса / id для замедления wire css). Основная точка - min-width ... Сохраняйте то же самое с шириной вашего контейнера div.

также добавление body,html{margin:0;padding:0;} будет лучше. 

style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"

это будет нормально работать, кроме ie6. Например, вы можете применить магию js.

Давайте предположим, что вы используете библиотеку jquery и вы дали имя id "shell" вашему корневому контейнеру div. Тогда попробуйте этот скрипт только для ie6. (создать исключение или что-то в этом роде): 

$(document).ready(function(){
 $('#shell').each(function(){
  var that = this;
  var contentWidth = 950;
  check();
  $(window).resize(check);
  function check() {
   var winWidth = Math.ceil($('body').width());
   if(winWidth <= contentWidth) {
    $(that).css({'width':contentWidth});
   } else {
    $(that).css({'width':'100%'});
   }
  }
 });
});

Этот скрипт сделает ширину "оболочки" 100%. (если ширина браузера больше 950px), в противном случае он заблокирует ширину оболочки с 950px, и это активирует полосу прокрутки.

1 голос
/ 28 января 2010

Я сделал нечто подобное для веб-сайта, решение, с которым я пришел, было следующим:

Я создал изображение с левым и правым содержимым на фоне и пространством содержимого в середине, чтобы он был сплошным цветом, даже если изображение имеет размер 1400 x 539, его вес составляет 12 КБ, поэтому оно довольно хорошее. 

<html>
  <body>
    <div id="wrapper"></div>
  </body>
</html>


body {
  background: #fff url(left-and-right.jpg) no-repeat center top;
  text-align: center;
}

#wrapper {
  margin: auto;
  text-align: left;
  width: 960px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...