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

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

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

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

Подробнее
Внимание, до 30.09 идёт набор заявок в котолотерею (тур I, "Сентябрьский кот")! Не пропустите!
Внимание! Нужно ваше мнение! Выбираем новый логотип, новую стилистику и новую разметку заявок для проекта ролевых заявок.

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

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



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

Сообщений 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>

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

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0