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

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

Не работают коды CSS Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

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

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

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

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

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

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

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Проблема с метатегом Description
автор VeraLV Вчера в 15:31

» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37

» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 Март 1st 2024, 17:26

» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28

» Помощь в нескольких вопросах по форуму
автор лексей2222 Февраль 22nd 2024, 13:21

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani Февраль 14th 2024, 00:54

» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09

» 2x2 форум
автор лексей2222 Февраль 12th 2024, 14:47

» сколько сообщений в теме
автор лексей2222 Февраль 10th 2024, 07:24

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

Участников: 4

Перейти вниз

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

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

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


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

Мужчина

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

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

http://www.re-role.com

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

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

Сообщение автор Luz Январь 24th 2012, 12:40

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

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


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

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


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


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


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

Женщина

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

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

https://help.forum2x2.ru

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

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

Сообщение автор Альберт Вескер Январь 25th 2012, 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;
}

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

Мужчина

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

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

http://www.re-role.com

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

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

Сообщение автор Luz Январь 26th 2012, 13:24

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

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

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


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

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


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


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


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

Женщина

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

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

https://help.forum2x2.ru

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

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

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

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

Мужчина

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

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

http://www.re-role.com

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

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

Сообщение автор Luz Январь 27th 2012, 14:23

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


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

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


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


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


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

Женщина

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

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

https://help.forum2x2.ru

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

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

Сообщение автор Dana Domirani Январь 27th 2012, 15:25

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


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

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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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

Сообщение автор Домовой Январь 27th 2012, 15:57

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

Мужчина

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

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

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

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

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

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

Мужчина

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

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

http://www.re-role.com

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

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

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

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

Мужчина

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

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

http://www.re-role.com

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

Вернуться к началу


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