Заказную таблицу "объявление" немного поправить...

Страница: « 1 2

Сообщений 21 страница 34 из 34

Поделиться21Чт, 21 Апр 2011 01:24:30

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Оленька, у вас там 5 пользователей, наверное есть еще один тестовый админ-ник. Киньте мне тут в ЛС ник и пароль для доступа.

Поделиться22Чт, 21 Апр 2011 14:05:19

Автор: Оленька
Заслуженный
Зарегистрирован: Вс, 23 Янв 2011
Сообщений: 126
Уважение: +5
Позитив: +3
Последний визит:
Пт, 12 Июн 2015 14:15:19

посмотрела сейчас у вас на тестовом и увидела *скриншот*
если вы имеете в виду вон тот верхний правый угол, торчащий сбоку от последней правой вкладки, то он мне совсем никак не мешает, независимо от того, как у него очертится рамка (а правое поле где?)

Поделиться23Чт, 21 Апр 2011 21:35:28

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Оленька, код вкладок пришлось переделать. Полностью меняете содержимое Объявления и убираете из HTML-низ этот скрипт

Код:

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/j
query.min.js"></script>
    <script type="text/javascript">
    $(function() {
       $('ul.tabs').delegate('li:not(.current)', 
'click', function() {
         $(this).addClass('current').siblings
().removeClass('current')
           .parents('div.section').find('div.box').hide
().eq($(this).index()).fadeIn(10);
       })
    })
    </script>

Далее, вставляете это в HTML-верх

Код:

<style>
.container1 {width: 100%; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 48px;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
padding-top: 4px!important;
    height: 44px;
vertical-align: middle;    
border: 0px;
border-top: 1px solid gray;
    border-bottom: 0px solid gray;
        border-right: 1px solid gray;
        border-left: 1px solid gray;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
width: 16%;
text-align: center;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

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

ul.tabs li a:hover {
       background: url();
       text-decoration: none!important;
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  

}    

ul.tabs li.active  {
    text-decoration: none!important;
    background: url();
background-color: #E3F1FF;    
    border-bottom: 0px solid #000000;
        border-top: 1px solid #000000;    
        border-left: 1px solid #000000;    
        border-right: 1px solid #000000;   
}  

ul.tabs li.active a:hover  {
        background: url();
    text-decoration: none!important;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 100%;
    height: 350px;
    background-image : url();   
background-color: transparent;  
    border-bottom: 1px solid #000;
        border-top: 1px solid #000;    
        border-left: 1px solid #000;    
        border-right: 1px solid #000;  

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

.tab_content {
    padding: 5px;
}

</style>

Это вставляете в Объявление

Код:

<!-- начало скриптов вкладок -->
<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="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 395px;">
    <tr>
    <td style="width: 66%; height: 395px;">
    
<!-- Вкладки и их содержимое -->
<div class="container1">
<ul class="tabs">
    <li class="active"><a href="#tab1">разные разности</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
    <li><a href="#tab4">Вкладка 4</a></li>
    <li><a href="#tab5">Вкладка 5</a></li>
    <li><a href="#tab6">Вкладка 6</a></li>
</ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
<div style="width:100%; height: 340px; overflow:auto; overflow-x:hidden; padding:1px;">

содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками) содержание меню 1 (будет отображаться сразу же при загрузке страницы с вкладками)

</div></div>

<div style="display: none;" id="tab2" class="tab_content">
<div style="width:100%; height: 340px; overflow:auto; overflow-x:hidden; padding:1px;">
текст 2
</div></div>

<div style="display: none;" id="tab3" class="tab_content"> 
<div style="width:100%; height: 340px; overflow:auto; overflow-x:hidden; padding:1px;">
текст 3
</div></div>

<div style="display: none;" id="tab4" class="tab_content"> 
<div style="width:100%; height: 340px; overflow:auto; overflow-x:hidden; padding:1px;">
текст 4
</div></div>

<div style="display: none;" id="tab5" class="tab_content"> 
<div style="width:100%; height: 340px; overflow:auto; overflow-x:hidden; padding:1px;">
текст 5
</div></div>

<div style="display: none;" id="tab6" class="tab_content"> 
<div style="width:100%; height: 340px; overflow:auto; overflow-x:hidden; padding:1px;">
текст 6
</div></div>

      </div>
    </div>
<!-- Конец вкладок и их содержимого  -->    
    </td>
    <td style="width : 34%; height: 395px; padding:2px;" valign="top">
<div align="center" style="width: 100%; height: 390px; overflow: auto; overflow-x: hidden; padding: 3px;"><div style="padding: 5px; text-align: center; font-weight: bold; font-size: 12pt ">
<br>ЛотрРол</div><br>

<div style="padding: 5px; text-align: center; font-weight: bold">
Создатель:</div>
<div style="padding: 5px; text-align: center;">
Саруман<br></div>

<div style="padding: 5px; text-align: center; font-weight: bold">
Администраторы:</div>
<div style="padding: 5px; text-align: center;">
Эовин<br>Лотиэль<br>Хайна<br></div>

<div style="padding: 5px; text-align: center; font-weight: bold">
Мастера игры:</div>
<div style="padding: 5px; text-align: center;">
Раданг (4Э)<br>Элрохир (ВК)<br>нужны ещё !<br></div>

<div style="padding: 5px; text-align: center; font-weight: bold">
Модераторы:</div>
<div style="padding: 5px; text-align: center;">
Раданг<br>Элрохир<br>Торин Дромангорг<br>Артакано<br>Фарамир<br>Маухур<br>Лисандра<br></div>

<div style="padding: 5px; text-align: center; font-weight: bold">
Особые благодарности:</div>
<div style="padding: 5px; text-align: center;">
Раданг<br>Feanaro<br>Бергил (Боромир)<br>Келаст<br>Натария<br>Лотиэль<br>Ирэн<br>Gandalf<br></div></div>
    </td>
   </tr>
</table>

Отредактировано Кофеман (Чт, 21 Апр 2011 21:48:01)

Поделиться24Чт, 21 Апр 2011 21:38:17

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51115
Уважение: +15197
Позитив: +11572
Последний визит:
Вчера 22:18:52

Кофеман :glasses: А смысл выкладывать коды всякий раз в блоке цитат на пол-страницы - а не под кнопку код ? (прост тяжк потом страницу осматривать..

Поделиться25Чт, 21 Апр 2011 21:44:03

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Теперь некоторые пояснения.
То, о чем Вы просите, постоянно менять высоту таблицы в зависимости от содержимого правой колонки - бред. Вы представляете себе, если таблица будет занимать больше, чем видимое пространство в окне браузера?
Поэтому, если Вам так важно в правую колонку пихать длинную портянку, то я сделал там прокрутку. Это позволит таблице иметь постоянную высоту.

Относительно вкладок.
Высота вкладки меняется в нескольких местах

ul.tabs {
...
height: 48px;
width: 100%;

И тут

...
ul.tabs li {
...
padding-top: 4px!important;
height: 44px;
vertical-align: middle; ....

Ширина вкладок меняется здесь:

ul.tabs li {
...
position: relative;
width: 16%;
...
}

Формула простая - 100% делите на количество вкладок и результат округляете к меньшему целому числу. Остаток будет в виде кусочка справа, в виде полоски, или правильнее - верхней границы содержимого вкладки.

зы. Сорри. Спасибо Deff, исправил.

Отредактировано Кофеман (Чт, 21 Апр 2011 21:48:45)

Поделиться26Чт, 21 Апр 2011 23:41:48

Автор: Оленька
Заслуженный
Зарегистрирован: Вс, 23 Янв 2011
Сообщений: 126
Уважение: +5
Позитив: +3
Последний визит:
Пт, 12 Июн 2015 14:15:19

спасибо.
в ближайшее время примерею и расскажу что получилось =)
чувствую, кое-что нам опять придётся исправлять
спокойной ночи.

Отредактировано Оленька (Чт, 21 Апр 2011 23:43:18)

Поделиться27Пт, 22 Апр 2011 11:03:02

Автор: Оленька
Заслуженный
Зарегистрирован: Вс, 23 Янв 2011
Сообщений: 126
Уважение: +5
Позитив: +3
Последний визит:
Пт, 12 Июн 2015 14:15:19

СПАСИБО !!!!
ВСЁ ПРОСТО СУПЕР !

Только надо чтоб ярлычок активной вкладки не выделялся цветом
Мона ? :blush: :rolleyes:

Поделиться28Пт, 22 Апр 2011 11:30:55

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Оленька написал(а):

Только надо чтоб ярлычок активной вкладки не выделялся цветом Мона ?

Оленька, нет, нельзя. Иначе у Вас станет видна граница. Никто еще не придумал способа вытереть только кусок границы какого-либо элемента. Для этого ярлычок наезжает на границу и закрашивается цветом, чтоб скрыть участок ее под собой.

У себя исправьте вот тут цвет.

.....
ul.tabs li.active {
text-decoration: none!important;
background: url();
background-color: #282828;
border-bottom: 0px solid #000000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
.......

Это фоновый цвет Вашего форума. Тогда у Вас будет иллюзия, что ярлычок прозрачный.

Отредактировано Кофеман (Пт, 22 Апр 2011 11:34:11)

Поделиться29Пт, 22 Апр 2011 12:05:29

Автор: Оленька
Заслуженный
Зарегистрирован: Вс, 23 Янв 2011
Сообщений: 126
Уважение: +5
Позитив: +3
Последний визит:
Пт, 12 Июн 2015 14:15:19

Кофеман, спасибо, поняла.
А покажите команды, которые отвечают за высоту всей этой таблицы. Хочу с ними поэкспериментировать. Я предположила что это height со значениями 395 (всего) и 340 (у содержимого вкладок). Но уменьшение ничего не дало.

Отредактировано Оленька (Пт, 22 Апр 2011 12:05:45)

Поделиться30Пт, 22 Апр 2011 12:09:45

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Оленька, общая высота таблицы меняется тут

<table border="0" cellspacing="0" cellpadding="0" style="width: 100%; height: 395px;">

Высота первого столбца, совпадает с общей высотой и меняется тут

<td style="width: 66%; height: 395px;">

И, соответственно, второго столбца, так же совпадает с общей высотой и меняется тут

<td style="width : 34%; height: 395px; padding:2px;" valign="top">

Поделиться31Пт, 22 Апр 2011 12:16:49

Автор: Оленька
Заслуженный
Зарегистрирован: Вс, 23 Янв 2011
Сообщений: 126
Уважение: +5
Позитив: +3
Последний визит:
Пт, 12 Июн 2015 14:15:19

Кофеман, не помогает...

Поделиться32Пт, 22 Апр 2011 12:19:03

Автор: Оленька
Заслуженный
Зарегистрирован: Вс, 23 Янв 2011
Сообщений: 126
Уважение: +5
Позитив: +3
Последний визит:
Пт, 12 Июн 2015 14:15:19

ААА, всё-всё, я нашла.
это в поле хтмл в .tab_container1 значение height мне было нужно.
Видимо вы меня не так поняли =)

* * * *
Кафеману СПАСИБО ! (плюсов в репу дать? больше не знаю как выразить свою благодарность )))

* * * *
Администрацию прошу тему не удалять и не закрывать. Потому что всё равно что-то возникнет, чтобы не плодить новые темы.
Впрочем, на ваше усмотрение.

Отредактировано Оленька (Пт, 22 Апр 2011 12:27:38)

Поделиться33Пт, 22 Апр 2011 12:27:03

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Оленька написал(а):

Видимо вы меня не так поняли =)

Нет, это просто кто-то так поясняет, что ему нужно.

Поделиться34Пт, 22 Апр 2011 12:28:40

Автор: Оленька
Заслуженный
Зарегистрирован: Вс, 23 Янв 2011
Сообщений: 126
Уважение: +5
Позитив: +3
Последний визит:
Пт, 12 Июн 2015 14:15:19

Кофеман,

:cool:

Страница: « 1 2

Единый форум поддержки

Меню навигации

Пользовательские ссылки

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

Заказную таблицу "объявление" немного поправить...

Сообщений 21 страница 34 из 34

Поделиться21Чт, 21 Апр 2011 01:24:30

Поделиться22Чт, 21 Апр 2011 14:05:19

Поделиться23Чт, 21 Апр 2011 21:35:28

Поделиться24Чт, 21 Апр 2011 21:38:17

Поделиться25Чт, 21 Апр 2011 21:44:03

Поделиться26Чт, 21 Апр 2011 23:41:48

Поделиться27Пт, 22 Апр 2011 11:03:02

Поделиться28Пт, 22 Апр 2011 11:30:55

Поделиться29Пт, 22 Апр 2011 12:05:29

Поделиться30Пт, 22 Апр 2011 12:09:45

Поделиться31Пт, 22 Апр 2011 12:16:49

Поделиться32Пт, 22 Апр 2011 12:19:03

Поделиться33Пт, 22 Апр 2011 12:27:03

Поделиться34Пт, 22 Апр 2011 12:28:40