24/08/15 Открыта запись на обучение вёрстки для майбба - ссылка на тему

Избранные уроки Photoshop


Вверх
Вниз

COLOR MATE

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

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


Вы здесь » COLOR MATE » Вопросы CSS|JS » Вопросы по CSS vol. 2 ‡Обязательно оставляйте ссылку на форум!


Вопросы по CSS vol. 2 ‡Обязательно оставляйте ссылку на форум!

Сообщений 631 страница 660 из 1000

1

Все ваши вопросы относительно внешнего вида форума.
Не забываем оставлять ссылку на форум с проблемой!

0

631

Джи
По прежнему :'(

0

632

Turante
Ээээ... тогда так:

// 1 кнопка - ссылка на Картинку
"https://forumstatic.ru/files/0012/0b/fd/87547.png",
"pa-fld3",       //Доп.Поле.1
// 2 кнопка- ссылка на Картинку
"https://forumstatic.ru/files/0012/0b/fd/93943.png",
"pa-respect",    //Уважение:
"pa-positive",   //Позитив
"pa-posts",      //Кол-во сообщений:
"pa-last-visit", //Последний визит:
"pa-ip",         //IP Юзера
"pa-reg",        //Зарегистрирован
"pa-invites", //Приглашений
"pa-sex",        //Пол
"pa-age",        //Возраст
"pa-icq",        //Аська
"pa-from",       //Откуда
"pa-time-visit", //Провел на форуме:
"award", //Награды
//Конец Списка,

http://s3.uploads.ru/9tmYz.gif

+1

633

Джи
как-то не срослось :/

Отредактировано каравай тм (04-08-2014 04:15:03)

0

634

каравай тм
для кого такой шикарный диз? *о*
Значит, дело в скрипте. оО
Есть второй вариант:
HTML-Верх

<script src="http://hostjs-mybb2011.narod.ru/js/transform_code_boxr.js"></script>

HTML-Низ (для нескольких постов дублируем полностью)

<script>a="/viewtopic.php?id=9#p104";
Transform_Code_Box_in_HTML (a)</script>

В пост, обязательно в тэг кода

Код:
<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>

Вид: http://ardia.f-rpg.ru/viewtopic.php?id=9#p104
http://s3.uploads.ru/9tmYz.gif

+2

635

Джи
неть http://smayly.ru/gallery/anime/DragonBrothers/jcdragon-cry.gif

0

636

Turante
Как ответил на саппорте, этот скрипт не умеет такие умные дела делать. Попробуйте этот скрипт:
Сворачивание информации под N-кнопок в профиле топика

Добавлено спустя 14 минут 4 секунды:
В настройках скрипта можно указать вертикальное расположение спойлеров (а не горизонтальное, как на примере), лишние спойлеры убрать)

+1

637

morgan
убралось, но теперь чёрт знает что стало((

0

638

Turante
Адрес

0

639

morgan
http://alageiziya.rolka.su

0

640

Turante
удалить красным

.punbb .post .post-author ul, .punbb .post .post-author p {
  background:   url("https://forumstatic.ru/files/0012/0b/fd/50188.jpg") no-repeat center bottom,
url("https://forumstatic.ru/files/0012/0b/fd/85428.jpg") top  center no-repeat,
url("https://forumstatic.ru/files/0012/0b/fd/48324.jpg")  center repeat-y;

  padding: 4.5em 4em 2.5em 2.7em;
  line-height: 140%;
  margin-left: 0.5em;
  }

добавить зеленым

/* profile */
.punbb .post .post-author {
  float: left;
  width: 22.5em;
  margin-top: -2.6em;
  margin-bottom: 2em;
  overflow: hidden;
  background:   url("https://forumstatic.ru/files/0012/0b/fd/50188.jpg") no-repeat center bottom,
url("https://forumstatic.ru/files/0012/0b/fd/85428.jpg") top  center no-repeat,
url("https://forumstatic.ru/files/0012/0b/fd/48324.jpg")  center repeat-y;

  }

Как сделаете - сообщите, нужно будет отступ поправить

+1

641

morgan
сделала

0

642

Turante
В начало второго окна цсс:

Код:
.post-ul-Sp  Sp1{
padding: 0 !important;}
.post-ul-Sp  Sp2{
padding: 0 !important;}

Добавлено спустя 2 минуты 53 секунды:
добавил точку второму классу

+1

643

morgan
поставила

0

644

Turante
Извиняюсь, обновите

Код:
.post-ul-Sp.Sp1{
padding: 0 !important;}
.post-ul-Sp.Sp2{
padding: 0 !important;}

+1

645

morgan
обновила)

0

646

Turante
Всё?

0

647

morgan написал(а):

Всё?

А расстояние между кнопками можно уменьшить?

0

648

Turante
в хтмл-верхе

img.post-img-Sp {
    margin: 6px 3px;
}

Вместо 6 ставьте 0

+2

649

morgan
Большое спасибо))

0

650

morgan
Ещё кое-что заметила. Профиль стал на рамку залезать(

0

651

Turante
Пример нужен

0

652

morgan

Свернутый текст

http://sa.uploads.ru/NCBrg.png

0

653

Turante
добавить зеленое

/* profile */
.punbb .post .post-author {
  float: left;
  width: 22.5em;
  margin-top: -2.6em;
  margin-bottom: 2em;
  overflow: hidden;
background:   url("https://forumstatic.ru/files/0012/0b/fd/50188.jpg") no-repeat center bottom,
url("https://forumstatic.ru/files/0012/0b/fd/85428.jpg") top  center no-repeat,
url("https://forumstatic.ru/files/0012/0b/fd/48324.jpg")  center repeat-y;
margin-left: 10px;
  }

+2

654

morgan
ещё раз спасибо)

0

655

Можете помочь найти скрипт такого красивого описания категорий, как на этом  форуме? или это какой-то авторский скрипт, запрещённый к использованию на других форумах?
простите, за размещение ссылки

0

656

Athreena

Код:
.dborder:hover {
    background-color: #c8ab67;
    border-right: 70px solid #787c40;
    -o-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out
}

.dborder {
    width: 310px;
    padding: 10px;
    background-color: #787c40;
    border-right: 70px solid #c8ab67;
    transition-duration: .5s;
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}
.descbox {
    width: 350px;
    padding: 10px;
    font-family: garamond;
    font-size: 8px;
    text-transform: uppercase;
    text-align: justify;
    color: #000;
    letter-spacing: 2px;
    background-color: #f3eccb;
    line-height: 90%;
    border: 3px solid #836735;
}

В описание добавляешь <div class="dborder"><div class="descbox">описание</div></div>

Athreena написал(а):

простите, за размещение ссылки

что курила? х)

+1

657

morgan
спасибо большое) сейчас попробую))

morgan написал(а):

что курила? х)

не, ну знаешь, некоторым людям не нравится, когда размещают в качестве примера их форумы 0о поэтому я заранее приношу свою извинения)

0

658

morgan
почему-то не отображается вторая половина этого скрипта 0о

в идеале я вообще хотела сделать, что бы рамка полностью без деления на две части была оддного цвета, а при наведении курсора - другого, но поскольку вторая часть что-то не работает, я окончательно запуталась в цветах 0о

Отредактировано Athreena (29-04-2014 13:56:08)

0

659

Athreena

+1

660

morgan
ещё раз огромное спасибо))

0


Вы здесь » COLOR MATE » Вопросы CSS|JS » Вопросы по CSS vol. 2 ‡Обязательно оставляйте ссылку на форум!