Jump to content
  • 0

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


skiph
 Share

Question

Размер основной области как положено 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>

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

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

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

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>

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0
просмотром Dreamweaver

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

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

Link to comment
Share on other sites

  • 0

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

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

Edited by hedgehog
Link to comment
Share on other sites

  • 0
просмотром Dreamweaver

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

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

f0ca905e.jpg

Link to comment
Share on other sites

  • 0

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

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

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

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

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

А именно:

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

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

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

Oncemore.jpg

f0ca905e-1.jpg

Link to comment
Share on other sites

  • 0

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

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

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

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

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

А именно:

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy