VPF::Как сделать DIV только с горизонтальным скроллом ?

numerovan

Дата 27.11.2009, 23:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Здравствуйте, хочу сделать див только с горизонтальным скроллом , на подобие iframe ... на страничке показаны картинки и хотелось бы чтоб они отображались внутри дива и только горизонтально, т.е. я скроллом могу просмотреть все . Размеры дива допустим 600px на 100px.
КАК МОЖНО ТАКОЕ ОСУЩЕСТВИТЬ ?

bars80080

Дата 28.11.2009, 01:06 (ссылка)

(голосов:1)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Код


<style>
#gal { width: 600px; height: 100px; overflow-x: scroll; }
#gal img { display: inline; }
</style>
<div id="gal">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>

numerovan

Дата 30.11.2009, 07:37 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

К сожилению выше написанный метод не работает , проверял в IE, Opera, Chrome.
Сделал следующее :
1. сделал див со стилем style="width:680px; height:110px; overflow-x:scroll; overflow-y:hidden;"
2. посчитал на php сколько файлов нужно отобразить
3. взависимости от колличества файлов создаётся , внутри того дива, таблица по ширине равная подсчитаным файлам умноженное на их ширину , ну и минус три не нужных файла при подсчёте. В результате создаётся таблица , допустим в 2000 пикселей и в ней как раз отображаются файлы горизонтально только с скролингом по оси Х.

Код


<div align="center" style="width:680px; height:500px; clear:both; margin-bottom:10px">
                    <img id="img_60" align="absmiddle" onclick="zamena(this.id)" src="brdPng.php?f=66/photo/1.jpg&w=680&h=500&type=jpg&quality=80" width=680 height=500 />
                </div>
                <div align="left" style="width:680px; height:110px; overflow-x:scroll; overflow-y:hidden;">
                    <?
                        chdir("66/photo/");
                        $files = scandir(".");
                        $i = 0;
                        echo '<table width=' . ((count($files)-3) * 90) . ' border="0" cellpadding="0" cellspacing="0"><tr><td aligh="left">';
                        while($files[$i]){
                            if(is_file($files[$i]) && ( (substr($files[$i], -4) == ".jpg") || (substr($files[$i], -4) == "jpeg")) ){
                                echo '<img id="img_' . $i . '" align="absmiddle" style="margin:5px" src="brdPng.php?f=66/photo/' . $files[$i] . '&w=80&h=80&type=jpg&quality=40" width=80 height=80 />';    
                            }
                            $i++;
                        }
                        echo '</td></tr></table>';
                        chdir("../../");
                    ?>
                </div>

bars80080

Дата 30.11.2009, 11:15 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

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

Mavrun

Дата 31.12.2009, 10:39 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

Репутация: 9
Всего: 13

По сабжу мне думается лучше воспользоваться скриптом FleXcroll (живёт по ссылке) - он создаёт и горизонтальные, и вертикальные скроллы, можно выбрать на вкус и цвет что-то

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »