Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Скролл-бар у дива. 
:(
    Опции темы
Ghirik
Дата 15.2.2008, 19:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: нет
Всего: 20
Вот так спозиционировал элементы:

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title block</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.window_body {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    z-index: 0;
}

#poz_left {
    position: fixed;
    width: 20%;
    height: 90%;
    top: 20px;
    left: -17%;
    background: #A8A;
    float: left;
    position: absolute;
}
#poz_right {
    position: fixed;
    width: 20%;
    height: 90%;
    top: 20px;
    left: 97%;
    background: #A8A;
    float: right;
    position: absolute;
}
</style>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<div class="window_body">
Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема) 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXx
</div>
<div id="fixed">
<div id="poz_left">
<div class="anime_left">55555555555555555555555</div>
<div class="anime_left">55555555555555555555555</div>
<div class="anime_left">55555555555555555555555</div>
<div class="anime_left">55555555555555555555555</div>
<div class="anime_left">55555555555555555555555</div>
</div>
<div id="poz_right">
<div class="anime_right">666666666666666666666</div>
<div class="anime_right">666666666666666666666</div>
<div class="anime_right">666666666666666666666</div>
<div class="anime_right">666666666666666666666</div>
<div class="anime_right">666666666666666666666</div>
</div>
</div>
</body>
</html>


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

Добавлено @ 19:35
Если нельзя, то хотя бы, как его совсем убрать, но чтобы див скролился?

Это сообщение отредактировал(а) Ghirik - 16.2.2008, 15:05


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Ghirik
Дата 15.2.2008, 21:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: нет
Всего: 20
Вот ведь дурень!!!

Боковые дивы то оказались вне основного... Как я так смотрел! Вначале было всё нормально, а потом я перемещал туда-сюда..... Вот и наперемещался....


Вопрос снят, код исправил, сейчас нормально.


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Ghirik
Дата 16.2.2008, 15:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: нет
Всего: 20

Это мне с недосыпу померещилось, что вопрос снят.

Ни чего не могу придумать, уже всяко-разно пробовал сделать... B JavaScript-m и CSS весь перекопал, все форумы излазил....

То прокрутка в Опере пропадет, то страница зафиксится, то в IE корневая прокрутка вылезет... Короче здец!


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
T1myrKq
Дата 16.2.2008, 16:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 5
Регистрация: 3.2.2008

Репутация: 1
Всего: 1
Вот так вроде работает:
Код

.window_body {
    z-index: 1;
}
#poz_left {
    z-index: 0;
}
#poz_right {
    z-index: 0;
}

В опере скрол не отображается, в фф и ие поверх дива

Вроде все просто, может я вопроса не понял...)
PM MAIL ICQ   Вверх
Ghirik
Дата 17.2.2008, 02:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: нет
Всего: 20
T1myrKq, спасибо, но так не подходит. Нужно, чтобы левый и правый дивы были поверх window_body, короче взаимоисключающие требования. smile 
Сейчас ещё попробую обрезать дивы над скролл-баром свойством clip, вроде, ни что не мешает....


--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
Wolf1994
Дата 17.2.2008, 10:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1701
Регистрация: 5.10.2004

Репутация: 1
Всего: 29
Не уверен, что понял вопрос... Но, так не подходит:

Код

.window_body {
    height: 100%;
    width: 80%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    z-index: 0;
    left:10%;
}

?
PM MAIL WWW   Вверх
ilyaILF
Дата 17.2.2008, 10:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6
http://www.dynamicdrive.com/style/layouts/...-frames-layout/
PM MAIL   Вверх
Ghirik
Дата 18.2.2008, 06:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: нет
Всего: 20
Спасибо всем.

Заблудился и в этом CSS smile , квик мод тоже не подходит... Короче.... Крутил, вертел, решил отказаться от выхода дива за пределы экрана. И вот, что у меня получилось: 

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title block</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100% }
* html body { overflow: hidden; }
* html .left { position: absolute; }
* html .right { position: absolute; }
.left, .right { position: fixed; top: 0; height: 100%; width: 20%; background: #A8A;}
.right { right: 0; }
#window_body { height: 100%; top: 0; width: 60%; overflow-y: scroll; margin-left: 20%; }
</style>
<!--[if IE]>
<style type="text/css">
html, body { overflow: hidden; }
</style>
<![endif]-->
<script type="text/javascript">
<!--

//-->
</script>
</head>
<body>
<div id="window_body">
Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться (размножить до нужного объема)Много текста, который будет скроллиться 
</div>

<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>

</body>
</html>



Самое главное, что так работает даже с указанием правильного типа документа.
В Опере 9.25 прокрутка отображается не там где нужно, но в 9.5 всё Ok.




--------------------
Отдадим всё клиенту, пускай его машина мучается...
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1163 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.