|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
26.09.2011, 23:05 | #1 |
Пользователь
Регистрация: 22.08.2010
Сообщений: 85
|
Отступы от левого края в цикле, Как сделать стабильные отступы li в гориз. ul?
в блоке с превьюшками не получается выставить нормальные оступы, по умолчанию я выставил 4 штуки, выглядет еще куда-ни шло, но вот если их будет допустим 10, то глаз явно не порадует, как вылечить, поможете?
листинг (index.html): Код HTML:
<HTML> <HEAD> <script TYPE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></SCRIPT> <script TYPE="text/javascript"> $(document).ready(function(){ /* произвольное число превьюшек, можете */ /* изменять число, поймете в чем дело */ var zel = 5; /* циклом добавляю li-шки с img-ами */ for (var i = 1; i<zel; i++) { $('.thumbnails').append('<li><img src="#"></li>'); } /* промежутки */ /* длинна всего блока делится на кол-во превьюшек + 1 */ var spaces = $(window).width()/(zel+1); /* теперь выставим ОТСТУП каждой li от левого края */ /* по сути, он должен быть равен промежутку, */ /* умноженному на кол-во превьюшек +1 */ /* минус половина длинны самой превьюшки */ $('.thumbnails li').each(function(r){ var $this = $(this); var left = spaces*(r+1)-$this.width()/2; $this.css('left',left+'px'); }); }); </SCRIPT> <TITLE> test preview </TITLE> </HEAD> <BODY> <!-- модуль с превьюшками --> <ul class="thumbnails"></ul> <style> .thumbnails{ height:50%; position:absolute; border: 4px solid black; width: 80%; left:9%; bottom: 1%; overflow-y:hidden; overflow-x:scroll; } .thumbnails li{ position: absolute; display:block; border: 2px solid green; height: 80%; bottom: 10%; left: 1px; width: 15%; } .thumbnails li img { border: 3px solid blue; display:block; height: 96%; margin-top: 2px; margin-left: 3px; width: 92%; } .navigator span { position: absolute; bottom: 20%; width: 5%; height: 10%; cursor: pointer; overflow:hidden; font-weight: bold; teft-align: center; } .navigator span.rightar { right: -20px; } .navigator span.leftar { left: 5px; } </style> <!-- навигация для красоты, чтоб совсем все уныло не казалось, не обращайте внимания. --> <div class='navigator'> <!-- стрелка влево --> <span class='leftar'><--</span> <!-- стрелка вправо --> <span class='rightar'>--></span> </div> </BODY> </HTML> да, и еще, сайт резиновый, поэтому такие заморочки, никак ни переделаешь. |
27.09.2011, 13:00 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Простой таблицей было сделать не вариант?
Alar, верни репу!
|
27.09.2011, 14:53 | #3 |
Пользователь
Регистрация: 22.08.2010
Сообщений: 85
|
нет, даже и в мыслях не было, и не будет таблицы там никакой.
|
27.09.2011, 16:01 | #4 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Нарисуй то, что требуется получить.
А то я пока не допер почему таблица не подходит.
Alar, верни репу!
|
27.09.2011, 16:18 | #5 | |
Пользователь
Регистрация: 22.08.2010
Сообщений: 85
|
Цитата:
остальное в личку |
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
отступы в RichTextBox | DarkMage | Общие вопросы .NET | 1 | 07.05.2011 00:11 |
отступы в RichTextBox | DarkMage | Общие вопросы .NET | 0 | 21.04.2011 20:49 |
Отступы в таблице | HTL | HTML и CSS | 1 | 10.05.2010 11:21 |
Отступы в RTF | Utkin | Общие вопросы Delphi | 7 | 13.03.2009 14:53 |
Отступы в С++ | nighthack | Общие вопросы C/C++ | 6 | 16.06.2008 15:09 |