Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.09.2011, 23:05   #1
AlienNation
Пользователь
 
Регистрация: 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>
[ п.с. читайте комментарии, я как мог выразил то, что происходит в скрипте ]

да, и еще, сайт резиновый, поэтому такие заморочки, никак ни переделаешь.
AlienNation вне форума Ответить с цитированием
Старый 27.09.2011, 13:00   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Простой таблицей было сделать не вариант?
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 27.09.2011, 14:53   #3
AlienNation
Пользователь
 
Регистрация: 22.08.2010
Сообщений: 85
По умолчанию

нет, даже и в мыслях не было, и не будет таблицы там никакой.
AlienNation вне форума Ответить с цитированием
Старый 27.09.2011, 16:01   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Нарисуй то, что требуется получить.
А то я пока не допер почему таблица не подходит.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 27.09.2011, 16:18   #5
AlienNation
Пользователь
 
Регистрация: 22.08.2010
Сообщений: 85
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
Нарисуй то, что требуется получить.
А то я пока не допер почему таблица не подходит.
плагин один переделываю, вот демка его: http://tympanus.net/Tutorials/ParallaxSlider/

остальное в личку
AlienNation вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
отступы в 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