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

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

скрывать скроллинг overflow-hidden нельзя :)

Спасибо!

Картинка, поясняющая задачу:

0
css html верстка

1 ответов

буквально вчера решал подобную задачу :)
если эл. больше экрана - то скрол появится, вывод: нужно сделать эл. не больше экрана :)
я это сделал так:


$(document).ready(function(){
    var windowWidth = $(window).width();
    //console.log(windowWidth);
    //console.log((windowWidth-986)/2);
    if (windowWidth > 1000) {
        $('#left-link').width((windowWidth-1000)/2);
        $('#right-link').css('left', ((windowWidth-1000)/2 + 1000));
        $('#right-link').width((windowWidth-1000)/2);
    }
    $('#left-link').height($(document).height());
    $('#right-link').height($(document).height());
});
 
где left-link - id элемента <a> левого ушка
а right-link - id элемента <a> правого ушка
1000 - это у меня ширина главной зоны
<a> ушки такие: display:block; position:absolute;

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

тогда уж так


$(function(){
  $(window).resize(function(){ear();});
  ear();
  function ear(){
    $('.l, .r').css({width: ($(window).width() - 1008)/2 + 'px'});
  };
});
 

* {padding:0; margin:0; border:0;}
html, body, .l, .r, .c {height:100%;}
.l, .r {display:block; background:#FF6699; position:absolute; z-index:0; overflow:hidden;}
.c {background:#CCCCFF; width:1008px; margin:0 auto; position:relative; z-index:1;}
.l {left:0;}
.r {right:0;}
 

<a href="#" class="l"></a>
<a href="#" class="r"></a>
<div class="c"></div>
 
1

Попробовал в последних версиях браузеров. Горизонтальная полоска прокрутки появляется только в Firefox.
Мне кажется, полоска появляется из-за правого ушка, которое далеко от и так широкого контента.
Почему бы его не подвинуть ВПЛОТНУЮ к контенту, как левое, изменив для него отступ "left" с 592px до 504px?
Или это противоречит дизайну?

0

Простейший вариант у body поставить overflow-x:hidden, но стрелочками на клавиатуре все равно страницу можно будет двигать по горизонтали.
Вариант по сложнее - http://reaperblind.narod.ru/super-jackup/, в роли ушек там пластики)

0

У тебя в данный момент и так 1184px. У тебя только ширина блока "b-page-container" = 1008px. Плюс пара ушей по 88px. Итого: 1184px.
Позиционирование блока идет по верхнему левому углу. Координаты для двух ушей не могут быть одинаковыми (-504 и 504). Для правого уха left должно быть меньше на ширину этого блока.
Просто попробуй правому уху сделать left: 504. Оно станет возле основного "b-page-container" блока.

P.S.Сам новичок. Могу ошибаться, но вроде все выходит.

0

правое ушко прижато к правому краю, а не к контенту, так и задумано?

0

тогда надо left не -592 и 592 делать, а -504 и 504 пикселя

P.S. 592*2 = 1184 пикселя, а надо по заданию 1008

-1