ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 Разговорный стрим "Время уDEVительных историй"

Дата и время: начало 17 февраля в 17:00 по МСК;
Сделаем обзор на дизайн из нашей постоянной рубрики и расскажем последние новости комьюнити.
Потом будет сессия вопросов и ответов. Прозвучат провокационные и неоднозначные вопросы.
Расчехляйте свой вопросомёт! 🔥 🔥 🔥

Подробности

☕ 7 вечеров с Авалон

Дата: с 17 по 24 февраля;
Тема разговора: администрирование проекта, создание видео и другое творчество;
Присоединяйтесь к обсуждению и подготовьте свои вопросы!

Задать вопрос

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже два года.

Посетить

TVD: FACELESS

В каждой истории есть две стороны.
Я и герой, и злодей.

Посетить

ЭНТЕРОС

Магия и технологии, эпизоды, 18+
ПутеводительХотим видетьРасы

Посетить

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

💰 Продаётся: функционал, упрощающий жизнь админу форума

Ивент-календарь, вкладки и слайдеры в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.
Ультимативный список тем - картинки, описания и иконки для топиков.

Как купить

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
🎨 Голосуйте за лучшие парные аватарки до 29.02! Отдать голос.
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



[Выполнено] Контейнер с вкладками + таблица.

Сообщений 1 страница 10 из 14

1

Добрый день!

1. Ссылка на форум:
http://iwrite-real.ru/
2. Эскиз таблицы:
немножко криво-косо, извините.

Вкладка 1

http://s1.ipicture.ru/uploads/20130722/RVvWgb2B.png

Вкладка 2

http://s1.ipicture.ru/uploads/20130722/MpJpTNzM.png

Вкладка 3

http://s1.ipicture.ru/uploads/20130722/Q1fjCLuf.png

3. Дополнительные предпочтения:
пожалуйста, если так можно - изначально код со всеми границами-бордюрами, любого цвета, но укажите, как это потом убрать.
если возможно - чтобы между ячейками таблицы автоматически было расстояние - как на эскизе, дабы текст не сливался.
на кривизну, пожалуйста, не обращайте внимания, хотелось бы все ровно.
названия вкладок - по центру, таблица же на почти на всю ширину объявления - примерно 780px.
все ячейки и контейнеры без полос прокрутки.
текст во всех ячейках центрованный. изображения тоже.

Спасибо, если кто нибудь найдет время взяться. Собственные опыты оказались неудачными.

Отредактировано Jii-Jo (30.08.13 16:45)

0

2

Аурум
Доброго дня.
Ни одна из вкладок не открывается.
Пожалуйста, перезалейте с:

0

3

Jii-Jo
извините, вот сейчас на другой хост перезалила, должно отображаться.

1

http://www.pictureshack.ru/view_7353_vkladka_1.PNG

2

http://www.pictureshack.ru/view_83164_vkladka_2.PNG

3

http://www.pictureshack.ru/view_26995_vkladka_3.PNG

0

4

5

Аурум
Ну а проще было залить через форум, да.
Беру на выполнение. с:

+1

6

Аурум
Было бы хорошо, если бы сразу дали картинку в первую вкладку. чтобы сразу подогнать все.
А так держите коды:

HTML-верх
СТИЛИ, КАК И ЧТО МЕНЯТЬ

1. Поменять цвет бэкграунда таблицы

.tab_container1 {
    clear: both;
    float: left;
    width: 800px;
    height: 283px;
    background: rgb(219, 219, 187);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;   
        border-left: 0px solid #000000;   
        border-right: 0px solid #000000;
 
}

Значение цвета(он прописан в rgba) меняем на свое. можно писать как в rgb, так и в hex.
Далее идет оформление - закругление и границы.
2. Поменять цвета кнопок при обычном/активном состоянии

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;
    background: rgba(219, 219, 187, 0.78);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    overflow: hidden;
    position: relative;
}

Это обычное состояние. можете писать как в rgb, так и в обычном hex. rgba - это цвет с прозрачностью, установленной CSS. В нашем случае это значение 0.78. Border-radius - это закругление краев. если что, можно убрать с:

html ul.tabs li.active  {
    background: rgb(219, 219, 187);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;

}

Это при нажатом состоянии. Так же - меняем цвет.

Код:
<style>
.container1 {width: 900px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width: 100%;
    margin-left: 250px;
    font-size: 14px;
}
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;
    background: rgba(219, 219, 187, 0.78);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    outline: none;
}

ul.tabs li a:hover {
       background: url();
    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  {
    background: rgb(219, 219, 187);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}  

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

.tab_container1 {
    clear: both;
    float: left; 
    width: 800px;
    height: 283px;
    background: rgb(219, 219, 187);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border-bottom: 1px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  
}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
    border-bottom: 0px dashed #000000;
}
</style>
HTML-низ
Код:
<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>
Объявление
СТИЛИ А-ЛЯ ПРОСТО ГРАНИЦЫ

Чтобы убрать границы, в каждом блоке ищем начало этой таблицы:

<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">

Выделенное - это ширина границы, Чтобы ее не было ставим 0 или убираем пункт

Код:
<ul class="tabs">
    <li class="active"><a href="#tab1">Главная</a></li>
    <li><a href="#tab2">Карта</a></li>
    <li><a href="#tab3">Игра</a></li>
</ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
    <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
    	<tbody>
        <tr>
        	<td rowspan="2" style="text-align: center; width: 500px;">
            <div style="height: 260px; text-align: center; overflow: scroll; overflow-x: hidden; width: 500px; ">
            	текст</div>
        	</td>
        	<td style="text-align: center; width: 270px;">
            <div style="height: 120px; text-align: center; width: 270px;">
            	<img alt="" src="ссылка_" /></div>
        	</td>
        </tr>
        <tr>
        	<td style="text-align: center;width: 270px;">
            <div style="height: 120px; text-align: center; overflow: scroll; overflow-x: hidden; width: 270px;">
            	текст</div>
        	</td>
        </tr>
    	</tbody>
    </table>
</div>

<div style="display: none;" id="tab2" class="tab_content">
    <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
    	<tbody>
        <tr>
        	<td rowspan="3" style="text-align: center; width: 446px; height: 120px;">
            <div style="height: 250px; text-align: center; width: 426px; overflow: auto; padding: 5px;">
            	текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div>
        	</td>
        	<td style="text-align: center; height: 40px; width: 310px;">
            <div style="height: 53px; text-align: center; width: 330px; overflow: auto; padding: 5px;">
            	текст 1</div>
        	</td>
        </tr>
        <tr>
        	<td style="text-align: center; height: 40px; width: 330px;">
            <div style="height: 53px; text-align: center; width: 330px; overflow: auto; padding: 5px;">
            	текст 2</div>
        	</td>
        </tr>
        <tr>
        	<td style="text-align: center; height: 40px; width: 310px;">
            <div style="height: 53px; text-align: center; width: 310px; overflow: auto; padding: 5px;">
            	текст 3</div>
        	</td>
        </tr>
    	</tbody>
    </table>
</div>

<div style="display: none;" id="tab3" class="tab_content"> 
    <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
    	<tbody>
        <tr>
        	<td style="text-align: center; width: 45%;"> 
            	<div style="height: 260px; text-align: center; overflow: scroll; overflow-x: hidden; width: 257px; ">
            1
            	<div></td>
        	<td style="text-align: center;">
            	<div style="height: 260px; text-align: center; overflow: scroll; overflow-x: hidden; width: 257px; ">
            2
            	<div></td>
        	<td style="text-align: center;">
            	<div style="height: 260px; text-align: center; overflow: scroll; overflow-x: hidden; width: 257px; ">
            3
            	<div></td>
        </tr>
    	</tbody>
    </table>
</div>

      </div>

+1

7

Jii-Jo

Jii-Jo написал(а):

Ну а проще было залить через форум, да.

я пыталась) не удалось, к сожалению.

Jii-Jo написал(а):

Было бы хорошо, если бы сразу дали картинку в первую вкладку. чтобы сразу подогнать все.

я планировала подгонять картинку под таблицу. для моего понимания это несколько проще.

Jii-Jo написал(а):

А так держите коды:

спасибо вам огромное! сейчас буду пробовать заполнять.

0

8

Jii-Jo
извините за вопрос, но никак нельзя убрать эти полосы?(
http://prntscr.com/1hokju

0

9

Аурум
странно, у меня этого нет о_о
ссылку на тестовый, если можно с:

0

10

Аурум
http://uploads.ru/i/K/Z/U/KZUwI.gif
Я бы поменял стиль подфорумов в HTML верх

Код:
<style>
.divParentFor span.title {
   text-shadow:#1C437E 2px 2px 2px,
  #B8D4F9 -1px -1px 3px,
  #3E6290 3px 3px 9px,
  #000 1px 1px 0;
    color:#fff;
}
"подфорумы - тень"
</style>
<style>
.punbb td div.tclcon {
margin-left: 38px;
}
.divParentFor {
margin:0!important;
}
.divParentFor span.title {
margin-left: 0px;
   text-shadow:#1C437E 2px 2px 2px,
  #B8D4F9 -1px -1px 3px,
  #3E6290 3px 3px 9px,
  #000 1px 1px 0;
    color:#fff;
}
"подфорумы - отступ"
</style>
<style>
.punbb .divParentFor .tclcon a { /*без наведения курсора*/
font-size:110%;
text-shadow: 1px 1px 1px #99C4BA;

}
.punbb .divParentFor .tclcon a:hover { /*при наведения курсора*/
color: ;
text-shadow: 1px 1px 1px #AAAA00;
}
.divParentFor span.title {
font-size:118%;
   text-shadow:#1C437E 2px 2px 2px,
  #B8D4F9 -1px -1px 3px,
  #3E6290 3px 3px 9px,
  #000 1px 1px 0;
    color:#fff;
}
"размер, цвет ссылко - подфорумы"
</style>

Ибо тень у ссылок слишком жирная

0