Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как сделать DIV только с горизонтальным скроллом ?

Автор: numerovan 27.11.2009, 23:27

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

Автор: bars80080 28.11.2009, 01:06

Код


<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

К сожилению выше написанный метод не работает , проверял в 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

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

Автор: Mavrun 31.12.2009, 10:39

По сабжу мне думается лучше воспользоваться скриптом FleXcroll (живёт http://www.hesido.com/web.php?page=customscrollbar) - он создаёт и горизонтальные, и вертикальные скроллы, можно выбрать на вкус и цвет что-то