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

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

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


Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (15)


Таблицы на заказ (15)

Сообщений 741 страница 760 из 1000

1

Продолжение темы Таблицы на заказ (14).
Напомню требования:

При заказе таблиц от вас требуется:
1) Эскиз вашей будущей таблицы, сделанный в любом графическом редакторе (Пэинт, Фотошоп и т.д.) - обязательно!
2) Ссылка на ваш форум !Заказы без ссылок приниматься не будут!
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.

Заказы типа "Сделайте: Как там!" также приниматься не будут. Потрудитесь нарисовать макет таблицы самостоятельно.

И помните, чем подробнее опишите то, что нужно, тем точнее получите результат.

+3

741

Remus John Lupin
Спасибо большое, офигенно смотрится  :love:
стрелочки разумеется заменил, это были временные.))

0

742

Огненная Звезда, здравствуйте.

Показать код

В html-верх:

Код:
<style type="text/css">
/* Подправить границы тела */
#pun-announcement .container {margin-right: 0.5em;}

#pun {
  width: 780px;
  padding: 0 10px;
  }

/* Выравнивание контента в ячейках основной таблицы */
#kissa td {
  text-align: center;
  vertical-align: top;
  }

/* Размеры и настройки картинок-заголовков */
.title-h {
  display: block;
  margin: 2px auto 0 auto;
  width: 150px;
  height: 38px;
  }

/* Настройки маленьких аватаров */
.pic_win {
  display: block;
  margin: 5px auto;
  width: 50px;
  height: 50px;
  }

/* Настройки кнопок с переменным контентом */
#menu {margin: 0;}

#menu span {
  padding: 0;
  margin: 0;
  width: 100px;
  }

#menu span.tabactive img {
  border-bottom: 1px solid #000;
  }

#submenu {
  margin: 0 auto;
  padding: 5px;
  width: 440px;
  }

.submenutext {
  display: none;
  text-align: center;
  height: 352px;
  overflow-y: auto;
  }
</style>

В объявление:

Код:
<!-- Основная таблица -->
<table id="kissa" style="width: 100%; border: none;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 40%;">
<!-- Заголовок новостей -->
<img class="title-h" src="http://s6.uploads.ru/t/7sNuL.png"/>
<div style="width: 90%; height: 180px; margin: 0 auto; overflow-y: auto;">
<!-- Блок новостей -->


Текст новостей


<!-- Конец блока -->
</div>
<!-- Заголовок лучших игроков -->
<img class="title-h" src="http://s7.uploads.ru/t/adipF.png"/>
<!-- Вложенная таблица лучших игроков (имя/аватар) -->
<table style="width: 70%; border: none; margin: 0 auto;" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 35%;">Текст 1 <img class="pic_win" src="ссылка на картинку_1"/></td>
<td style="width: 35%;">Текст 2 <img class="pic_win" src="ссылка на картинку_2"/></td>
</tr>
<tr>
<td>Текст 3 <img class="pic_win" src="ссылка на картинку_3"/></td>
<td>Текст 4 <img class="pic_win" src="ссылка на картинку_4"/></td>
</tr>
</table>
<!-- Конец вложенной таблицы -->
</td>
<td style="width: 60%;">
<!-- Вложенная таблица с переменным контентом -->
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td>
<!-- Кнопки -->
    <div id="menu">
<table style="width: 100%; border: none;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 33%;"><span alt="#sm1" style="cursor: pointer;"><img class="title-h" src="http://s6.uploads.ru/t/eTONk.png"/></span></td>
<td style="width: 34%;"><span alt="#sm2" style="cursor: pointer;"><img class="title-h" src="http://s6.uploads.ru/t/fiqXQ.png"/></span></td>
<td style="width: 33%;"><span alt="#sm3" style="cursor: pointer;"><img class="title-h" src="http://s7.uploads.ru/t/KtcVT.png"/></span></td>
</tr>
</table>
    </div>
<!-- Конец кнопок -->
   </td>
  </tr>
  <tr>
   <td id="MenuTxT" align="center" valign="top">
    <div id="submenu"> 
     <div id="sm1" class="submenutext" style="display:block;">
<!-- Контент первой вкладки -->
<!-- Заголовок погоды -->
<img class="title-h" src="http://s6.uploads.ru/t/pxOVt.png"/>
<!-- Картинка погоды -->
<img src="http://s7.uploads.ru/FkyYR.png"/><br/>
<!-- Пару слов о погоде -->

Солнечно, слабый ветер.

<!-- Конец текста о погоде -->
<!-- Заголовок сюжета -->
<img style="width: 230px; height: 39px; display: block; margin: 0 auto;" src="http://s6.uploads.ru/t/7xG8R.png"/>
<div style="width: 100%; height: 155px; overflow-y: auto;">
<!-- Блок сюжета -->


Огромный отрывок из сюжета


<!-- Конец блока сюжета -->
</div>
<!-- Конец первой вкладки -->
</div>
     <div id="sm2" class="submenutext">
<!-- Контент второй вкладки -->
<!-- Вложенная таблица-каркас -->
<table style="width: 100%; border: none;" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 50%;">
<!-- Заголовок ссылок -->
<img class="title-h" src="http://s6.uploads.ru/t/S1Jgj.png"/>
<!-- Блок ссылок -->

<a href="ссылка на тему_1">Тема 1</a><br/>
<a href="ссылка на тему_2">Тема 2</a><br/>
<a href="ссылка на тему_3">Тема 3</a><br/>
<a href="ссылка на тему_4">Тема 4</a><br/>
<a href="ссылка на тему_5">Тема 5</a>

<!-- Конец блока ссылок -->
</td>
<td style="width: 50%;">
<!-- Заголовок топа -->
<img class="title-h" src="http://s7.uploads.ru/t/ub9wI.png"/>
<!-- Место под баннер топа -->
(баннер)
<!-- Заголовок партнеров -->
<img class="title-h" src="http://s7.uploads.ru/t/gyAYo.png"/>
<!-- Блок баннеров партнеров -->


<a href="http://warriorswoodrustles.rusff.ru/"><img src="http://s61.radikal.ru/i172/1205/3c/62ff7d65587d.gif" alt="Коты-Воители. Шорохи Леса"/></a>


<!-- Конец блока баннеров партнеров -->
</td>
</tr>
<tr>
<td colspan="2">
<!-- Заголовок нужных персонажей -->
<img style="width: 230px; height: 39px; display: block; margin: 0 auto;" src="http://s7.uploads.ru/t/BunKr.png"/>
<div style="width: 100%; height: 165px; overflow-y: auto;">
<!-- Блок нужных персонажей -->


Нужные персонажи!


<!-- Конец блока нужных -->
</div>
</td>
</tr>
</table>
<!-- Конец таблицы-каркаса -->
<!-- Конец второй вкладки -->
</div>
     <div id="sm3" class="submenutext">
<!-- Контент третьей вкладки -->
<!-- Заголовок АМС -->
<img class="title-h" src="http://s7.uploads.ru/t/oGHKJ.png"/>
<!-- Вложенная таблица админов (аватар/имя) -->
<table style="width: 50%; border: none; margin: 0 auto;" cellspacing="0" cellpadding="0"><tr>
<td style="width: 20%;"><img class="pic_win" src="ссылка на картинку_1"/></td><td style="width: 30%;">Текст 1</td>
</tr><tr>
<td><img class="pic_win" src="ссылка на картинку_2"/></td><td>Текст 2</td>
</tr><tr>
<td><img class="pic_win" src="ссылка на картинку_3"/></td><td>Текст 3</td>
</tr></table>
<!-- Конец вложенной таблицы админов -->
<!-- Заголовок модераторов -->
<img class="title-h" src="http://s7.uploads.ru/t/8p9LS.png"/>
<!-- Вложенная таблица модераторов (аватар/имя) -->
<table style="width: 50%; border: none; margin: 0 auto;" cellspacing="0" cellpadding="0"><tr>
<td style="width: 20%;"><img class="pic_win" src="ссылка на картинку_1"/></td><td style="width: 30%;">Текст 1</td>
</tr><tr>
<td><img class="pic_win" src="ссылка на картинку_2"/></td><td>Текст 2</td>
</tr><tr>
<td><img class="pic_win" src="ссылка на картинку_3"/></td><td>Текст 3</td>
</tr></table>
<!-- Конец вложенной таблицы модераторов -->
</div>
<!-- Конец третьей вкладки -->
</div>
   </td>
</tr>
 </tbody>
</table>
<!-- Конец вложенной таблицы с переменным контентом -->
</td>
</tr>
</tbody>
</table>
<!-- Конец основной таблицы -->

В html-низ:

Код:
<!-- Спойлер-контейнер -->
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
$("#menu span:first").addClass("tabactive").show();
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>

P.S.: если что-то не будет работать - возвращайтесь, посмотрим-с  ;)

+1

743

Rion Leonheart
:cool: Согласись, что создание таблиц здорово разрабатывает интуитивное представление css и html,
(я тут года полтора сидел)

0

744

Rion Leonheart

Все вроде работает :) Спасибо большое!

0

745

1) Эскиз вашей будущей таблицы, сделанный в любом графическом редакторе (Пэинт, Фотошоп и т.д.) - обязательно!

Тык

http://s6.uploads.ru/tj2xw.png

2) Ссылка на ваш форум !Заказы без ссылок приниматься не будут!
http://cwhope.rusff.ru/
3) Указать необходимые прокрутки, всплывающие окна, границы таблиц и т.п.
Прокрутки написаны, границы - чёрным цветом, границы должны быть не жирыми, но и не слишком толстыми. Цвет кнопок и всего остального - прозрачный, так как скоро дизайн поменяется на зимний.
Где ................. - название ещё не придумано
Где баннеры партнёров - бегущая строка, то есть баннеры бегут, и при наведении мышки на баннер - баннеры останавливаются.
Где написано "Администрация" в колонке оставьте всё пустым, мы сами потом всё сделаем.
Колонки меняются при нажатии кнопки, а не, как всегда бывает, нажмёшь на кнопку - появляются колонки, нажмёшь вторую кнопку - поверх ещё колонки. То бишь, просто в таблице в начале нажата кнопка Основное и всё показано, нажмёшь Полезно - появляются другие колонки, но не всплывающим окном, а как обычно. и так далее

Отредактировано МухХа (Ср, 6 Ноя 2013 20:47:25)

0

746

Remus John Lupin
У меня нету переключателей(стрелок) и выглядит она не так, как ты показал.
http://suuunnnnyy.mybb.ru/

Отредактировано Your mafiosi (Чт, 7 Ноя 2013 15:21:18)

0

747

Your mafiosi, значит, криво поставили. Что это за огрызок дива после конечного тега стилей?

...
/*AС1.4 - заголовки*/
.links h3 {
    font: bold 16px "Times New Roman";
    font-color: #333333;
    }
</style>
</div>

Приведите сюда весь свой html-верх, заключив его в теги code

0

748

Заказ актуален!!

0

749

Boston2345, помним :-) Обязательно доберемся и до вас, не волнуйтесь :-)

0

750

Код:
<script type="text/javascript" src="http://i.liveforums.ru/f/ru/liveforums/ff.js"></script>
<script type="text/javascript">
// Настрой свой форум на http://LiveForums.ru/setting-forum.html
ActiveTopics = 0;
ActiveTopicsName = 'Активные темы форума';
FullStat = 1;
InfoPanel = 0;
InfoTablo = 0;
CloseCategory = 0;
SocioButtons = 0;
UsersLatest = 1;
HideUrl = 0;
HidePicture = 0;
HideProfail = 0;
UpScroll = 0;
LoadFail = 0;
FullColor = 1;
WarningPoll = 0;
MessageHotkey = 0;
SpoilerInfoAutor = 0;
NullAvatar = 'http://i.liveforums.ru/f/ru/liveforums/null_avatar.png';
SelectCode = 1;
YandexPlayer = 0;
HideVideo = 1;
ExitSession = 0;
NoticeNewMessage = 1;
</script>

<div id="FutureScrollboxSmilies" style="display:none">
<!--====== &&&\ START TABLEBox Smilies  ======= -->
<center><table id="Tab_01" border="0" cellspacing="0" cellpadding="0">
         <tbody>
	   <tr>
	      <td  width="100%" valign="bottom" colspan="8">

<table id="Tab_Ekr" align="left" width="100%" border="0" cellspacing="0" cellpadding=0">
         <tbody>
	   <tr id="Ekr">

<!--&&& BOXES Smilies -->
	  </tr>
         </tbody>
	</table><!--&&&End EKR table-->
	      </td>
	   </tr>
	   <tr id="prevnext"   style="height:27px!important;">
	      <td  id="prevtd" width="50%" height="23" valign="center" align="right" colspan="4">

	      </td>
	      <td  id="nexttd" width="50%"  height="23" align="left" colspan=4>

	      </td>
	   </tr>
         </tbody>
	</table></center>
<!-- ============== &&&"/End/TABLEBox/ =========== -->
</div>
<style>/* ========= Персональные Поправки для некоторых ОКОН ========= */
 /* Развижка Смайлов в третьем Скролл-блоке */
#Ekr td.E3 div img{
   line-height:0!important;
   margin: 8px 3px;
   padding:0 1px;
}	 /* End -Стиль для CScrollboxSmilies */
</style>

<script type="text/javascript"><!--&&ScrollboxSmilies Setting-->
var Nmax,N_max;
var L=1300 // время - развертывания
var datsplus=22
SmileArr = new Array ();
SmileArr[1]=new Array(
"http://savepic.net/428106.gif", // Юзерский Блок смайлов 1
"http://savepic.net/426058.gif",
"http://savepic.net/433226.gif",
"http://savepic.net/419914.gif",
"http://savepic.net/420938.gif",
"http://savepic.net/424010.gif",
"http://savepic.net/422986.gif",
"http://savepic.net/416842.gif",
"http://savepic.net/402506.gif",
"http://savepic.net/396362.gif",
"http://savepic.net/453709.gif",
"http://savepic.net/451661.gif",
"http://savepic.net/454733.gif",
"http://savepic.net/455757.gif",
"http://savepic.net/445517.gif",
"http://savepic.net/448589.gif",
"http://savepic.net/446541.gif",
"http://savepic.net/437325.gif",
"http://savepic.net/440397.gif",
"http://savepic.net/428109.gif",
"http://savepic.net/426061.gif",
"http://savepic.net/432205.gif",
"http://savepic.net/430157.gif",
"http://savepic.net/419917.gif",
"http://savepic.net/427084.gif",
"http://savepic.net/432204.gif",
"http://savepic.net/430156.gif",
"http://savepic.net/431180.gif",
"http://savepic.net/420940.gif",
"http://savepic.net/417868.gif",
"http://savepic.net/424012.gif",
"http://savepic.net/425036.gif",
"http://savepic.net/421964.gif",
"http://savepic.net/412748.gif",
"http://savepic.net/409676.gif",
"http://savepic.net/410700.gif",
"http://savepic.net/416844.gif",
"http://savepic.net/414796.gif",
"http://savepic.net/404556.gif",
"http://savepic.net/402508.gif",
"http://savepic.net/407628.gif",
"http://savepic.net/408652.gif",
"http://savepic.net/406604.gif",
"http://savepic.net/393292.gif",
"http://savepic.net/399436.gif",
"http://savepic.net/397388.gif"    //SmileArr[1]!!Последняя ссылка без Запятой!!!
)
SmileArr[2]=new Array(
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/01.gif", // Юзерский Блок смайлов 2
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/02.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/03.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/04.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/05.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/06.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/07.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/11.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/12.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/13.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/49.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/46.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/43.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/41.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/38.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/39.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/37.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/34.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/33.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/31.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/28.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/26.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/25.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/23.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/20.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/19.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/17.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/16.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/15.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/50.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/bandit.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/bug.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/fubar.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/rock.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/smoke.gif",
"http://yapro.ru/javascript/jquery.lebnik.Comments/smiles/swear.gif"    //End SmileArr[2]!!Последняя ссылка без Запятой!!!
)
N_max=SmileArr.length;Nmax=N_max-1 //
</script><!--End ScrollboxSmilies -->

<script>

//Page Scroller (aka custom scrollbar)- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var Hoffset=70 //Enter buttons' offset from right edge of window (adjust depending on images width)
var Voffset=280 //Enter buttons' offset from bottom edge of window (adjust depending on images height)
var thespeed=23 //Enter scroll speed in integer (Advised: 1-3)

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

</script>


<!--Ставим рамки для Аватара --> 
<style type="text/css">
li.pa-avatar .Wrp-ava img[alt]{
  display:block;
  padding:0;
  border-width:0;
  margin:6px; /*Отступ рамки*/
}
</style>
<script>
  $(document).ready(function(){
    var imgWrp = "http://s2.uploads.ru/h3rnz.png"; // Ccылка на картинку;
    imgWrp = '<img src="'+imgWrp+'" width=100% height=100% style="position:absolute;z-index:100;"/>'
    $("div.post-author ul li.pa-avatar img[alt]").each(function () {
    $(this).wrap('<div class="Wrp-ava" style="display:inline-block;text-align:left;position:relative;"></div>');
    $(this).parent().prepend(imgWrp)
});});
</script><!--Конец//Рамки для Аватара-->
<style type="text/css">
.punbb A:link, .punbb A:visited {text-shadow: black 0.5px 0.5px 1px }
.punbb A:hover {text-shadow: black 0.5px 0.5px 1px}
</style>

<style type="text/css">
/*======= AA - ОСНОВНАЯ ТАБЛИЦА========*/
/*AA0 - бордеры основной таблицы*/
#menu, #submenu, #menu .tabactive, #menu span, .submenutext, .links, .links h3 {
/*    border: solid 1px #e12;*/
    }
/*AA1.1 - контейнер под язычки вкладок*/
#menu {
    height: auto;
    padding-left: 2px;
    border-style: solid solid none none;
    border-width: 2px 2px 0 0;
    border-color: #333333;
    border-radius: 5px 5px 0 0;
    }
/*AA1.2 - настройка заголовков на язычках*/
#menu span {
    display: inline-block;
    width: 141px;
    margin: 0 -2px;
    padding: 11px;
    text-align: center;
    font: small-caps 18px "Times New Roman";
    color: #523B38;
    border-style: none none solid solid;
    border-width: 0 0 2px 2px;
    border-color: #333333;
    }
/*AA1.3 - оформление язычка при наведении*/
#menu span:hover {
    color: #000000;
    text-shadow: 2px 2px 2px #423F30;
    border-style: none none solid solid;
    border-width: 0 0 2px 2px;
    border-color: #333333;
    }
/*AA1.4 - оформление активной вкладки (язычка)*/
#menu span.tabactive {
    color: #000000;
    text-shadow: 2px 2px 2px #423F30;
    border: none;
    border-left: solid 2px #333333;
    }
/*AA2.1 - информ поле*/
#submenu {
    height: 280px;
    width: 815px;
    padding: 3px;
    margin-top: -6px;
/*    text-align: center;*/
    font-size: 12px;
    border: solid 2px #333333;
    border-top: none; 
    border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
/*    background: #efeff0;*/
    }
/*AA2.2 - внутренний блок информ поля под содержимое*/
.submenutext {
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    }
/*======== AВ - СЛАЙДЕР НА 2 ВКЛАДКИ ========*/
/*АВ1.0 - бордеры*/
div.List, div.bottom-right, div.bottom-left, .List.First, .List.Finish {
    outline: 1px solid transparent;/*#e12*/
    }
/*АВ1.1 - нижняя подложка*/
div.List {
    position: relative;
    display: inline-block;
    width: 100%; /*ширина вкладки + ширина кнопок*/
    height: 250px; /*высота вкладки*/
    padding: 0;
    margin: 0;
    text-align: center;
    }
/*АВ1.2 - слайды*/
.List.First, .List.Finish {
    width: 772px; /*ширина вкладки - ширина кнопок справа и слева*/
    height: 100%;
    margin-left: 20px; /*ширина кнопки слева*/
    background-image: none;
    }
/*АВ1.3 - второй слайд*/
.List.Finish {
    position: absolute;
    display: none;
    margin: 0;
    left: -772px; /*ширина вкладки - ширина кнопок справа и слева*/
    z-index: 1;
    background-color: #FFEDA9; /*обязательно для перекрытия контента первой вкладки, если таблица без фона-картинки*/
    }
/*АВ1.4 - фон вкладок
div.List, .List.Finish {
    background: url(http://savepic.net/3966235.jpg) center center repeat;
    }*/
/*АВ2.1 - контейнеры стрелочек*/
div.bottom-right, div.bottom-left {
    position: absolute;
    display: inline-block;
    width: 20px; /*ширина кнопок*/
    height: 100%;
    padding: 0;
    left: 0;
    top: 0;
    background: url(http://www.iconsearch.ru/uploads/icons/iconza/32x32/left_arrow.png) center center no-repeat; /*картинка левой кнопки*/
    background-size: 100% auto;
    }
/*АВ2.1а - инд. настройки правой стрелки*/
div.bottom-right {
    margin: 0px 100%;
    left: -20px; /*ширина кнопки*/
    background-image: url(http://www.iconsearch.ru/uploads/icons/iconza/32x32/right_arrow.png); /*картинка правой кнопки*/
    }
/*АВ3.1 - правило смены слайдов*/
div.bottom-right:focus > .List.Finish, div.bottom-left:focus > .List.First {
    display: block;
    }
.ams {
    float: left;
    width: 50%;
    height: 80%;
/*    outline: 1px solid #dde;*/
    }
.runline {
    display: table-cell;
    vertical-align: middle;
    width: 770px;
    height: 45px;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    }
/*======= AС - ССЫЛКИ НАВИГАЦИИ========*/
/*AС1.1 - блок со ссылками*/
.links {
    height: 255px;
    width: 267px;
    position: absolute;
    }
/*AС1.2 - настройка ссылок*/
.links a {
    color: #897E6D !important; /*цвет текста ссылок*/
    background-color: #523725; /*фон ссылок*/
/*    border: solid 2px #9B9898; бордюры вокруг ссылок*/
    line-height: 150%; /*междустрочный интервал для ссылок*/
    width: 200px;
    padding: 3px;
    margin: 1px;
    display: block;
    }
/*AС1.3 - настройка ссылок в активе*/
.links a:hover {
    color: #3B2010 !important; /*цвет текста ссылок*/
    background-color: #C1AF7F; /*фон ссылок*/
    border: solid 0.5px #9B9898; /*бордюры вокруг ссылок*/
    border-bottom-style: solid !important;
    }
/*AС1.4 - заголовки*/
.links h3 {
    font: bold 16px "Times New Roman";
    font-color: #333333;
    }
</style>

0

751

Your mafiosi
1. Попробуйте еще раз крайне аккуратно поставить таблицу заново. Удалите стили к ней из верха, саму таблицу из Объявления, и снова скопируйте все коды к себе на форум, потому что ваш вид мне не удалось у себя на пробке воссоздать, даже копируя ваши коды. Можете сами посмотреть и "пощупать", как выглядит ваша таблица вживую у меня на пробном форуме http://hmp.mybb.ru/
2. Если не получится, то удаляете стили таблицы из верха и без <style type="text/css"> и </style> помещаете их в конец первого окна Своего стиля (Администрирование - Свой стиль - Структура стиля).
3. Если и это не помогает, удаляйте в отдельный текстовый документ (блокнот, ворд, куда угодно еще) весь ваш верх, оставив только стиль к таблице. Сохраните. Если все в порядке - по одному возвращайте туда коды из документа, в который снесли содержимое верха. Если обнаружите проблему - несите ее либо в Общие вопросы по заказу таблиц (2) либо в Общие вопросы по оформлению (51) Если все работает - слава богам, котам, волкам и Мерлину. Нет - переходите в четвертому пункту:
4. Создавайте новый профиль, присваивайте ему админ права и высылайте ник/пароль мне в ЛС.

+1

752

Boston2345, здравствуйте.

Показать код

Дополнение в html-верх к доп. "начинке" таблицы:

Код:
<style>
/* Дополнения к основной таблице для внутренних каркасов 
-----
Настройка основных каркасов */
.inside_tb {
  width: 99%;
  height: 200px;
  margin: 4px auto;
  border: none;
  }

/* Выравнивание в ячейках каркасов */
.inside_tb td {
  text-align: left;
  vertical-align: top;
  }

/* Заголовки */
.inside_tb h3 {
  text-align: center;
  font: bold normal 15px 'Trebuchet Ms', sans-serif;
  margin: 2px auto 6px auto;
  }

/* Прямая линия */
.inside_tb hr {
  width: 92%;
  margin: 2px auto;
  border: none;
  border-top: 1px solid #000;
  }

/* Блоки с авто-прокруткой */
.srll-box {
  width: 100%;
  overflow-y: auto;
  }

/* Настройка ссылок с меняющимся фоном
-----
Основной блок */
#nav {
  width: 135px;
  margin: 0 auto;
  }

/* Ссылки в обычном состоянии */
#nav a {
  display: block;
  width: 135px;
  margin-top: 2px;
  padding: 2px 0 4px 0;
  background-color: #c3c3c3;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  }

/* Ссылки при наведении */
#nav a:hover {
  background-color: #7f7f7f;
  cursor: crosshair;
  }
</style>

1-ая кнопка:

Код:
<table class="inside_tb" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 70%; border-right: 1px solid #000;" rowspan="2">

<h3>Новости и объявления</h3>
<div class="srll-box" style="height: 172px;">

Колонка новостей

</div>
</td>
<td style="width: 30%; height: 140px;">

<h3>Рейтинг игры</h3>

(пикча/текст)

<hr>

*цитата недели*

</td>
</tr>
<tr>
<td style="height: 60px; text-align: center; border-top: 1px solid #000;">
<h3>Топ-голосование</h3>

(Баннеры топов x2)

</td>
</tr>
</table>

2-ая кнопка:

Код:
<table class="inside_tb" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 30%; height: 100px;">

<h3>Погода и время</h3>

(немного о погоде)

</td>
<td style="width: 70%; border-left: 1px solid #000;"  rowspan="2">

<h3>Игровых постов ждут от:</h3>
<div class="srll-box" style="height: 172px;">

(список должников)

</div>
</td>
</tr>
<tr>
<td style="height: 100px; border-top: 1px solid #000;">
<h3>Очередности постов:</h3>
<div class="srll-box" style="height: 70px;">

("Живая" очередь)

</div>
</td>
</tr>
</table>

3-ья кнопка:

Код:
<table class="inside_tb" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 25%;" rowspan="2">

<h3>Технические</h3>
<div id="nav">

<a href="ссылка на тему">Ссылка 1</a>
<a href="ссылка на тему">Ссылка 2</a>
<a href="ссылка на тему">Ссылка 3</a>

</div>
</td>
<td style="width: 25%;border-right: 1px solid #000;" rowspan="2">

<h3>Игровые</h3>
<div id="nav">

<a href="ссылка на тему">Ссылка 1</a>
<a href="ссылка на тему">Ссылка 2</a>

</div>
</td>
<td style="width: 50%; height: 120px;">

<h3>Информация для новичков</h3>

(текст)

</td>
</tr>
<tr>
<td style="height: 80px;"><hr>
<h3>Ссылки на акции</h3>

(текст)

</td>
</tr>
</table>

4-ая кнопка:

Код:
<table class="inside_tb" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 25%; height: 100px;">

<h3>Имя 1</h3><hr> 
Текст

</td>
<td style="width: 25%;">

<h3>Имя 2</h3><hr>
Текст

</td>
<td style="width: 25%;">

<h3>Имя 3</h3><hr>
Текст

</td>
<td style="width: 25%;">

<h3>Имя 4</h3><hr>
Текст

</td>
</tr>
<tr>
<td style="height: 100px; border-top: 1px solid #000;">

<h3>Имя 5</h3><hr>
Текст

</td>
<td style="border-top: 1px solid #000;">

<h3>Имя 6</h3><hr>
Текст

</td>
<td style="border-top: 1px solid #000;">

<h3>Имя 7</h3><hr>
Текст

</td>
<td style="border-top: 1px solid #000;">

<h3>Имя 8</h3><hr>
Текст

</td>
</tr>
</table>

5-ая кнопка:

Код:
<table class="inside_tb" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 50%; height: 100px; border-right: 1px solid #000;">

<h3>Правила рекламы</h3>

Сами правила

</td>
<td style="width: 50%;">

<h3>Наши партнеры</h3>

(баннеры партнеров)

</td>
</tr>
<tr>
<td style="height: 100px; text-align: center; border-top: 1px solid #000;" colspan="2">
<h3>Наши друзья</h3>

(баннеры)

</td>
</tr>
</table>

Поправки для основной таблицы:

Показать подсказку

Поправка 1. Найти в html-верху блоки:

#submenu {
  padding: 0px;
  height: 200px;
  }

.submenutext {
  display: none;
  text-align: center;
  width: 100%;
  height: 198px;
  overflow-y: auto;
  }

И заменить на:

#submenu {padding: 0px;}

.submenutext {
  display: none;
  text-align: center;
  width: 100%;
  height: 208px;
  overflow-y: auto;
  }

Поправка 2. Перед вставкой каркасов в любую из вкладок, предварительно удалить в самих вкладках теги <br>!!!
Чоб не сползло...

P.S.: как нарисовали, и где конкретно указали что - такая и вышла, если все же не совсем везде отцентрирован текст, или границы не такие, или цвет ссылок не тот, или что угодно еще - возвращайтесь ;)

0

753

Deff написал(а):

Согласись, что создание таблиц здорово разрабатывает интуитивное представление css и html,
(я тут года полтора сидел)

Соглашусь, частично  8-)


*Bur Boni*, здравствуйте.

*Bur Boni* написал(а):

Можно такое?

Эту таблицу я уже видел несколько вкладок назад... И она была выполнена, если мне не изменяет память. Где есть эскиз - там недалеко и его итог должен быть...
Но если хотите повторить - ссылку на форум и такой момент: эскиз первой вкладки-то есть, а остальные две?  :)

0

754

Remus John Lupin
Все вышло со второго раза. дважды скрипт перестовляла, но в конце концов встало! Огромное спасибоооо!!!!! http://mybb.ru/f/collection/0211.gif

0

755

Your mafiosi, я очень рад. :-) Надеюсь, вы довольны :-)

0

756

Rion Leonheart написал(а):

Boston2345, здравствуйте.
Показать код
Поправки для основной таблицы:
Показать подсказку
Поправка 1. Найти в html-верху блоки:
#submenu {
  padding: 0px;
  height: 200px;
  }
.submenutext {
  display: none;
  text-align: center;
  width: 100%;
  height: 198px;
  overflow-y: auto;
  }
И заменить на:
#submenu {padding: 0px;}
.submenutext {
  display: none;
  text-align: center;
  width: 100%;
  height: 208px;
  overflow-y: auto;
  }
Поправка 2. Перед вставкой каркасов в любую из вкладок, предварительно удалить в самих вкладках теги <br>!!!
Чоб не сползло...
P.S.: как нарисовали, и где конкретно указали что - такая и вышла, если все же не совсем везде отцентрирован текст, или границы не такие, или цвет ссылок не тот, или что угодно еще - возвращайтесь

Спасибо за таблицу!
Только бегунок немного не там) Не подскажите как его убрать или переместить?
Таблица 1 - бегунок в ячейке "Новости и объявления" - переместить
Таблица 2 - бегунок в ячейке "Очередности постов" - переместить
Таблица 4 - бегунок в ячейке "Администрация" - убрать
Таблица 5 - бегунок в таблице - убрать

0

757

не актуально

Отредактировано Счастливая (Чт, 14 Ноя 2013 20:45:18)

0

758

Remus John Lupin написал(а):

Ta_chan, какова высота таблицы? Такая же, как текущая? Больше?
Сколько слайдов должно быть в каждом из слайдеров?
Цветовая гамма на мое усмотрение или свою дадите? стрелочки, как мне кажется, по цветовой гамме к вашему дизайну совсем не идут, но поставлю, что дали; захотите, потом замените

ЛаскаКВ, спойлер куда разворачиваться должен? Вроде бы место вы ему оставили вбок раскрываться, а нарисовали - вроде как вниз. И с вас тоже высота таблицы нужна.
Подпись автора

Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности

Каталог скриптов/CSS
Типовые Вопросы
Автосохранение Стиля и Настроек

Вниз разворачиваться. http://warriorscats.ru/- как тут размер

0

759

ЛаскаКВ, прочитайте вот это, пожалуйста - Очень странный вопрос по поводу правил форума... Я просто очень надеюсь, что вы просто его не увидели с самого начала.

ЛаскаКВ написал(а):

Вниз разворачиваться. http://warriorscats.ru/- как тут размер

Насчет направления - я понял, а вот пример посмотреть мне не удалось, я банально не нашел на указанном вами форуме спойлер ни в Объявлении, ни в шапке, ни в форумах на главной, ни в футере. Вы уверены, что ссылка правильная? Если да, покажите, пожалуйста, этот спойлер либо словесным описанием (где он находится), либо скриншотами.

0

760

Boston2345 написал(а):

Только бегунок немного не там) Не подскажите как его убрать или переместить?

Найдите в html-верху блок:

.submenutext {
  display: none;
  text-align: center;
  width: 100%;
  height: 208px;
  overflow-y: auto;
  }

Выделенное красным замените на:

/*overflow-y: auto;*/

В вашей таблице с переменным контентом изначально установлена авто-прокрутка в каждой вкладке, я ее не вижу у себя (с Оперы), потому что, скорее всего, у вас Гугл Хром (через него как раз в указанных вкладках видно эту прокрутку).

0


Вы здесь » Единый форум поддержки » Архив » Таблицы на заказ (15)