Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (65)
Предыдущая тема: Общие вопросы по оформлению (64)
Как с помощью браузера можно определить элемент дизайна. | |
Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS. | |
Ответы на часто задаваемые вопросы. | |
Как задавать вопросы! Разница между стилем и скриптом. ( Советы) | Плюс к названию темы еще и Памятка. |
Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности. |
kolobdur74
Спасибо, я запомню)
Добрый день!
Скажите, пожалуйста, как в шапку добавить паралакс?
<div class="parallax" id="parallax"> <div class="parallax__layer parallax__layer--deep" style="text-align:center;height:500px;background-image:url(http://i.imgur.com/oA6LjwV.png);background-repeat:no-repeat;background-position:bottom center;"></div> <div class="parallax__layer parallax__layer--back" style="text-align:center;height:500px;vertical-align:bottom;background-position:bottom center;background-image:url(http://i.imgur.com/1wWfHa2.png);background-repeat:no-repeat;background-position:bottom center;"> </div> <div class="parallax__layer parallax__layer--base" style="background-image:url(http://i.imgur.com/zfNiiUk.png); background-repeat:no-repeat;background-position:bottom center; width:1240px;padding:0;"> </div></div>
/***********************************
Parallax
************************************/
.parallax {
position:relative;
height: 100vh;
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
left: 0;
transform-origin: center;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
height:1052px;
transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
transform: translateZ(-2px) scale(3);
}Отредактировано Arlekina (Вс, 3 Ноя 2019 09:22:43)
Arlekina
Ccылку на форум, вечером, после 6 по москве гляну...
И ссылку на форум! Зависит от стиля!
Отредактировано Deff (Вс, 3 Ноя 2019 09:24:14)
Arlekina, я не знаю точно какого эффекта вы хотите добиться, но вот такой вариант попробуйте:
<style>
/***********************************
Parallax
************************************/
.parallax {
position:relative;
height: 500px;
perspective: 1px;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: none; //IE 10+
scrollbar-width: none;
}
.parallax::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
left: 0;
transform-origin: center;
height: 500px;
padding: 100px 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
transform: translateZ(-2px) scale(3);
}
</style>
<div class="parallax" id="parallax">
<div class="parallax__layer parallax__layer--deep" style="text-align:center;background-image:url(http://i.imgur.com/oA6LjwV.png);background-repeat:no-repeat;background-position:bottom center;padding-top: 0;"></div>
<div class="parallax__layer parallax__layer--back" style="text-align:center;background-image:url(http://i.imgur.com/1wWfHa2.png);background-repeat:no-repeat;background-position:bottom center;padding-top: 40px;"></div>
<div class="parallax__layer parallax__layer--base" style="text-align:center;background-image:url(http://i.imgur.com/zfNiiUk.png);background-repeat:no-repeat;background-position:bottom center;"></div>
</div>kolobdur74
А получится вынести в шапку и чтобы он работал при прокрутке форума?
А получится вынести в шапку и чтобы он работал при прокрутке форума?
Ну, прокрутка работает при наведении на этот блок.. Если вы хотите, чтобы прокрутка работала на весь форум, а не только на шапку - это нужно, чтобы весь форум занимал всю ширину экрана и весь был вовлечен в параллакс с разбитием на группы, но это уже вероятно нужен будет скрипт.. По поводу отступа - я бы просто на вашем месте его убрал:
#pun {
margin-top: 280px !important;
}
В принципе у вас и так всё гармонично выходит..
kolobdur74
Просто там, где паралакс, я хочу разместить содержимое таблицы.
А сами картинки поднять туда, где я указала стрелкой.
http://designerforumone.quadrobb.ru/
Есть ещё и на другом тестовом такой паралакс
Отредактировано Arlekina (Пн, 4 Ноя 2019 10:46:58)
Arlekina
сорри - загрузили по-полной, возможно сегодня вечером гляну...
Просто там, где паралакс, я хочу разместить содержимое таблицы.
А сами картинки поднять туда, где я указала стрелкой.
Так а кто мешает это соединить? После картинок поставить вашу таблицу..
Есть ещё и на другом тестовом такой паралакс
Почему-то картинки обрезаются о.О
Регулируйте отступами от верха (top:) через #bg1-1, #bg1-2, #bg1-3, #bg2-1 и т.д... Кстати, там используется скрипт..
Отредактировано kolobdur74 (Пн, 4 Ноя 2019 10:56:55)
Здравствуйте.
Ставлю:
<style>
#pun * {
font-family: "Agency FB Cyrillic" !important;
}
</style>Для замены шрифта на всем форуме 
Когда добавляю размер шрифта:
<style>
#pun * {
font-family: "Agency FB Cyrillic" !important;
font-size : 16px;
}
</style>То расползается минипрофиль, как побороть?
Отредактировано ACT3255 (Пн, 4 Ноя 2019 12:57:39)
#pun *
А зачем звездочка? Вообще стандартная установка шрифта на весь форум на Майбб вот такая:
/* A3.2 */
.punbb {
font: normal 68.75% tahoma, verdana, arial, helvetica, sans-serif;
}
В вашем случае можно так:
/* A3.2 */
.punbb {
font: normal 16px Agency FB Cyrillic;
}То расползается минипрофиль, как побороть?
А адрес на форум?
А адрес на форум?
ACT3255, с установленным кодом, который вызывает проблему..
kolobdur74
<style>
.punbb {
font: normal 16px Agency FB Cyrillic;
}
</style>Поставил так, очень широкий минипрофиль получается и шрифт Agency FB Cyrillic в форме ответа не по умолчанию.
http://nude-celebrity.ru/viewtopic.php? … =71#p22514
Со шрифтом в форме ответа по умолчанию разобрался
Отредактировано ACT3255 (Пн, 4 Ноя 2019 13:27:07)
ACT3255, для сдвига по центру мнипрофиля, поставьте:
.UL {text-align: center;}Это:
li.pa-zwezda {
position: relative;
width: 200px!important;
white-space: pre-wrap;
z-index: 100;
margin-top: -5px;
margin-bottom: -0px;
margin-left: 3px;
color: red;
}
Замените на:
margin: -5px auto 0 auto;
Для уменьшение ширины минипрофиля добавьте:
.punbb .post .post-author {width: 19em;}
.punbb .post-body {margin-left: 19em;}
Значение ставите свое одинаковое..
kolobdur74
я не пользуюсь "своим стилем" так что не понимаю где это менять.
я ковыряю HTML верх-низ 
Отредактировано ACT3255 (Пн, 4 Ноя 2019 13:42:38)
.punbb .post .post-author {width: 19em;}
.punbb .post-body {margin-left: 19em;}
Поправка, полный код (добавить в НТМЛ верх) - менять в трех местах на одинаковое число:
<style>
.punbb .post .post-author {width: 19em;}
.punbb .post-body {margin-left: 19em;}
.punbb .post h3 span {margin-left: 19em;}
.UL {text-align: center;}
</style>
я не пользуюсь "своим стилем" так что не понимаю где это менять.
Я понял - это все с НТМЛ верхом, вот это:
li.pa-zwezda {
position: relative;
width: 200px!important;
white-space: pre-wrap;
z-index: 100;
margin-top: -5px;
margin-bottom: -0px;
margin-left: 3px;
color: red;
}
Найдите в НТМЛ верху и замените выделенное красным на:
margin: -5px auto 0 auto;
kolobdur74
Спасибо!!! Все получилось.
Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (65)