Div контейнер для BG без полос прокрутки - PullRequest
Новая
       13

Div контейнер для BG без полос прокрутки

2 голосов
/ 24 января 2012

Я настроил в моей таблице стилей контейнер (#container), содержащий заголовок / content / sidebars / footer / etc, и поместил его в основную оболочку (#mainwrapper). Эффект, которого я пытаюсь достичь, похож на сайт College Humor; реклама на стороне. Я хотел бы иметь разделение слева и справа от контейнера. Что я сделал, так это настроил. 

<div id="mainwrapper">
<div id="leftwall"></div>
<div id="container"></div>
<div id="rightwall"></div>
</div>

По сути, я хочу иметь возможность поместить изображение (или изображение bg) в левый и правый разделы, однако я не хочу, чтобы оно вызывало полосу прокрутки x. Я только хочу, чтобы это было видно, если разрешение зрителя достаточно высокое. В противном случае просто отобразите # container.

Я установил для них значение float: left, чтобы они отображались слева и справа от контейнера, но я застрял в том, как заставить их отображаться в качестве фонового изображения.

Причина, по которой я хочу сделать это, заключается в том, что у меня уже есть фоновое изображение, и я хочу, чтобы оно было оптимизировано. Таким образом, вместо большого изображения, которое охватывает 960+ пикселей (ширина #container), я могу иметь 2 изображения шириной 100 пикселей. (ширина #leftwall и #rightwall)

Надеюсь, это понятно, и спасибо всем, кто пытается помочь заранее!

Хорошего дня, Брайан.

Ответы [ 3 ]

1 голос
/ 26 марта 2012

Я понимаю, что вы хотите.В эти дни были добавлены новые медиа-запросы для создания дизайна такого типа.

Вы можете определить его в своих файлах CSS для определенного разрешения или мобильных устройств. 

<code>@media screen and (min-width: 1080px){
#leftwall, #rightwall{display:block;}
}

@media screen and (max-width: 1024px){
#leftwall, #rightwall{display:none;}
}

Ниже приведена ссылка, где вы можете узнать, как использовать эти запросы.http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Надеюсь, это поможет, ура,

0 голосов
/ 26 января 2012

Я настроил скрипку с тем, что я думаю, что вы пытаетесь достичь, вам просто нужно изменить некоторые цифры, чтобы соответствовать вашим потребностям: http://www.jsfiddle.net/KrfVR/14/

Отрегулируйте размер окна результатов, чтобы увидеть, как боковые элементы появляются / исчезают.

0 голосов
/ 24 января 2012

Я не уверен, чего вы хотите достичь; может быть, вы покажете, как выглядит ваш css, но пытались ли вы дать минимальную ширину внешним контейнерам?

...