info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ Сообщений: 27 ]  1 2 3

Автор Сообщение
Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 6 лет 9 месяцев 15 дней
Сообщения: 1190
Откуда: здешние мы


Стиль: subsilver2


Репутация: 9


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


само собой. недо ведь код встраивать, а не целую html-страницу. для примера создана отдельная страница. c <html>, <body>... вам же нужен только код.

то есть:

проверьте, есть ли у вас в шапке (overall_header.html) код аодключения библотеки

Код: Выделить всё

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


если нет - пропишите его там перед </head>

дальше. этот код (самой кнопки) у вас уже точно есть и прописывать его заново смыла нет (будут совпадения и ошибки чтения)

Код: Выделить всё

.button{float:left;margin:2px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;display:inline-block;text-align:center;_border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.button:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.button:active{position:relative;top:1px;}
a.button{color:#FFFFFF;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}


теперь выкинув из кода перебора всё лишнее, получим ваш файл:

Код: Выделить всё

<!-- INCLUDE overall_header.html -->
<!-- new info block on -->
<table width="100%">
  <tr>
    <td width="30%" align="left">
    <!-- IF U_MCP --><a href="{U_MCP}" title="{L_MCP}"><img src="{T_THEME_PATH}/images/001.png" alt="{L_MCP}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
    <!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_ACTIVE_TOPICS}" title="{L_SEARCH_ACTIVE_TOPICS}"><img src="{T_THEME_PATH}/images/002.png" alt="{L_SEARCH_ACTIVE_TOPICS}" style="margin:0 20px 0 0;" /></a>
   <!-- IF S_USER_LOGGED_IN or S_LOAD_UNREADS --><!-- IF S_LOAD_UNREADS --><a href="{U_SEARCH_UNREAD}" title="{L_SEARCH_UNREAD}"><img src="{T_THEME_PATH}/images/004.png" alt="{L_SEARCH_UNREAD}"  style="margin:0 20px 0 0;" /></a><!-- ENDIF --><!-- ENDIF -->
   <!-- ENDIF -->
    <!-- IF not S_IS_BOT and U_MARK_FORUMS --><a href="{U_MARK_FORUMS}" accesskey="m" title="{L_MARK_FORUMS_READ}"><img src="{T_THEME_PATH}/images/003.png" alt="{L_MARK_FORUMS_READ}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- ENDIF -->
    </td>
    <td width="30%" align="center" valign="middle"><p>{CURRENT_TIME}</p></td>
    <td width="30%">&nbsp;</td>
   </tr>
</table>
<!-- new info block off -->
<!-- IF RECENT_TOPICS_DISPLAY --><!-- INCLUDE recent_topics_body.html --><!-- ENDIF -->

<!-- INCLUDE gallery/imageblock_body.html -->
<!-- INCLUDE forumlist_body.html -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
   <form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
   <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
      <fieldset class="quick-login">
         <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
         <label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
         <!-- IF S_AUTOLOGIN_ENABLED -->
            | <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
         <!-- ENDIF -->
         <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
         {S_LOGIN_REDIRECT}
      </fieldset>
   </form>
<!-- ENDIF -->





<script type="text/JavaScript">
$(document).ready(function() {

   //Действие по умолчанию
   $(".tab_content").hide(); //Скрыть все содержимое
   $("ul.tabs span:first").addClass("active").show(); //Активировать первую вкладку
   $(".tab_content:first").show(); //Показать первые содержание вкладке
   
   //По щелчку события
   $("ul.tabs span").click(function() {
      $("ul.tabs span").removeClass("active"); //Удалите все "active" класс
      $(this).addClass("active"); //Добавить "active" класса выбранной вкладки
      $(".tab_content").hide(); //Скрыть вкладку Все содержание
      var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки + содержание
      $(activeTab).fadeIn(); //Fade в активного содержимого
      return false;
   });

});
</script>

<style>
.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
</style>
<ul class="tabs">
<span><a class="button button-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span>
<span><a class="button button-blue" href="#tab2">{L_BIRTHDAYS}</a></span>
<span><a class="button button-blue" href="#tab3">{L_TOP_THANKS_LIST}</a></span>
<span><a class="button button-blue" style="float:right;" href="#tab4">{L_STATISTICS}</a></span>
</ul>


<div id="tab1" class="tab_content">
<br /> <!-- IF S_DISPLAY_ONLINE_LIST -->
   <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
 
<div id="tab2" class="tab_content">
<br /><!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
   <h3>{L_BIRTHDAYS}</h3>
   <p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
<div id="tab3" class="tab_content">
<br /><!-- IF S_THANKS_LIST -->
   <h3>{L_TOP_THANKS_LIST}</h3>
   <p>{THANKS_LIST}</p>
<!-- ENDIF -->
</div>
 
<div id="tab4" class="tab_content">
<br /><!-- IF NEWEST_USER -->
   <h3>{L_STATISTICS}</h3>
   <p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} <!-- IF TOTAL_IMAGES --> &bull; {TOTAL_IMAGES}<!-- ENDIF --> &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->
</div>



<!-- INCLUDE overall_footer.html -->


как-то так...


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
javascript
Не в сети
(Дмитрий)  
2019-07-08 
Аватара пользователя

Стаж: 5 лет 5 месяцев 24 дня
Сообщения: 729


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Вот жеж. :dash3: Это надо понимать, где скрипт подключать надо. :bm:
Пошел пробовать :) Спасибо! :arigato:

Добавлено спустя 13 минут 36 секунд:
Почти получилось! :idea:
Выглядит это так:

Изображение

Почему то кнопочки не отобразились :? Хотя они у меня действительно прописаны и меню из них верхнее, и кнопки в постах :?

Еще пробел бы убрать, он явно лишний.

А скруглить этот блок можно же тут, да?

Код: Выделить всё

<style>
.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
</style>


а именно добавить border-radius: 5px; сюда

Код: Выделить всё

.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1; border-radius: 5px;}
Верно? :)


Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 6 лет 9 месяцев 15 дней
Сообщения: 1190
Откуда: здешние мы


Стиль: subsilver2


Репутация: 9


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


кнопки отобразились. просто синие на синем фоне.

добавьте в код ссылок белый цвет:

Код: Выделить всё

<ul class="tabs">
<span><a class="button button-blue" href="#tab1" style="color:white;">{L_WHO_IS_ONLINE}</a></span>
<span><a class="button button-blue" href="#tab2" style="color:white;">{L_BIRTHDAYS}</a></span>
<span><a class="button button-blue" href="#tab3" style="color:white;">{L_TOP_THANKS_LIST}</a></span>
<span><a class="button button-blue" style="float:right;color:white;" href="#tab4">{L_STATISTICS}</a></span>
</ul>


Добавлено спустя 5 минут 31 секунду:
а можете просто другой код прописать этих кнопок (обозвать по другому). тогда они не будут конфликтовать с предыдущими выводами...

ваш полный код:

Код: Выделить всё

<!-- INCLUDE overall_header.html -->
<!-- new info block on -->
<table width="100%">
  <tr>
    <td width="30%" align="left">
    <!-- IF U_MCP --><a href="{U_MCP}" title="{L_MCP}"><img src="{T_THEME_PATH}/images/001.png" alt="{L_MCP}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
    <!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_ACTIVE_TOPICS}" title="{L_SEARCH_ACTIVE_TOPICS}"><img src="{T_THEME_PATH}/images/002.png" alt="{L_SEARCH_ACTIVE_TOPICS}" style="margin:0 20px 0 0;" /></a>
   <!-- IF S_USER_LOGGED_IN or S_LOAD_UNREADS --><!-- IF S_LOAD_UNREADS --><a href="{U_SEARCH_UNREAD}" title="{L_SEARCH_UNREAD}"><img src="{T_THEME_PATH}/images/004.png" alt="{L_SEARCH_UNREAD}"  style="margin:0 20px 0 0;" /></a><!-- ENDIF --><!-- ENDIF -->
   <!-- ENDIF -->
    <!-- IF not S_IS_BOT and U_MARK_FORUMS --><a href="{U_MARK_FORUMS}" accesskey="m" title="{L_MARK_FORUMS_READ}"><img src="{T_THEME_PATH}/images/003.png" alt="{L_MARK_FORUMS_READ}" style="margin:0 20px 0 0;" /></a><!-- ENDIF -->
    <!-- ENDIF -->
    </td>
    <td width="30%" align="center" valign="middle"><p>{CURRENT_TIME}</p></td>
    <td width="30%">&nbsp;</td>
   </tr>
</table>
<!-- new info block off -->
<!-- IF RECENT_TOPICS_DISPLAY --><!-- INCLUDE recent_topics_body.html --><!-- ENDIF -->

<!-- INCLUDE gallery/imageblock_body.html -->
<!-- INCLUDE forumlist_body.html -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
   <form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
   <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
      <fieldset class="quick-login">
         <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
         <label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
         <!-- IF S_AUTOLOGIN_ENABLED -->
            | <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
         <!-- ENDIF -->
         <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
         {S_LOGIN_REDIRECT}
      </fieldset>
   </form>
<!-- ENDIF -->





<script type="text/JavaScript">
$(document).ready(function() {

   //Действие по умолчанию
   $(".tab_content").hide(); //Скрыть все содержимое
   $("ul.tabs span:first").addClass("active").show(); //Активировать первую вкладку
   $(".tab_content:first").show(); //Показать первые содержание вкладке
   
   //По щелчку события
   $("ul.tabs span").click(function() {
      $("ul.tabs span").removeClass("active"); //Удалите все "active" класс
      $(this).addClass("active"); //Добавить "active" класса выбранной вкладки
      $(".tab_content").hide(); //Скрыть вкладку Все содержание
      var activeTab = $(this).find("a").attr("href"); //Найти относительной значение атрибута для выявления активной вкладки + содержание
      $(activeTab).fadeIn(); //Fade в активного содержимого
      return false;
   });

});
</script>

<style>
.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond{float:left;margin:2px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;display:inline-block;text-align:center;_border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttond:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttond:active{position:relative;top:1px;}
a.buttond{color:#FFFFFF;}
.buttond-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.buttond-blue:active{background:#4477a1;}
</style>
<ul class="tabs">
<span><a class="buttond buttond-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span>
<span><a class="buttond buttond-blue" href="#tab2">{L_BIRTHDAYS}</a></span>
<span><a class="buttond buttond-blue" href="#tab3">{L_TOP_THANKS_LIST}</a></span>
<span><a class="buttond buttond-blue" style="float:right;" href="#tab4">{L_STATISTICS}</a></span>
</ul>


<div id="tab1" class="tab_content">
<br /> <!-- IF S_DISPLAY_ONLINE_LIST -->
   <!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
   <p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
 
<div id="tab2" class="tab_content">
<br /><!-- IF S_DISPLAY_BIRTHDAY_LIST and BIRTHDAY_LIST -->
   <h3>{L_BIRTHDAYS}</h3>
   <p><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
<!-- ENDIF -->
</div>
 
<div id="tab3" class="tab_content">
<br /><!-- IF S_THANKS_LIST -->
   <h3>{L_TOP_THANKS_LIST}</h3>
   <p>{THANKS_LIST}</p>
<!-- ENDIF -->
</div>
 
<div id="tab4" class="tab_content">
<br /><!-- IF NEWEST_USER -->
   <h3>{L_STATISTICS}</h3>
   <p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} <!-- IF TOTAL_IMAGES --> &bull; {TOTAL_IMAGES}<!-- ENDIF --> &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
<!-- ENDIF -->
</div>

<!-- INCLUDE overall_footer.html -->


ушёл по делам.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-08 
Аватара пользователя

Стаж: 5 лет 5 месяцев 24 дня
Сообщения: 729


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Ага, по второму варианту получилось. :idea: Спасибо, Андрей! :arigato:
Только вот пробел убрать не могу :?
тэги <p> по убирал - не помогло :( Пробел явно лишний :cry:
Скругление добавил.
А что если эти кнопки прямо в блок засунуть, а? Тогда бы и накладок не было, и выглядело красиво :)

Изображение

Добавлено спустя 16 минут 35 секунд:
Скруглил только нижние края + удалил дни рождения. Они выводятся сверху, когда они есть. Получилось очень даже красиво.
Осталось только пробел/отступ грохнуть.
Андрей, подскажи плз, если знаешь :oops:

Изображение

Добавлено спустя 12 минут 56 секунд:
Хотел также спросить это фиксированный размер блока? А если будет больше пользователей во вкладке КТО СЕЙЧАС НА КОНФЕРЕНЦИИ. Он будет автоматом растягиваться? Такое впечатление, что все вкладки одинаковые по размеру блока и он определяется именно содержимым первой вкладки :?
P.S. Думаю еще перетащить кнопки из верхнего меню, в нижнее. Тут мне уже все понятно стало :idea: Классная доработка. :idea:


Не в сети
(Андрей)  
2019-07-08 
Администратор
Аватара пользователя

Стаж: 6 лет 9 месяцев 15 дней
Сообщения: 1190
Откуда: здешние мы


Стиль: subsilver2


Репутация: 9


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Dmitry писал(а):

Осталось только пробел/отступ грохнуть.


из строки

Код: Выделить всё

<div id="tab1" class="tab_content">
<br />


уберите <br />

убрать с каждой.

размер блока по длине - резиновый, по ширине - фиксированный. правится здесь:

Код: Выделить всё

.tab_content{height:150px;padding:10px;margin-right:-4px;;background-color:#FFFFFF;border:1px solid #4477a1;}


Код: Выделить всё

height:150px - ширина.


можно попробовать написать min-height:150px;, тогда вроде долно быть фиксировано минимально 150, а при увеличении информации должен растягиваться. попробуйте.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-09 
Аватара пользователя

Стаж: 5 лет 5 месяцев 24 дня
Сообщения: 729


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Блин, сам не допер до br. :dash3: Сегодня вечером все сделаю :idea:
Надо еще немного фон подогнать и обрамление кнопок сделать белым цветом.
Как получится, отпишусь.
Реально очень качественная и нужная доработка. :idea:
Форум более приятным становится :)
Спасибо, Андрей :arigato:

Добавлено спустя 5 часов 32 минуты 36 секунд:
Убрал br, не помогло :cry:

Добавлено спустя 4 минуты 27 секунд:
Как то это связанно с h3 блока <div id="tab1" class="tab_content"> :?

Изображение


Не в сети
(Андрей)  
2019-07-09 
Администратор
Аватара пользователя

Стаж: 6 лет 9 месяцев 15 дней
Сообщения: 1190
Откуда: здешние мы


Стиль: subsilver2


Репутация: 9


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


попробуйте убрать внутренний отступ:

в строке

Код: Выделить всё

.tab_content{height:150px;padding:10px;


заменить padding:10px; на padding:0;

либо можно попытаться отрегулировать всё внутри отступами. тогда заменить

padding:10px; на padding:-10px 10px 0 10px;, где (по порядку)

-10px - отступ сверху внутри блока
10px - отступ справа
0 - отступ снизу
10px - отступ слева...


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-09 
Аватара пользователя

Стаж: 5 лет 5 месяцев 24 дня
Сообщения: 729


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


К сожалению отступ сохраняется, padding:-10px не работает :cry: :dash3:
Показывает варнинг при просмотре кода :?

Изображение

Выставил так: padding:0px 10px 0 10px;
Отступ уменьшился, но все равно остался

Добавлено спустя 9 минут 50 секунд:
И еще один очень важный вопрос.
Сейчас внимательно посмотрев внедренные кнопочки на форуме.
Они оказались у меня все разными :o
В посте стиль такой:

Код: Выделить всё

<style>
#dop_fix {float:right;margin:10px;}
ul.dop,ul.dop li{list-style:none;margin:0;padding:0;}
ul.dop li{float:left;display:block;height:26px;}
ul.dop li a {color:#ffffff;font-weight:normal;text-decoration:none;}
.buttonn{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttonn:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttonn:active{top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
.button-green{background:#428739;background:-webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739));background:-moz-linear-gradient(-90deg, #c8dd95, #428739);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');}
.button-green:hover{background:#c8dd95;background:-webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95));background:-moz-linear-gradient(-90deg, #428739, #c8dd95);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');}
.button-green:active{background:#428739;}
.button-red{background:#D82741;background:-webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741));background:-moz-linear-gradient(-90deg, #E84B6E, #D82741);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');}
.button-red:hover{background:#E84B6E;background:-webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E));background:-moz-linear-gradient(-90deg, #D82741, #E84B6E);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');}
.button-red:active{background:#D82741;}
</style>


в index_body.html такой

Код: Выделить всё

<style>
.tab_content{min-height:100px;padding:0px 10px 0 10px;margin-right:-4px;;background-color:#dae5ef;border:5px solid #4477a1;border-radius: 0px 0px 5px 5px;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond{float:left;margin:2px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;display:inline-block;text-align:center;_border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttond:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttond:active{position:relative;top:1px;}
a.buttond{color:#FFFFFF;}
.buttond-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.buttond-blue:active{background:#4477a1;}
</style>


Кнопки в верхнем меню другие. Стиль еще пока не нашел :bm:
Можно же их сделать все одинаковыми, да?
Просто я попробовал, получилось как то криво :?

Добавлено спустя 16 секунд:
Постараюсь более подробно расписать

Добавлено спустя 10 минут 49 секунд:
Хотелось бы чтобы этот стиль заработал, в нижнем меню:

Код: Выделить всё

.buttonn{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttonn:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttonn:active{top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}

Кнопки обвелись, но интерактивными не стали (((

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

Код: Выделить всё

<style>
.tab_content{min-height:100px;padding:0px 10px 0 10px;margin-right:-4px;;background-color:#dae5ef;border:5px solid #4477a1;border-radius: 0px 0px 5px 5px;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttonn{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #9c9c9c;_border:1px solid rgba(0, 0, 0, 0.3);border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttonn:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttonn:active{top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
</style>
<ul class="tabs">
<span><a class="buttonn button-blue" href="#tab1">{L_WHO_IS_ONLINE}</a></span>
<span><a class="buttonn button-blue" href="#tab2">{L_TOP_THANKS_LIST}</a></span>
<span><a class="buttonn button-blue" href="#tab3">{L_STATISTICS}</a></span>
</ul>

Получил так:

Изображение

Опять туплю :dash3: :oops: :?
Причем кнопки стали в виде ссылок с подчеркиванием :o :(


Не в сети
(Андрей)  
2019-07-09 
Администратор
Аватара пользователя

Стаж: 6 лет 9 месяцев 15 дней
Сообщения: 1190
Откуда: здешние мы


Стиль: subsilver2


Репутация: 9


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


можете так попробовать: (заменить стиль внизу):

Код: Выделить всё

<style>
.tab_content{min-height:100px;padding:0px 10px 0 10px;margin-right:-4px;;background-color:#dae5ef;border:5px solid #4477a1;border-radius: 0px 0px 5px 5px;}
.tabs{width:100%;list-style:none;margin:0;padding:0 2px;height:26px;background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond{float:left;margin:2px;padding:2px 4px 2px 4px;display:inline-block;text-align:center;border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttond:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttond:active{position:relative;top:1px;}
a.buttond{color:#FFFFFF;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;}
.buttond-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.buttond-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.buttond-blue:active{background:#4477a1;}
</style>


насчёт отступа. сейчас посмотрел код просилвера - это ваш стандартный вариант с таким отступом. вот ваш стилевой файл h3:

Код: Выделить всё

h3 {
   /* Sub-headers (also used as post headers, but defined later) */
   font-family: Arial, Helvetica, sans-serif;
   font-weight: bold;
   text-transform: uppercase;
   border-bottom: 1px solid #CCCCCC;
   margin-bottom: 3px;
   padding-bottom: 2px;
   font-size: 1.05em;
   color: #989898;
   margin-top: 20px;
}


видите? по умолчанию сдвиг сверху 20px

править код в стиле - не выход, так как "поломается" всё на самом сайте.
можно попробовать отредактировать локально:

в каждом коде вывода, где у вас идёт открытие <h3>, можно попробовать заменить его на

Код: Выделить всё

<h3 style="margin-top: -20px;">


то есть "нивелировать" отступ только здесь. может поможет. попробуйте.

Добавлено спустя 2 минуты 24 секунды:
сейчас обратил внимание на косячок - сразу не заметил. в верхнем стилевом файле меню прописаны рабочими два "бордера". замените код на этот:

Код: Выделить всё

<style>
#dop_fix {float:right;margin:10px;}
ul.dop,ul.dop li{list-style:none;margin:0;padding:0;}
ul.dop li{float:left;display:block;height:26px;}
ul.dop li a {color:#ffffff;font-weight:normal;text-decoration:none;}
.buttonn{margin:1px;padding:2px 4px 2px 4px;text-decoration:none;font-family:"Lucida Grande", Verdana, Helvetica, Arial, sans-serif;font-weight:normal;font-size:12px;display:inline-block;text-align:center;border:1px solid #ffffff;text-shadow:0 1px 0 rgba(0,0,0,0.4);box-shadow:0 0 .05em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}
.buttonn:hover{box-shadow:0 0 .1em rgba(0,0,0,0.4);-moz-box-shadow:0 0 .1em rgba(0,0,0,0.4);-webkit-box-shadow:0 0 .1em rgba(0,0,0,0.4);}
.buttonn:active{top:1px;}
.button-blue{background:#4477a1;background:-webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1));background:-moz-linear-gradient(-90deg, #81a8cb, #4477a1);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');}
.button-blue:hover{background:#81a8cb;background:-webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb));background:-moz-linear-gradient(-90deg, #4477a1, #81a8cb);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');}
.button-blue:active{background:#4477a1;}
.button-green{background:#428739;background:-webkit-gradient(linear, left top, left bottom, from(#c8dd95), to(#428739));background:-moz-linear-gradient(-90deg, #c8dd95, #428739);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#c8dd95', EndColorStr='#428739');}
.button-green:hover{background:#c8dd95;background:-webkit-gradient(linear, left top, left bottom, from(#428739), to(#c8dd95));background:-moz-linear-gradient(-90deg, #428739, #c8dd95);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#428739', EndColorStr='#c8dd95');}
.button-green:active{background:#428739;}
.button-red{background:#D82741;background:-webkit-gradient(linear, left top, left bottom, from(#E84B6E), to(#D82741));background:-moz-linear-gradient(-90deg, #E84B6E, #D82741);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E84B6E', EndColorStr='#D82741');}
.button-red:hover{background:#E84B6E;background:-webkit-gradient(linear, left top, left bottom, from(#D82741), to(#E84B6E));background:-moz-linear-gradient(-90deg, #D82741, #E84B6E);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D82741', EndColorStr='#E84B6E');}
.button-red:active{background:#D82741;}
</style>


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Не в сети
(Дмитрий)  
2019-07-09 
Аватара пользователя

Стаж: 5 лет 5 месяцев 24 дня
Сообщения: 729


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Belk писал(а):

можете так попробовать: (заменить стиль внизу):

Внизу заменил на предложенный вариант, кнопки вовсе исчезли, остались лишь ссылки :?

Изображение

Belk писал(а):

сейчас обратил внимание на косячок - сразу не заметил. в верхнем стилевом файле меню прописаны рабочими два "бордера". замените код на этот:

Не пойму где искать этот стиль. У меня в overall_header.html его нет :?
styles/prosilver/theme/my.css
тут тоже нет. Блин какой же я тупой :oops: :girl_cray2: Нифига не получается :cry:

Добавлено спустя 13 минут 49 секунд:
Belk писал(а):

то есть "нивелировать" отступ только здесь. может поможет. попробуйте.

Да, способ рабочий! :) :arigato:


Показать сообщения за:  Поле сортировки  
Ответить на тему  [ Сообщений: 27 ]  1 2 3

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (45) здесь было 28 авг 2021, 12:44

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  

cron

Текущее время: 07 июл 2022, 08:57

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид