Слайдер в блоке - Страница 3

2012-04-20Дата: Пятница, 20.04.2012, 02:41 | Сообщение # 31

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diana,

Quote (Diana)

Спасибо ребята что нашли косяк

Да, долго его искали )))

2012-04-20Дата: Пятница, 20.04.2012, 05:43 | Сообщение # 32

Подполковник

Группа: Пользователи

Сообщений: 105

Награды: 2

Репутация: 11

Статус: Offline

Quote (Diana)

Спасибо ребята что нашли косяк
Отличный слайдер.Теперь вообще придраться не к чему.

точно! биг сенкс!

2012-06-18Дата: Понедельник, 18.06.2012, 06:27 | Сообщение # 33

Генерал-лейтенант

Группа: Помощники

Сообщений: 606

Награды: 0

Репутация: 20

Статус: Offline

А этому слайдеру ширину изменить вообще реально?
Изменила ширину верхней прокрутки и фона под информерами - выглядит как надо, а вот сами информеры так и остаются столбиком посередине.

2012-06-18Дата: Понедельник, 18.06.2012, 08:58 | Сообщение # 34

Подполковник

Группа: Пользователи

Сообщений: 105

Награды: 2

Репутация: 11

Статус: Offline

Diana, у меня была такая же проблема, я её решила, заполнив первую строчку в каждом листе (по нужной ширине) пробелами: http://redhammer.ru/html/probel-v-html
и тогда всё растянулось..

Сообщение отредактировал rikulia - Понедельник, 18.06.2012, 09:03

2012-06-18Дата: Понедельник, 18.06.2012, 09:07 | Сообщение # 35

Генерал-лейтенант

Группа: Помощники

Сообщений: 606

Награды: 0

Репутация: 20

Статус: Offline

Как ты только до такого додумалась biggrin

Мне бы и в голову не пришло даже такое.
Странно. Не могу понять почему такая проблема.В СSS уже всяко изменяла тоже.
Если вообще убираешь вот эту хрень

Code

<div id="vertSlider">тут информеры</div>

То тогда без этого дива он растягивается, но зато перестаёт листать.

Добавлено (18.06.2012, 09:07)
---------------------------------------------
Да я знаю как пробел ставить. Но я еще надеюсь что может можно просто ширину задать как то. Покопаюсь еще.

2012-06-18Дата: Понедельник, 18.06.2012, 09:17 | Сообщение # 36

Подполковник

Группа: Пользователи

Сообщений: 105

Награды: 2

Репутация: 11

Статус: Offline

мне вечно такое в голову приходит, потом сижу исправляю))
наверняка можно что-нибудь задать, но сразу не получилось и я не стала париться happy

2012-06-18Дата: Понедельник, 18.06.2012, 09:56 | Сообщение # 37

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

rikulia,

Quote (rikulia)

наверняка можно что-нибудь задать, но сразу не получилось и я не стала париться

Класс) Мне нравится ход ваших мыслей)
Кстати, в тему, давно давно, я тоже распирал блоки пробелами) Но это очень давно) Еще на народе.ру)

Quote (Diana)

Да я знаю как пробел ставить. Но я еще надеюсь что может можно просто ширину задать как то. Покопаюсь еще.

Конечно можно, гляну позже)

2012-06-18Дата: Понедельник, 18.06.2012, 11:36 | Сообщение # 38

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Если я правильно понял, по идее-то, схлопывалить управляющие элементы?

Короче.
У меня сделано вот так:

Code

Соответственно:

Code

table.vertSliderNav{width:100%;background:#5d5d5d;}

Ширина 100% - чтобы центр растягивался на всю ширину.

Или вот так:

Code

Слайды:

Code

Соответственно:

Code

div.slide{width:700px;}

Или вообще:

Code

Весь слайдер в блоке, не обязательно, но мне так удобнее:

Code

<div class="vertSliderBox">
слайдер
</div>

Соответственно:

Code

div.vertSliderBox{width:722px;margin:0 auto;}

Указываем фиксированную ширину, и выравниваем по центру.

Результат, без всяких распирающих пробелов.
Кнопки, дизайн и инфа честно “стырены” с сайта: sofiarotaru.net

☑ Пример jQuery Cycle Plugin - Слайдер в блоке

2012-06-18Дата: Понедельник, 18.06.2012, 17:22 | Сообщение # 39

Подполковник

Группа: Пользователи

Сообщений: 105

Награды: 2

Репутация: 11

Статус: Offline

Quote (likbezz, 18 Июнь 2012 г. 14:36:25)

на это исправила, благодарю smile

2012-06-18Дата: Понедельник, 18.06.2012, 18:53 | Сообщение # 40

Генерал-лейтенант

Группа: Помощники

Сообщений: 606

Награды: 0

Репутация: 20

Статус: Offline

Quote

Кнопки, дизайн и инфа честно “стырены” с сайта: sofiarotaru.net

Ну я тоже стырила кнопки на время эксперимента - потому что у неё там немного подругому сделано.Я просто пыталась долго понять - почему он на всю страницу и в чем разница с моим. Пробелы конечно не учла biggrin

likbezz, Спасибо. Пойду тоже менять. Если получится то буду очень рада. Потому что слайдер очень хороший - давно хочу его на главной поставить. А то старый - слайдер конечно красивый но менять вручную картинки как то не хочется каждый раз. Тут хоть информеры можно вставить.

2012-06-18Дата: Понедельник, 18.06.2012, 18:57 | Сообщение # 41

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diana,

Quote (Diana, 18 Июнь 2012 г. 18:53:46)

Ну я тоже стырила кнопки на время эксперимента

Вы только на время эксперимента, а этот пример думаю долго висеть будет )

2012-06-19Дата: Вторник, 19.06.2012, 06:02 | Сообщение # 42

Генерал-лейтенант

Группа: Помощники

Сообщений: 606

Награды: 0

Репутация: 20

Статус: Offline

Ну короче - вот что получилось у меня:

Код в спойлере:

Это на странице:

Code

<table class="vertSliderNav" height="30px" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td width="31"><a id="prev" href="javascript://;"><div class="prev-slide-btn"></div></a></td>
<td id="sh_1info" class="boTi" style="text-align:center;color: #000000; font-family:Arial,sans-serif;" height="30"><b>НОВОСТИ     САЙТА</b></td>
<td width="31" height="30"><a id="next" href="javascript://;"><div class="next-slide-btn"></div></a></td>
</tr></tbody>
</table>
<br>

<div class="blockcontent-inside">
<script type="text/javascript" src="http://fallout-fanclub.ucoz.net/images/slider_inf.js"></script>
<div id="vertSlider">


<div class="slide" style="width:550px; height:auto;">
<span class="slide_name"><b>Новые файлы:</b></span>
<script type="text/javascript" src="http://fallout-fanclub.ucoz.ru/informer/23"></script>
</div>


<div class="slide" style="width:550px; height:auto;">
<span class="slide_name"><b>Новые cтатьи:</b></span>
<script type="text/javascript" src="http://fallout-fanclub.ucoz.ru/informer/24"></script>
</div>


<div class="slide" style="width:550px; height:auto;">
<span class="slide_name"><b>Новые скриншоты:</b></span>
<script type="text/javascript" src="http://fallout-fanclub.ucoz.ru/informer/25"></script>
</div>


<div class="slide" style="width:550px; height:auto;">
<span class="slide_name"><b>Новое на форуме:</b></span>
<script type="text/javascript" src="http://fallout-fanclub.ucoz.ru/informer/26"></script>
</div>


<div class="slide" style="width:550px; height:auto;">
<span class="slide_name"><b>Новые файлы:</b></span>
<script type="text/javascript" src="http://fallout-fanclub.ucoz.ru/informer/23"></script>
</div>

</div>
</div>
<div class="blockbottom"></div>




<script type="text/javascript">
$('#vertSlider').cycle({
fx: 'scrollHorz',
speed: '800',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>

А это в СSS:

Code

/* Slider Style */

.blockcontent-inside {
background:#F8F8F8;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
list-style:none;
width:552px;
margin-bottom:4px;
}

table.vertSliderNav{width:570px;background:#F8F8F8;}
div#vertSlider div.slide {left: 0px; z-index: 3; display: none;}
div.next-slide-btn {display:block; background: url('http://fallout-fanclub.ucoz.net/images/next-btn.gif') no-repeat; width:31px; height:30px;}
div.next-slide-btn:hover {background-position: 0px -30px;}
div.prev-slide-btn {display:block; background: url('http://fallout-fanclub.ucoz.net/images/prev-btn.gif') no-repeat; width:31px; height:30px;}
div.prev-slide-btn:hover {background-position: 0px -30px;}

/* Slider Style end */

Посмотреть можно на тестовом, тут: http://_fallout-fanclub.ucoz.net/

Есть правда два небольших косячка:
В ИЕ уголки не закругляются и в ИЕ шесть - на информере форума почему то строку не переносит,если она слишком длинная. Во всех остальных вроде нормально.

Сообщение отредактировал Diana - Вторник, 19.06.2012, 06:08

2012-06-19Дата: Вторник, 19.06.2012, 13:25 | Сообщение # 43

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diana,

Quote (Diana, Вт, 19.06.2012, 06:02:29)

Есть правда два небольших косячка:
В ИЕ уголки не закругляются и в ИЕ шесть - на информере форума почему то строку не переносит,если она слишком длинная. Во всех остальных вроде нормально.

Про уголки - логично)
А про перенос стори можно прописать вот так для ИЕ:

Code

td.infTd{
-ms-word-break:break-all;
-ms-word-wrap:break-word;
word-wrap:break-word;
}

Но по моему, там требуется фиксированный размер по ширине в пикселях, попробуй, я уже не помню точно.

А размер можно установить - у вас дизайн фиксированный, так что ничего страшного - 183 px на ячейку.

2012-06-19Дата: Вторник, 19.06.2012, 17:55 | Сообщение # 44

Генерал-лейтенант

Группа: Помощники

Сообщений: 606

Награды: 0

Репутация: 20

Статус: Offline

Cпасибо

Я попробую сделать фиксированную ячейку.
Кстати, ты не подскажешь
Видел, я там пытаюсь сделать информер с прокруткой?
Как думаешь, ИЕ 6 такое не сможет прочитать правильно? Наверно можно даже не париться?
Или это как всегда я накосячила? Скрыла пока от него.

Добавлено (19.06.2012, 17:55)
---------------------------------------------
Я там вот так сделала (может это не правильно?)

Code