bello

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » bello » все для дизайна » полезное для диза

полезное для диза

Страница:   1 2 3 4 5  

Сообщений 61 страница 90 из 127

61

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

[h5]zag[/h5]

0

62

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

как и где отригулировать название категорий... высоту шрифт и тд.
Все что относится к категории, настраивается в  этом  блоке:
#pun-main h2 {
}
Что именно вас интересует?
font-style -  курсив или нет
font-variant - строчные или прописные
font-weight -  толщина  шрифта
font-size  - размер шрифта
line-height - межстрочный  интервал
font-family -  шрифт текста

0

63

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

менять размер шрифта в сообщениях:

Вставлять в HTML-низ

<style id=a_fnt>
.post h3 img{
margin:0 7px;cursor:pointer;
}
</style>
<script type="text/javascript">
function setcookieF(a,b,c){if(c){var d=new Date();d.setTime(d.getTime());d=new Date(d.getTime()+c)}
if(a&&b)document.cookie=a+'='+b+(c?'; expires='+d.toGMTString():'');
else return false}function getcookieF(a){var b=new RegExp(a+'=([^;]){1,}');
var c=b.exec(document.cookie);if(c){c=c[0].split('=')}else{return false}return c[1]?c[1]:false}
a='<strong class=fnt style="width:auto;margin-right:28%;"><img src="img/minus.png" alt="-" />Шрифт<img src="img/plus.png" alt="+" /></strong>';$(".post:first h3 strong,.post:last h3 strong").after(a);
b_Fnt1='<style id=b_fnt>#main-reply,.punbb .post-content{font-size:';b_Fnt2='px;}</style>'
var c_Fnt;
N=getcookieF('c_Fnt')
if(N){c_Fnt=parseFloat(N);setcookieF('c_Fnt',c_Fnt,30*24*60*60*1000)}else{var c_Fnt=Math.round(parseFloat($(".punbb .post-content").css("font-size")));}
b_Fnt=b_Fnt1+c_Fnt+b_Fnt2; $("#a_fnt").after(b_Fnt);
function setFnt_Size(){
b_Fnt=b_Fnt1+c_Fnt+b_Fnt2;
$("#b_fnt").replaceWith(b_Fnt);//alert(b_Fnt)
setcookieF('c_Fnt',c_Fnt,30*24*60*60*1000);
}
$(".post h3 img[alt='-']").click(function (){if(c_Fnt){c_Fnt--;setFnt_Size();}});
$(".post h3 img[alt='+']").click(function (){if(c_Fnt<38){c_Fnt++;setFnt_Size();}});
</script>

0

64

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

выделение репутации и соо цветом:

.pa-respect, .pa-posts {
  border: 1px solid red;
  display: inline-block;
  text-align: center;
  width: 46%;
}

0

65

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12
Код:
<!--record-->Hôtel des Tournelles
<div class="ssylohki">
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=13" title="">Занятые внешности</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=25&p=9#p5334" title="">Гостевая</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=16#p16" title="">Хочу к вам</a>
</div>
Histoire de France
<div class="ssylohki">
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=10" title="">Сюжет</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=11" title="">FAQ</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=9" title="">Правила</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=12" title="">Историческая справка</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=68" title="">Титулы</a>
</div>

Les Mille et Un Fantômes
<div class="ssylohki">
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=15" title="">Акции: vol. 00.</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=2" title="">vol. 01.</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=3" title="">vol. 02.</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=4" title="">vol. 03.</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=5" title="">vol. 04.</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=6" title="">vol. 05.</a>
</div>


Une vie d’artiste
<div class="ssylohki">
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=7#p7" title="">Шаблон анкеты</a>
<a class="aux-links" href="http://reigngwd.rusff.me/viewtopic.php?id=8#p8" title="">Шаблон акционной анкеты</a>
</div>

0

66

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

форум, поиск, профиль заглавными буквами:

element.style {
}
#pun-navlinks{
text-transform: uppercase;text-transform: uppercase; /* Заглавные буквы */
}

0

67

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

http://support.rusff.me/viewtopic.php?id=3174

0

68

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

разделение подфорумов:

<style type="text/css">
#pun-index .category .tc2,
#pun-index .category th,
#pun-index .category .tc3{
    display:none!important;
}
.Tems_And_messages {
  display:inline-block;
  width:76px; max-wifth:76px;
}
.Add{
  display:inline-block;
  background-color:#CEE3BF;
  border-radius:6px;
  padding: 4px 7px;
  width:200px;
  box-shadow:inset 0 0 1.4em rgba(49,113,3,.8)
}
.Tems_And_messages .right{
  float:right;
}
.Tems_And_messages .right.a2{
  margin-right:-22px;
}
#pun-index .category tr {
position:relative;
background-color: #D3C4AA;
border-radius: 10px;
display: inline-block;
margin: 5px;
width: 398px;
}
</style>

    <script type="text/javascript">
    $('#pun-index .category td.tcl .tclcon').each(function() {
      var str='<br><div class="Add"><div class="Tems_And_messages">Teм: <span class="right">'+$(this).parents('tr:first').find('td.tc2').text()+'</span></div><div  style="margin-left:12px;" class="Tems_And_messages">Cообщений: <span class="right a2">'+$(this).parents('tr:first').find('td.tc3').text()+'</span></div></div>';
      $(str).appendTo(this)
    });
    </script>

в стиле:

.punbb .main .tcr {
    display: block;
    margin-left: 40px;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

0

69

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12
Код:
<!--record--><style type="text/css">body {font-size: 100%;}</style><p style="text-indent:85px;">Уважаемые игроки и гости FRPG Pandemonium, пожалуйста, помните, что незнание правил не освобождает от ответственности, посему уделите немного времени прочтению данного свода, дабы в будущем избежать недоразумений и недопонимания.</p>
<p style="margin-left:85px;"><b>Название проекта:</b> Pandemonium [1].<br>
<b>Подзаголовок:</b> Evil has its winning ways [2].<br>
<b>Тематика:</b> мистика.<br>
<b>Характер повествования:</b> эпизодический.<br>
<b>Место действия:</b> Лондон, Англия, Великобритания.<br>
<b>Время действия:</b> ноябрь 2014 года.<br>
<b>Рейтинг:</b> NC-17 [3].<br><br>
<b>Дата открытия:</b> 11/11/2012.<br>
<b>Дата открытия на rusff:</b> 09/05/2014.<br>
<b>Администрация:</b> <a href="http://pandaemonium.rusff.me/profile.php?id=3">Jeremy Gale</a>, <a href="http://pandaemonium.rusff.me/profile.php?id=7">Thaís Sjöberg</a>.<br><br></p>
<b><big>1. Общие правила и положения.</b></big><br>
1.1.<img src='http://s6.postimg.org/sux320agt/image.png'>Регистрируясь на FRPG Pandemonium, Вы автоматически соглашаетесь с приведенными ниже правилами и обязуетесь их соблюдать.<br>
1.2.<img src='http://s6.postimg.org/sux320agt/image.png'>Копирование, повторное воспроизведение, несанкционированное использование и продажа информации, составляющей контент данного форума и являющейся авторской собственностью, запрещено.<br></p>

0

70

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

#pun-main .post-author ul {
    border-bottom-right-radius: 15px; /*Величина скругление угла снизу*/
    border-top-right-radius: 15px; /*Величина скругление угла сверху*/
    border-color: #000; /*Цвет*/
    border-style: solid solid solid none; /*Тип рамки - в данном случае - линия*/
    border-width: 2px 2px 2px 0; /*Ширина рамки*/
}

0

71

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

оформление профиля:
.punbb .post .post-author > ul {
background: url(рамка сверху) 0 top no-repeat,url(рамка снизу) 0 bottom no-repeat, url("повторяющееся тело") center center repeat-y; }

описание подфорумов:
<div class="dsc1"><div class="dsc2"> текст описания </div></div>

в стиль:
.dsc2 {
font-family: times, serif;
font-size: 7px;
line-height: 100%;
color: #290500;
overflow: hidden;
text-transform: uppercase;
text-align: justify;
letter-spacing: 1px;
padding: 10px;
border: 1px solid #290500; }

.dsc1 {
background-color: #e7cb99;
padding: 10px;}

0

72

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

простое оформление профиля:

.punbb .post .post-author {
    background: url("http://s4.uploads.ru/jmnIE.png") repeat scroll 0% 0% transparent;
    text-align: center;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0px 0px 0px rgb(28, 24, 20);
}

0

73

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

картинка на шапке (маленький пузырик):

<style>
.myimage{
  filter:alpha(opacity=50);
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
}
.myimage:hover{
filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>
<img class="myimage" src="ссылка" title="Описание" />

0

74

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

http://support.rusff.me/viewtopic.php?i … =35#p54205 - меню

0

75

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

поставить нижнюю навигацию норм:
#pun-status .container{
margin-top: 50px;}

0

76

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

как можно сделать такое маркирование текста (или что это) в названии форумов как на скрине, а так же выравнивание по ширине в описании форумов и выравнивание по правому краю в правой части форума?

.punbb td div.tclcon {
    text-align: justify;
}
.punbb .main .tcr {
    text-align: right;
}

0

77

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

<div id="tablitsa">
код вашей таблицы
</div>

<style>
#tablitsa {
position: absolute;
margin-top: 122;
margin-left: 925; }
</style>

0

78

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

NEW ORLEANS

текст текст текст текст текст текст текст текст текст текст текст текст текст текст

0

79

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12
Код:
<!--record--><center>
<div class="img-wrap"><img src="http://25.media.tumblr.com/20e7a398e42a2e345cd513fe7999a167/tumblr_mfegarGSq91rz5462o1_500.jpg"><div class="img-overlay">
<p>
</p><div class="scroll" style="overflow: scroll; overflow-y: scroll; overflow-x: hidden; height: 590px;"><table><tbody><tr align="center"><td style="background-color: #d8c88f;"><font style="color: #f5f0ce; font-family: Times New Roman; font-size: 36px; text-shadow: #a8a077 1px 1px 0px;"><i>Назавние</i></font><br>
<font style="color: #f5f0ce; font-family: Times New Roman; font-size: 10px; letter-spacing: 3px; text-shadow: #a8a077 1px 1px 0px;">Второе название</font></td></tr>
<tr align="justify"><td style="background-color: #f2efde;"><font style="font-size: 11px;">Текст первого названия. </font></td></tr>

<tr align="center"><td style="background-color: #d8c88f;"><font style="color: #f5f0ce; font-family: Times New Roman; font-size: 36px; text-shadow: #a8a077 1px 1px 0px;"><i>Название</i></font><br>
<font style="color: #f5f0ce; font-family: Times New Roman; font-size: 10px; letter-spacing: 3px; text-shadow: #a8a077 1px 1px 0px;">Второе название</font></td></tr>
<tr align="justify"><td style="background-color: #f2efde;"><font style="font-size: 11px;">Текст. </font></td></tr>
<tr align="center"><td style="background-color: #d8c88f;"><font style="color: #f5f0ce; font-family: Times New Roman; font-size: 36px; text-shadow: #a8a077 1px 1px 0px;"><i>Название</i></font><br>
<font style="color: #f5f0ce; font-family: Times New Roman; font-size: 10px; letter-spacing: 3px; text-shadow: #a8a077 1px 1px 0px;">Второе название</font></td></tr>
<tr align="justify"><td style="background-color: #f2efde;"><font style="font-size: 11px;">Текст. </font></td></tr>
<tr align="center"><td style="background-color: #d8c88f;"><font style="color: #f5f0ce; font-family: Times New Roman; font-size: 36px; text-shadow: #a8a077 1px 1px 0px;"><i>reserved</i></font><br>
<font style="color: #f5f0ce; font-family: Times New Roman; font-size: 10px; letter-spacing: 3px; text-shadow: #a8a077 1px 1px 0px;">FACE CLAIMS</font></td></tr>
<tr align="center"><td style="background-color: #f2efde;"><font style="font-size: 10px;"><b>кая скоделарио</b> для моего кхала<br>
<b>нина добрев or фиби тонкин</b> для меня<br>
<b>зои дойч and розмарин хэзевэй</b> для моего дитя</font></td></tr></tbody></table></div><p></p>
</div>
</div>
</center>

хтмл-вверх:

<style>.img-wrap{
height: 600px;
overflow:hidden;
position:relative;
width:500px;}
.img-overlay{
background-color:#f2efde;
bottom:0;
color:#999999;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:100%;
z-index:1000;}
.img-overlay h4, .img-overlay p{
padding:0 10px;}
.img-wrap:hover .img-overlay{
opacity:0.95;
filter: alpha(opacity = 95);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;}</style>

0

80

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

баннеры внизу форума:

второе окно сss:
#nazvanye{
position: absolute;
margin-left: отступ в бок;
nargin-top: отступ сверху;
width: ширина;
height: высота;}

хтмл-низ:
<div id="nazvanye">бла бла бла бла бла бла бла </div>

0

81

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

вставляем вверх (или вниз, как удобнее)
<!--кнопки вверх вниз-->
<div class="go-up" id='ToTop'><img src="КАРТИНКА ВЕРХНЕЙ" border="0" /></div>
<div class="go-down" id='OnBottom'><img src="КАРТИНКА НИЖНЕЙ" border="0" /></div>
<style>
.go-up,.go-down {
display:none;
position:fixed; /*позиционируем*/
right:5px; /*указываем положение, если слева - left*/
z-index:9999; /*показываем поверх все элементов на странице*/
cursor:pointer;
opacity:.7; /*прозрачность*/
margin-bottom:5px; /*отступ снизу (можно не указывать)*/
width:РАЗМЕРpx; /*ширина кнопки*/
height:РАЗМЕРpx; /*высота кнопки*/
}
.go-up {
bottom:115px; /*положение от низа окна браузера верхняя кнопка*/
}
.go-down {
bottom:25px; /*положение от низа окна браузера нижняя кнопка кнопка*/
}
.go-down:hover,.go-up:hover {
opacity:1;
}
</style>

0

82

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

вставляем вверх (или вниз, как удобнее)
<!--кнопки вверх вниз-->
<div class="go-up" id='ToTop'><img src="КАРТИНКА ВЕРХНЕЙ" border="0" /></div>
<div class="go-down" id='OnBottom'><img src="КАРТИНКА НИЖНЕЙ" border="0" /></div>
<style>
.go-up,.go-down {
display:none;
position:fixed; /*позиционируем*/
right:5px; /*указываем положение, если слева - left*/
z-index:9999; /*показываем поверх все элементов на странице*/
cursor:pointer;
opacity:.7; /*прозрачность*/
margin-bottom:5px; /*отступ снизу (можно не указывать)*/
width:РАЗМЕРpx; /*ширина кнопки*/
height:РАЗМЕРpx; /*высота кнопки*/
}
.go-up {
bottom:115px; /*положение от низа окна браузера верхняя кнопка*/
}
.go-down {
bottom:25px; /*положение от низа окна браузера нижняя кнопка кнопка*/
}
.go-down:hover,.go-up:hover {
opacity:1;
}
</style>

0

83

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

навигация внизу:

Ксс структура
   Эта част отвечает за те блоки, что выскакивают
.nav {
        opacity: 0;
        font-family: НАЗВАНИЕ ШРИФТ;
        font-size: РАЗМЕРpx;
        text-transform: uppercase; ВИД ШРИФТА СЕЙЧАС СТОИТ-ВСЕ ЗАГЛАВНЫЕ
        border: 1px solid #ЦВЕТ ОБВОДКИ;
        border-radius: 5px;
        color: #432113;
        background-color: #ЦВЕТ ФОНА;
        width: auto;
        margin-top:0px;
        padding:5px 5px 3px 5px;
        text-align: center;
        transition: 0.6s;
        -moz-transition: 0.6s;
        -webkit-transition: 0.6s;
    }
    .n2:hover .nav { margin-top: 20px; opacity: 1; }
    .n3:hover .nav { margin-top: 20px; opacity: 1; }
    .n4:hover .nav { margin-top: 20px; opacity: 1; }
    .n5:hover .nav { margin-top: 20px; opacity: 1; }
     
    .navt {
        position: absolute;
        z-index: 1;
        color: #ЦВЕТ ШРИФТА;
        font-size: РАЗМЕР ТЕКСТАpx;
        text-shadow: 0 -2px 0 #ЦВЕТ ТЕНИ;
        margin-top: -12px;
        margin-left: 18px;
    }
Эта часть отвечает за блоки с буквами
    .navigate { width: auto;margin: 5px 0 0 0; }
    .n2, .n3, .n4, .n5 {
        width: ШИРИНАpx;
        height: ВЫСОТАpx;
        float: left;
        font-family: НАЗВАНИЕ ШРИФТА;
        font-size: 8px;
        text-transform: uppercase;ВИД ШРИФТА СЕЙЧАС СТОИТ-ВСЕ ЗАГЛАВНЫЕ
        text-align: center;
        line-height: 11px;
        transition: 0.6s;
        -moz-transition: 0.6s;
        -webkit-transition: 0.6s;
    }
    .n2 { background-color: #ЦВЕТ ЗАДНЕГО ФОНА; color: #Цвет текста; }
    .n3 { background-color: #ЦВЕТ ЗАДНЕГО ФОНА; color: #Цвет текста; }
    .n4 { background-color: #ЦВЕТ ЗАДНЕГО ФОНА; color: #Цвет текста; }
    .n5 { background-color: #ЦВЕТ ЗАДНЕГО ФОНА; color: #Цвет текста; }
    .n1:hover, .n2:hover, .n3:hover, .n4:hover, .n5:hover {
        background-color: #ЦВЕТ ЗАДНЕГО ФОНА ; color: #ЦВЕТ Текста;
    }
________
Теперь пояснения: все курсивные записи нужно убрать, все жирные заменить.
Это мы ставим в таблицу или куда вам нужно:
<div style="width: ШИРИНА ТАБЛИЧКИpx; height: auto; border: none; top: СМЕЩЕНИЕ ОТНОСИТЕЛЬНО ВЕРХАpx; margin-left: СМЕЩЕНИЕ ВЛЕВОpx; position: absolute; ">
<div align="center" class="navigate">
    <a href="Ссылка"><div class="n2">буква1<div class="nav">текст</div></div></a>
    <a href="Ссылка"><div class="n3">буква 2<div class="nav">текст</div></div></a>
    <a href="Ссылка"><div class="n4">буква3<div class="nav">текст</div></div></a>
    <a href="Ссылка"><div class="n5">буква4<div class="nav">текст</div></div></a>
<a href="Ссылка"><div class="n2">буква5<div class="nav">текст</div></div></a>
    <a href="Ссылка"><div class="n3">буква6<div class="nav">текст</div></div></a>
    <a href="Ссылка"><div class="n4">буква7<div class="nav">текст</div></div></a>
    <a href="Ссылка"><div class="n5">буква8<div class="nav">текст</div></div></a>
    <a href="Ссылка"><div class="n4">буква9<div class="nav">текст</div></div></a>
    </div></div>
Теперь общее пояснение. Мы часто видим в коде такие странные буквы, как n1-n5, в ксс мы задаем им фоны, а в таблицу просто указываем этот класс, и фон, заданный в ксс, будет принадлежать чисто этой ячейке =)

0

84

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

оформление ссылки в подфоруме:

в ксс цвет:
h6 {text-align: center; background-image: url(Картинка заднего фона); font-size: РАЗМЕР ТЕКСТАpx; font-weight: normal;}
Там, где эта ссылка нужна:
<h6><a href=Ссылка><b>текст</b></a></h6>

0

85

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12
Код:
<!--record--><div class="container">
<div class="html-box">
    <table width="100%">
<tr>
<td>
    <div class="html-box">
<ul class="tabs">
    <li class="active"><a href="#tab1">     1</a></li>
    <li><a href="#tab2">     2   </a></li>
   
</ul>
      <div class="tab_container1">
<div style="display: block;" id="tab1" class="tab_content">
<table width="100%">
<tr valign=top>
<td width="30%">
<div style="background-color: #f3e0b7; border: 1px solid #d4bd91;  padding: 4px; "><center><b>  Н А В И Г А Ц И Я  </b>
</font></center></div>
</td>
<td><center><b>W E L C O M E</b><br><br>
</center></td>
</tr>
</table>
<br><br>
</div>
<div style="display: none;" id="tab2" class="tab_content">
<font size="2"><p align=right><b><i>текст</i></b>      </p></font>
</div>
</div></table>
</div>
</div>

      </div>
<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>
<script type="text/javascript">

$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
	});

});

</script>
<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 467px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    border: 0px;
border-top: 1px dotted #000000;
    border-bottom: 1px dotted #000000;
        border-right: 1px dotted #000000;
        border-left: 1px dotted #000000;
    margin-bottom: -2px;
    overflow: hidden;
    position: relative;
    width: 150px;
}

ul.tabs li a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 0 5px;
    outline: none;
}

ul.tabs li a:hover {
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  
}    

html ul.tabs li.active  {
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;   
}  

html ul.tabs li.active a:hover  {
    border-bottom: 0px solid #160f0a;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 580px;
    height: 343px;
background-color: #FFFFFF;  
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  

    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 0px dashed #000000;
}
ul.tabs li:nth-child(1) { position: relative; left: 50px; background: rgba(0, 0, 0, 0.08);}
ul.tabs li:nth-child(2) { position: relative; left: 200px; background: rgba(0, 0, 0, 0.08); }
</style>

0

86

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

полоса прокрутки:
<div style="overflow:auto; overflow-x:hidden; height:500px;" >
ваш контент
</div>

0

87

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12
Код:
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>


<style type="text/css">#cappy3 {width: 200px; height: 350px; border: 2px dashed #79cbe0; position: relative; overflow: hidden;}

#cappy3 .page { transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; position: absolute; left: 0px; bottom: 0px; width: 200px; height: 350px;}

#cappy3:hover .page {transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; left: -200px;}</style>

<style type="text/css">#cappy1 {width: 200px; height: 350px; border: 2px dashed #E08E79; position: relative; overflow: hidden;}

#cappy1 .page { transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; position: absolute; right: 0px; bottom: 0px; width: 200px; height: 350px;}

#cappy1:hover .page {transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; right: -200px;}</style>

<style type="text/css">#cappy2 {width: 200px; height: 350px; border: 2px dashed #79cbe0; position: relative; overflow: hidden;}

#cappy2 .page {transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; position: absolute; left: 0px; bottom: 0px; width: 200px; height: 350px;}

#cappy2:hover .page {transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; left: -200px;}</style>

<center>

<table><tr>
<td style="width: 210px; height: 900px; padding: 5px;">
<div id="cappy3">

<div class="page"><img src="http://sf.uploads.ru/2mnho.jpg"></div>
<div style="width: 200px; height: 350px; background-color: #F1D4AF; padding: 0px; font-family: georgia; font-size: 10px; text-transform: uppercase; color: #353535; text-align: center; font-weight: bold;"><br><br><br>

words

</div>
</div>
<br>
<div id="cappy1">
<div class="page"><img src="100 x 100 IMAGE"></div>
<div style="width: 200px; height: 350px; background-color: #C5E0DC; padding: 0px; font-family: georgia; font-size: 10px; text-transform: uppercase; color: #353535; text-align: center; font-weight: bold;"><br><br><br>

tag

</div>
</div>
<br>
<div id="cappy2">
<div class="page"><img src="100 x 100 IMAGE"></div>
<div style="width: 200px; height: 350px; background-color: #F1D4AF; padding: 0px; font-family: georgia; font-size: 10px; text-transform: uppercase; color: #353535; text-align: center; font-weight: bold;"><br><br><br>

outfit/notes

</div>
</div>
<br>
</div></td>

<td style="width: 210px; height: 900px; padding: 5px;">
<div id="cappy3">

<div class="page"><img src="100 x 100 IMAGE"></div>
<div style="width: 200px; height: 350px; background-color: #F1D4AF; padding: 0px; font-family: georgia; font-size: 10px; text-transform: uppercase; color: #353535; text-align: center; font-weight: bold;"><br><br><br>

words

</div>
</div>
<br>
<div id="cappy1">
<div class="page"><img src="100 x 100 IMAGE"></div>
<div style="width: 200px; height: 350px; background-color: #C5E0DC; padding: 0px; font-family: georgia; font-size: 10px; text-transform: uppercase; color: #353535; text-align: center; font-weight: bold;"><br><br><br>

tag

</div>
</div>
<br>
<div id="cappy2">
<div class="page"><img src="100 x 100 IMAGE"></div>
<div style="width: 200px; height: 350px; background-color: #F1D4AF; padding: 0px; font-family: georgia; font-size: 10px; text-transform: uppercase; color: #353535; text-align: center; font-weight: bold;"><br><br><br>

outfit/notes

</div>
</div>
<br>
</div></td>
</tr></table>
</div></div>

0

88

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

http://colorforum.ru/viewtopic.php?id=5910#p319166 - css крутое

0

89

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

2 фона:

body {background:
  url(http://savepic.net/7193870.png) repeat-x top left,
  url(http://savepic.su/6087049.png) center;}

0

90

  • Автор: queen
  • Администратор
  • Зарегистрирован: 2016-04-06
  • Приглашений: 0
  • Сообщений: 1181
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    10 дней 21 час
  • Последний визит:
    2021-02-07 18:30:12

администрирование - настройки - Время и тайм-ауты - Время переадресации - 0

0

Страница:   1 2 3 4 5  

Вы здесь » bello » все для дизайна » полезное для диза

Рейтинг форумов | Создать форум бесплатно