Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

Не работают коды CSS

Предыдущая тема Следующая тема Перейти вниз

Не работают коды CSS

Сообщение автор Альберт Вескер в Сб 21 Янв - 19:42

Здравствуйте.
Решил воспользоваться кодами CSS для создания анимированной навигации (дабы не нагружать форум внешними плагинами) из этой темы (см. так же демо): http://ruseller.com/lessons.php?rub=2&id=1322 но почему-то у меня ничего не работает так, как это работает в демо, а точнее, вообще нет никакой анимации.


P.S. сами блоки div ставил в приветствие, а код CSS пробовал как в таблицу CSS ставить, так и в приветствие в <style>.
avatar
Альберт Вескер
 

Мужчина

Сообщения : 679
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Luz в Вт 24 Янв - 12:40

Альберт Вескер,
добрый день!

Дайте, пожалуйста, пример конкретных кодов, которые вы вставили, соответственно, в Приветствие и в CSS , и которые не сработали... (именно в том виде, в котором вы их ставили на форум)



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Luz
Администратор
Администратор

Женщина

Сообщения : 16458
Возраст : 43
Регистрация : 2005-03-01
Благодарности : 2558

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Альберт Вескер в Ср 25 Янв - 14:35

Способ I.
Сразу всё в приветствие:
Код:
<div class="view">
    <img src="http://i44.servimg.com/u/f44/16/34/07/89/11110.jpg" />
    <div class="mask">
       <h2>Заголовок</h2>
       <p>Текст сообщения</p>
   <a href="#" class="info">Кнопка</a>
    </div>
</div>


<style type="text/css">
.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url('http://i44.servimg.com/u/f44/16/34/07/89/11110.jpg') no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}
/*демо 10*/
.view-tenth img {
   transform: scaleY(1);
   transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
    background-color: rgba(255, 231, 179, 0.3);
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth a.info {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

.view-tenth:hover img {
   transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask {
   opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
    transform: scale(1);
    opacity: 1;
}

<style>


Способ II.
В приветствие:
Код:
<div class="view">
    <img src="http://i44.servimg.com/u/f44/16/34/07/89/11110.jpg" />
    <div class="mask">
       <h2>Заголовок</h2>
       <p>Текст сообщения</p>
   <a href="#" class="info">Кнопка</a>
    </div>
</div>

В CSS:
Код:
.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url('http://i44.servimg.com/u/f44/16/34/07/89/11110.jpg') no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}
/*демо 10*/
.view-tenth img {
   transform: scaleY(1);
   transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
    background-color: rgba(255, 231, 179, 0.3);
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth a.info {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

.view-tenth:hover img {
   transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask {
   opacity: 1;
}
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
    transform: scale(1);
    opacity: 1;
}

Собственно я испробовал несколько вариантов кодов, представленных на демо,но не один не работает.
avatar
Альберт Вескер
 

Мужчина

Сообщения : 679
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Luz в Чт 26 Янв - 13:24

Вы забыли сделать вот это:

Добавляем специальный класс view-first к элементу с классом view для данного эффекта. Специальный класс будет добавляться в каждом примере к элементу с классом view (view-first, view-second, view-third, и так далее).

Код:
<div class="view view-first">
     
</div>



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Luz
Администратор
Администратор

Женщина

Сообщения : 16458
Возраст : 43
Регистрация : 2005-03-01
Благодарности : 2558

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Альберт Вескер в Чт 26 Янв - 14:42

Luz, сделал, но упорно не хочет работать как в демо:
avatar
Альберт Вескер
 

Мужчина

Сообщения : 679
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Luz в Пт 27 Янв - 14:23

честно говоря, моих личных компетенций не хватает, чтобы подсказать вам, почему код не работает.
Я задала вопрос нашему штату - если у кого-то будет возможность посмотреть, может быть вам еще подскажут.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Luz
Администратор
Администратор

Женщина

Сообщения : 16458
Возраст : 43
Регистрация : 2005-03-01
Благодарности : 2558

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Dana Domirani в Пт 27 Янв - 15:25

Случайно не поставлено в Опциях CSS > Оптимизировать вашу CSS: Да?



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22340
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 8997

Без предупреждений

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Домовой в Пт 27 Янв - 15:57

@Dana Domirani пишет:Случайно не поставлено в Опциях CSS > Оптимизировать вашу CSS: Да?
Не из за этого.
У меня стоит Нет и таже фигня.
Поставил всё в html страницу, не корректно работает
avatar
Домовой
 

Мужчина

Сообщения : 6800
Возраст : 93
Регистрация : 2010-01-30
Благодарности : 3220

Без предупреждений

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Альберт Вескер в Пт 27 Янв - 19:47

Dana Domirani, нет, в опциях стоит "Нет".
avatar
Альберт Вескер
 

Мужчина

Сообщения : 679
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

Вернуться к началу Перейти вниз

Re: Не работают коды CSS

Сообщение автор Альберт Вескер в Ср 1 Фев - 23:36

...тему можно закрывать.
avatar
Альберт Вескер
 

Мужчина

Сообщения : 679
Возраст : 26
Регистрация : 2011-04-03
Благодарности : 41

Без предупреждений

http://www.re-role.com

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения