Как убрать горизонтальный скроллбар при сужении страницы

[skiph]

Размер основной области как положено 1024px, но по дизайну есть выступы из этой области. Например левое меню выступает на 20рх слева, справа должен выступать декоративный элемент на 82рх, также еще блок справа должен выступать на 300рпх. При сужении окна, все эти выступающие элементы учитывается, хотя они находятся в враппере шириной 1024рх и у них задано абсолютное позиционирование внутри этого враппера. Моя же цель сделать так, чтобы скроллбары появлялись только если размеры основной области будут меньше 1024рх, все декоративные элементы и блок справа чтобы "съедались"

Собственно пример моего кода с элементом который должен выступать на 82рх справа:

CSS

#wrapper {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}
#percents {
  width: 274px;
  height: 180px;
  position: absolute;
  background: url(../images/percents.png) no-repeat;
  right: -82px;
  top: 18px;
  z-index: 9;
}

HTML

<div id="wrapper">
<div id="percents"></div>
</div>

[Softlink]

Самый простой способ:

html{
overflow\overflow-x:hidden;
}

[skiph]

Самый простой способ:

html{
overflow\overflow-x:hidden;
}

Ну про него я знаю, но хотелось бы сохранять скролл, если размер экрана меньше 1024рх

[skiph]

Все! Нашел сам решение. Я уже это делал раньше, но забыл способ =) Если кому-нибудь понадобиться: необходимо обернуть этот враппер с выступающими элементами в другой враппер и в нем уже можно манипулировать размерами.

получилось так:

CSS

#page-wrapper {
  min-width: 1024px;
  overflow: hidden;
  width: 100%;
}
#wrapper {
  width: 1024px;
  margin: 0 auto;
  position: relative;
}
#percents {
  width: 274px;
  height: 180px;
  position: absolute;
  background: url(../images/percents.png) no-repeat;
  right: -82px;
  top: 22px;
  z-index: 9;
}

HTML

<div id="page-wrapper">
  <div id="wrapper">
   <div id="percents"></div>
  </div>
</div>

[bisecom]

А вот еще вопрос касательно вертикальных и горизонтальных скроллбаров, сформировал страничку, которая выглядит в опере - в соответствии с просмотром Dreamweaver. Мазила почему то неотображает закругления слоев и тени..

А в хроме вообще весело - на каждом блоке (слое) появляются вертикальных и горизонтальных скроллбары.

Можете подсказать как убрать их через свойства css?

[resoursa]

просмотром Dreamweaver

Не рекомендую руководствоваться этим просмотром, пользуйтесь браузером сразу. Иначе проблем не избежать.

Поповоду проблемы дайте ссылку на хостинге посмотреть. А-то не очень понятно что вам нужно.

[hedgehog]

Все! Нашел сам решение. Я уже это делал раньше, но забыл способ =) Если кому-нибудь понадобиться: необходимо обернуть этот враппер с выступающими элементами в другой враппер и в нем уже можно манипулировать размерами.

Если планируется без скролла на разрешении 1024 пикселей в ширину, то min-width лучше указывать в пределах 960-980px. Иначе на 1024 будет появляться вертикальная прокрутка из-за горизонтального скроллбара и боковых рамок окна (размеры зависят от браузера).

Edited January 4, 2012 by hedgehog

[bisecom]

просмотром Dreamweaver

Не рекомендую руководствоваться этим просмотром, пользуйтесь браузером сразу. Иначе проблем не избежать.

Поповоду проблемы дайте ссылку на хостинге посмотреть. А-то не очень понятно что вам нужно.

resoursa, Спасибо за ответ.

Да, пожалуй это правильно - нужно сразу через браузеры..

Сейчас пишу с компа где нет кода. Как только доберусь, обязательно сброшу пример..

А еще вопрос от новичка - есть код, а хостинга нет.. как пример показать?? эта страница готовится

как бы для объявления - тоесть код после создания подставится в действующий сайт типа Амазон...

[hedgehog]

А еще вопрос от новичка - есть код, а хостинга нет.. как пример показать?? эта страница готовится

как бы для объявления - тоесть код после создания подставится в действующий сайт типа Амазон...

На этом форуме в ходу http://jsfiddle.net/

[bisecom]

На этом форуме в ходу http://jsfiddle.net/

Не рекомендую руководствоваться этим просмотром, пользуйтесь браузером сразу. Иначе проблем не избежать.

Поповоду проблемы дайте ссылку на хостинге посмотреть. А-то не очень понятно что вам нужно.

Ребята, спасибо за ответы. итого по проблеме - направляю код на хостинге, как рекомендовали - http://jsfiddle.net/bisecom/qrsNg/

Но к сожалению внешне для меня все отлично.. в коде не разбираюсь..

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

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

Можете подсказать как разрулить??

[resoursa]

Слушай друже ничего непонятно. Что именно тебя интересует. И если честно то все это абсолютно не читабельно. Ты делай и скрин и указывай на нем что тебя интересует.

[bisecom]

Слушай друже ничего непонятно. Что именно тебя интересует. И если честно то все это абсолютно не читабельно. Ты делай и скрин и указывай на нем что тебя интересует.

Ок, тогда еще раз..

Направляю сам код, который можно глянуть на рекомендованном хосте http://jsfiddle.net/bisecom/qrsNg/ и два участка странички.

Первый - корректный, который отображается в опере, а второй - в хроме.

На втором, которые НЕ нравится - указал проблемы.

А именно:

1. Нужно убрать скроллы,

2. Настроить расстояние между строк и обтекание.

3. Разобраться со съезжанием слоев одного относительно другого.

[bisecom]

Слушай друже ничего непонятно. Что именно тебя интересует. И если честно то все это абсолютно не читабельно. Ты делай и скрин и указывай на нем что тебя интересует.

Ок, тогда еще раз..

Направляю сам код, который можно глянуть на рекомендованном хосте http://jsfiddle.net/bisecom/qrsNg/ и два участка странички.

Первый - корректный, который отображается в опере, а второй - в хроме.

На втором, которые НЕ нравится - указал проблемы.

А именно:

1. Нужно убрать скроллы,

2. Настроить расстояние между строк и обтекание.

3. Разобраться со съезжанием слоев одного относительно другого.

Судя по количеству подсказок, смотрю, что не так уж все и просто...

Вопрос по обтеканию снимается....