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

Объявление

GEMcross

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

Посетить

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

Платформа: MyBB.ru (RusFF)
Стоимость: 8000 рублей;
Авторы: Moju & Gerda

Посмотреть

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

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

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

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

Поиск роли на текстовых ролевых
Проект от специалистов 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
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ 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 2  
Тема закрыта

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

1

  • Автор: Аурум
  • Бестелесный дух прошлого
  • Аурум
  • Уважение: +0

Добрый день!

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

  • Автор: Jii-Jo
  • Бестелесный дух прошлого
  • Jii-Jo
  • Уважение: +394

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

0

3

  • Автор: Аурум
  • Бестелесный дух прошлого
  • Аурум
  • Уважение: +0

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

  • Автор: Аурум
  • Бестелесный дух прошлого
  • Аурум
  • Уважение: +0

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

0

5

  • Автор: Jii-Jo
  • Бестелесный дух прошлого
  • Jii-Jo
  • Уважение: +394

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

+1

6

  • Автор: Jii-Jo
  • Бестелесный дух прошлого
  • Jii-Jo
  • Уважение: +394

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

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

  • Автор: Аурум
  • Бестелесный дух прошлого
  • Аурум
  • Уважение: +0

Jii-Jo

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

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

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

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

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

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

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

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

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

0

8

  • Автор: Аурум
  • Бестелесный дух прошлого
  • Аурум
  • Уважение: +0

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

0

9

  • Автор: Jii-Jo
  • Бестелесный дух прошлого
  • Jii-Jo
  • Уважение: +394

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

0

10

  • Автор: Deff
  • Жерар Депардье
  • Deff
  • Уважение: +3482
  • Достижения/подарки: cake 4 emoji_events 4
  • Наградные баллы: 122

Аурум
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

Тема закрыта
Страница: 1 2