position: absolute и ширина блоков, убрать горизонтальный скроллинг

Question

[Александр Баумгертнер]

как можно убрать прокрутку со страницы http://deusmodus.ru/lab/, при условии ширины контента 1008 px? Пробовали разные варианты, но ширина ушек все равно учитывается и появляется полоса горизонтального скроллинга.

Ширина ушек фиксированная, одинаковая, правое ушко должно быть справа прибито к серому контейнеру, левое — к левому.

Спасибо!

Comments

[Александр Баумгертнер]

Answer 1

[Анатолий]

Вынесите контейнеры b-page-ushko-* наружу, убирайте лефты, райты и абсолюты, левому флоат лефт, правому флоат райт

Comments

[Александр Баумгертнер]

пока варианты с обтеканием самые близкие цели — у таких элементов не учитывается ширина, как нам и требуется :)

Answer 2

[MT]

overflow: hidden?

Comments

[Александр Баумгертнер]

решение простое и очевидное, но нам не подходит по ТЗ — у пользователя должна остаться возможность с помощью мышки посмотреть всю страницу.

[MT]

Используйте JavaScript для скрытия правого «ушка» (display: none) и отмены overflow: hidden при сужении окна до ширины, меньшей ширины вашего центрального блока. (Оба правила, разумеется, можно и нужно привязать к классу элемента BODY или HTML).

[Александр Баумгертнер]

Хм, интересная идея, попробую — отпишусь :)

[MT]

Кстати, можно сделать и без JS:
вынести «уши» в отдельный контейнер с шириной 100% и задать overflow: hidden именно ему (а на всему BODY), подложив его под основной центрированный блок (которому, в свою очередь, задать position: relative с z-index’ом по вкусу) абсолютным позиционированием. Уши внутри него позиционировать тоже абсолютно. Например, правое:
margin-right: -504px; left: 50%; top: 0;.

Answer 3

[Delka]

сделайте ушки position: fixed — горизонтальный скролл для fixed-элементов не появляется.

Comments

[Александр Баумгертнер]

Спасибо! Попробуем как вариант, скроллинг точно не появляется.

Answer 4

[pel]

Правое ушко должно быть справа прибито к серому контейнеру или к краю экрана? Ширина ушек фиксированная?

Comments

[Александр Баумгертнер]

Ширина ушек фиксированная, одинаковая, правое ушко должно быть справа прибито к серому контейнеру, левое — к левому :).

[pel]

Как-нибудь так?

.b-page-container-wrapper {
margin: 0 auto;
position: relative;
width: 1008px;
}

.b-page-ushko-left {
border: 1px solid;
position: absolute;
left: -100px;
width: 100px;
}
.b-page-ushko-right {
border: 1px solid;
position: absolute;
right: -100px;
width: 100px;
}

.b-page-container {
background: none repeat scroll 0 0 gray;
margin: 0 auto;
width: 100%;
height: 1005px;
z-index: 0;
}


[pel]

100 и -100px — ширина ушек

[Александр Баумгертнер]

.b-page-container должен быть 1008.

И прокрутка все равно остается :(

[pel]

А так?


b-page-ushko-left
b-page-ushko-right

HEADER

centercolumn
rightcolumn
leftcolumn




footer







.b-page-container-wrapper {
margin: 0 auto;
overflow-x: hidden;
position: relative;
width: 100%;
}
.b-page-ushko-left {
border: 1px solid;
left: -100px;
position: absolute;
width: 100px;
}
.b-page-ushko-right {
border: 1px solid;
position: absolute;
right: -100px;
width: 100px;
}
.b-page-container {
background: none repeat scroll 0 0 gray;
height: 1005px;
margin: 0 auto;
position: relative;
width: 1008px;
z-index: 0;
}

Правда, так при размерах окна меньше 1008 горизонтальный скролл не появляется… А, я так понимаю, в этом случае он как раз надо чтоб был…

[pel]

Ой-ой! Простите, некрасиво вышло.
В предыдущем ответе первая часть — html.

<div class="b-page-container-wrapper" >

    <div class="b-page-container">
		
		<div class="b-page-ushko-left"><a href="b-page-ushko-left">b-page-ushko-left</a></div><!-- /b-page-ushko-left -->
		<div class="b-page-ushko-right"><a href="b-page-ushko-right">b-page-ushko-right</a></div><!-- /b-page-ushko-right -->


        <div class="b-page-header">HEADER</div>

        <div class="b-page-mainpart">

            <div class="b-page-mainpart-centercolumn">centercolumn</div>
            <div class="b-page-mainpart-rightcolumn">rightcolumn</div>
            <div class="b-page-mainpart-leftcolumn">leftcolumn</div>

        </div>
        <!-- /b-page-mainpart -->

        <div class="b-page-footer">footer</div>

    </div>
    <!-- /b-page-container -->

</div>
<!-- /b-page-container-wrapper -->