Новое
● Смена дизайна! Выражаем благодарность tørst vinden!

● Были подведены итоги неприлично затянувшихся конкурсов.
А еще Зефир ищет креативных, толковых людей, которые любят и умеют конкурсы устраивать.

● Голосование "Сахарная Вата. Декабрь-январь.".

● Подведены итоги. "Новый Год с Зефиром".

● А также открыт новый конкурс, с мандаринками и елочными ветками. "Дед Мороз всея Зефира" желает побродить по форумам и оценить самую красивую рекламу и самый волшебный зимний дизайн. Спешите участвовать!

● Мы дополнили наш конкурс сладостей, и теперь "Сладкая Вата" продлена до января. Самое время рассказать каталогу свою новогоднюю сказку! Принимаются также работы и осенней тематики.

● ГОЛОСОВАНИЕ. ВЫБИРАЕМ ЛУЧШИЙ ДИЗАЙН И РЕКЛАМУ.

● Зефир в поисках писателей! Ждем с нетерпением в наборе персонала.

● Уже совсем скоро! "Сладкая Вата. Ноябрь"

Зефир

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

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


Вы здесь » Зефир » Архив выполненной верстки » [Таблица] The Vampire Diaries | The Inspiration


[Таблица] The Vampire Diaries | The Inspiration

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

1

1. Название ролевой, ссылка:
The Vampire Diaries | The Inspiration
2. Что требуется:
Таблица как сейчас на форуме стоит, только с фоном и кнопками-картинками.
3. Дополнительно:
Дизайн будет стоять другой, в котором ширина текстовой части форума 900(если я правильно помню, что она пишется в пункте A5.2). Фон и кнопки сделаю позже, если у вас получится сделать таблицу без них. Если нет, тогда нужно узнавать точные размеры. Раньше не приходилось сталкиваться с подобными конструкциями, поэтому не в курсе можно ли без основной графики сделать такую таблицу х)

Отредактировано Cherry pie (2014-06-25 13:15:03)

0

2

Cherry pie, Здравствуйте. Прошу немного подождать, верстальщик вам скоро ответит.

0

3

Нафаня, жду)

0

4

Cherry pie, У нас пока нехватка верстальщиков, поэтому придется подождать появления нашей Джи.

0

5

Нафаня, а есть хотя бы приблизительная дата ее появления?

0

6

Cherry pie, Ожидали ее сегодня) Но надеюсь она появится хотя бы завтра)

0

7

Cherry pie, в данный момент у нас отсутствует верстальщик, поэтому вам придется подождать пока мы найдем нового. Поиск верстальщика может затянуться, поэтому объявите нам если ваша заявка потеряет актуальность.

0

8

Нафаня, ох... печально(( Тогда буду ставить диз без таблицы, ее потом добавлю, когда у вас кто-нибудь появится)

0

9

Cherry pie, доброго времени суток! Еще актуально?

0

10

`Nancy Beatlejuice, конечно)

0

11

Cherry pie, скажите пожалуйста, у вас уже есть готовая графика в таблицу? (т.е. фон и картинки на кнопки) Если да, то я просто вставлю уже в готовый код, который предоставлю Вам позже, если же нет, то укажу места для вставки картинок)

0

12

`Nancy Beatlejuice, графики пока нет, так как мне не известны ее точные размеры х)
И еще изменила ширину текстовой части форума на 900, если это важно для составления кода таблицы.

0

13

Cherry pie, Прошу меня извинить за столь длительную задержку, вырвалась как только смогла!

Ширина форума влияет только в том случае, если Вы изменяете ширину и самой таблицы. Если ширина таблица остается нетронутой, то никаких проблем возникнуть не должно. Для того, чтобы вставить в Вашу таблицу изображения, Вам нужно заменить вот этот код:

Свернутый текст
Код:
<style type="text/css">
#menu {
    margin-top: -5px;
    width: 180px;
    height: 60px;
}
#menu span {
    text-align: left;
    display: block;
    color: #black;
    margin: 5px 0;
    padding: 11px;
}
#submenu, #menu span {
    border: 1px dashed #000;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    background: transparent
}
#menu .tabactive {
    color: #800000;
}
#submenu {
    font-size: 12px;
    height: 257px;
    padding: 3px;
    width: 530px;
}
.submenutext {
    display: none;
    height: 247px;
    width: 520px;
    padding: 5px;
}
</style>

На вот этот:

Свернутый текст
Код:
<style type="text/css">
#menu {
    margin-top: -5px;
    width: 180px;
    height: 60px;
}

#menu span {
    text-align: left;
    display: block;
    color: #000;
    margin: 5px 0;
    padding: 11px;
}
#submenu
{
    border: 1px dashed #000;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background-image: url("ссылка на фон таблицы");
}

#menu span {
    border: none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: transparent;
}

#menu .tabactive {
    color: #800000;
    background:#777777;
}
#submenu {
    font-size: 12px;
    height: 257px;
    padding: 3px;
    width: 530px;
}
.submenutext {
    display: none;
    height: 247px;
    width: 520px;
    padding: 5px;
}
</style>

Местоположение кода не меняется, цвета и прочее-прочее-прочее трогать не нужно. Если Вы все-таки будете трогать ширину и высоту таблицы, то значения находятся в секторе "#submenu {
    font-size: 12px;
    height: 257px; - высота окна, где находится контент таблицы
    padding: 3px;
    width: 530px; - ширина окна, где находится контент таблицы
}"

Сектор ".submenutext {" отвечает непосредственно за настройки текста внутри таблицы и его при вставке изображений трогать не нужно.

Для того, чтобы Вы смогли поставить изображения на кнопки таблицы ("ДОБРО ПОЖАЛОВАТЬ", "ВАЖНЫЕ ССЫЛКИ" и т.д.) Вам нужно обратиться уже непосредственно к коду, что находится у Вас в окне объявления:

Свернутый текст

<table style="width: 750px; margin: 0 auto;">
    <tbody>
        <tr>
            <td valign=top>
                <div id="menu">
                    <b>
                        <span alt="#sm1" style="cursor: pointer;"><center><img src=ссылка на вкладку "Добро пожаловать"></center></span>
                        <span alt="#sm2" style="cursor: pointer;"><center><img src=ссылка на вкладку "Важные ссылки"></center></span>
                        <span alt="#sm3" style="cursor: pointer;"><center><img src=ссылка на вкладку "События в игре"></center></span>
                        <span alt="#sm4" style="cursor: pointer;"><center><img src=ссылка на вкладку "Лучшие"></center></span>
                        <span alt="#sm5" style="cursor: pointer;"><center><img src=ссылка на вкладку "Нужные"></center></span>
                        <span alt="#sm6" style="cursor: pointer;"><center><img src=ссылка на вкладку "Партнеры"></center></span>
                    </b>
                </div>
            </td>
            <td id="MenuTxT"  valign="top">
                <div id="submenu" align="center">
                    <div id="sm1" class="submenutext" style="display:block;">

<style>
.hover-blk {
display:inline-block;
}
.hover-blk > .b {
background-color:#faeedd;
box-shadow:12px 12px 12px #000,-3px -3px 18px #000;
//border:1px solid #999999;
display:none;
position:absolute;
height: 220px;
padding:12px;
text-align: center;
width: 220px;
margin-top:5px;
}
.hover-blk > .b img{
margin-bottom:12px;
}
.hover-blk:hover .b {
display:block;
}
</style>

<div class="hover-blk">
<a href="http://tvdinspiration.rusff.ru/profile.php?id=10">
<img src="http://s9.uploads.ru/F9aXy.jpg" class="Hoverbuttons" /></a>
<div class="b">
<img src="http://s9.uploads.ru/uwMPF.gif" width=100% />
<p style="font-family:'Palatino Linotype'"><b>Elijah Mikaelson</b><br>
<i>Стильный и благородный</i><br>
Никогда не бросит в беде</p>
</div></div>

<div class="hover-blk">
<a href="http://tvdinspiration.rusff.ru/profile.php?id=3">
<img src="http://s9.uploads.ru/Wtq3f.jpg" style="margin-left: 10px;" class="Hoverbuttons" /></a>
<div class="b">
<img src="http://s9.uploads.ru/j9EfY.gif" width=100% />
<p style="font-family:'Palatino Linotype'"><b>Elena Gilbert</b><br>
<i>Суровая, но справедливая</i><br>
Справочная по любым вопросам</p>
</div></div>
                           
<br>
<div><p style="font-family:'Palatino Linotype'"><font size="+1"><b><i>Добро пожаловать на ролевую The Inspiration!</i></b></font><br>
<p style="font-family:'Palatino Linotype'"><b><i>Здесь история оживает, раскрашивается яркими красками<br>
и обрастает новыми подробностями. Мы будем рады всем,<br>
канонам и неканонам, ведь каждый пишет легенду своей жизни,<br>
оставляя след в истории, влияя на происходящее вокруг.<br>
Мы рады активным, интересным, увлеченным людям, каждый из<br>
которых станет неотъемлемой и незаменимой частью нашей семьи!</i></b></p></div>
<br>
<a href="http://top.roleplay.ru/22256" title="Рейтинг Ролевых Ресурсов - RPG TOP" target="top_">
<img src="http://img.rpgtop.su/rpgtop1.gif" alt="Рейтинг Ролевых Ресурсов - RPG TOP" border="0" width="88" height="31"></a>

                    </div>

                    <div id="sm2" class="submenutext">

<br>
<center><div id="yoblako" align="center"><noindex>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=4#p4" rel="nofollow" class="eTag eTagGr8">Сюжет</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=3#p3" rel="nofollow" class="eTag eTagGr8">Правила</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=10#p11" rel="nofollow" class="eTag eTagGr8">Список ролей</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=6#p7" rel="nofollow" class="eTag eTagGr8">Занятые внешности</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=1#p1" rel="nofollow" class="eTag eTagGr8">Гостевая</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=5#p5" rel="nofollow" class="eTag eTagGr8">Шаблон анкеты</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=11#p12" rel="nofollow" class="eTag eTagGr8">Выяснение отношений</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=12#p13" rel="nofollow" class="eTag eTagGr8">Вопросы и предложения</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=13#p14" rel="nofollow" class="eTag eTagGr8">Отсутствие</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=14#p15" rel="nofollow" class="eTag eTagGr8">Поиск партнера</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=15#p16" rel="nofollow" class="eTag eTagGr8">Новости</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=20#p21" rel="nofollow" class="eTag eTagGr8">Кандидаты на удаление</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=22#p23" rel="nofollow" class="eTag eTagGr8">Занятые имена и фамилии</a>
<a style="font-size:12pt;" href="http://tvdinspiration.rusff.ru/viewtopic.php?id=21#p22" rel="nofollow" class="eTag eTagGr8">Начисление валюты</a>
</noindex></div></center>
                    </div>

                    <div id="sm3" class="submenutext">

<p style="font-family:'Palatino Linotype'"><b><i><font size="+1">
Мистик-Фоллс</font><br>
В МФ очередное затишье, но вот надолго ли оно? Город будто бы<br>
служит магнитом для вампиров. Кровожадные личности стекаются<br>
туда, чтобы создать новые проблемы или помочь разобраться с ними.
<br>
<font size="+1">Новый Орлеан</font><br>
В городе Короля продолжаются кровавые войны. То и дело кто-то гибнет,<br>
кто-то хочет мести, кто-то власти, а кто-то готов предать и<br>
встать на сторону победителя, как только он определится.
<br>
<font size="+1">Уитмор</font><br>
В этом году в колледже жарко. Таинственные исчезновения студентов,<br>
многочисленные смерти - всё это дает поводы призадуматься не только новичкам,<br>
но и тем, кто в Уитморе не первый год. Расследования идут с разных сторон,<br>
но вот чем они закончатся?..
</i></b></font>

                    </div>
<div id="sm4" class="submenutext">

<!-- DEMO -->
<style>/* объява */
#slideShowContainer{
width:310px;
padding:120px 0;
height:250px;
position:relative;
z-index:1000;
margin-left:10px;
        margin-top:-130px
}
#slideShow{
position:absolute;
height:250px;
width:300px;
background-color: transparent;
margin:8px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#pictures { position: relative; height: 208px; }
#pictures img { position: absolute; top: 0; left: 0; margin: 10px 0 0 10px;}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('http://forumd.ru/uploads/0007/e3/f7/64535-1.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}
#previousLink{left:-22px;}
#previousLink:hover{ background-position:bottom left;}
a#nextLink{right:-32px;background-position:top right;}
#nextLink:hover{background-position:bottom right;}
</style>
<center>
<div id="slideShowContainer">
    <div id="slideShow">
    <div id="pictures">
    <img src="http://sb.uploads.ru/y9Dqj.png" title="Matt Donovan" alt="" />
    <img src="http://sa.uploads.ru/T01xF.png" title="Luke Parker" alt="" />
    <img src="http://sa.uploads.ru/RZ5Mr.png" title="Loraine MacKenna" alt="" />
    <img src="http://sb.uploads.ru/pciLl.png" title="Meredith Fell" alt="" />
    <img src="http://sa.uploads.ru/4VJzi.png" title="Caroline Forbes" alt="" />
    <img src="http://sb.uploads.ru/F2YBI.png" title="Jeremy Gilbert" alt="" />
    <img src="http://sc.uploads.ru/xZRFa.png" title="Damon Salvatore & Enzo-Kol-Elena" alt="" />
    <img src="http://sb.uploads.ru/xG2Rh.png" title="Damon Salvatore & Stefan Salvatore & Enzo" alt="" />
    <img src="http://sc.uploads.ru/5gK8m.png" title="Damon Salvatore & Kol Mikaelson" alt="" />
    <img src="http://sa.uploads.ru/PMIJd.png" title="Hayley Marshall" alt="" />
    <img src="http://sb.uploads.ru/8RG2K.png" title="Elena Gilbert" alt="" />
    <img src="http://sa.uploads.ru/Vrhuj.png" title="Kol Mikaelson" alt="" />
    <img src="http://sc.uploads.ru/XhxSO.png" title="Jeremy Gilbert" alt="" />
    <img src="http://sc.uploads.ru/ES0Db.png" title="Damon Salvatore" alt="" />
    </div>
    </div>
    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
</div></center>
<!-- галерейка -->
<script>
$(document).ready(function() {
  var z = 0;
  var inAnimation = false;
  $('#pictures img').each(function() {
    z++;
    $(this).css('z-index', z);
    });
  function swapFirstLast(isFirst) {
    if(inAnimation) return false;
    else inAnimation = true;
    var processZindex, direction, newZindex, inDeCrease;
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease =

1; }
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }
  $('#pictures img').each(function() {
    if($(this).css('z-index') == processZindex) {
       $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow',

function() {
       $(this).css('z-index', newZindex)
        .animate({ 'top' : '0' }, 'slow', function() {
           inAnimation = false;
            });
         });
       }
    else {
       $(this).animate({ 'top' : '0' }, 'slow', function() {                     
         $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
          });
       }

    });
    return false;
   }
   $('#previousLink').click(function() {
    return swapFirstLast(false);
   });
   $('#nextLink').click(function() {
    return swapFirstLast(true);
   });
});
</script>

                    </div>

                    <div id="sm5" class="submenutext">

<br>
<center><p style="font-family:'Palatino Linotype'"><font size="+1"><b><i>Мы ждем Вас!</i></b></font></center>
<br>
<div class="hover-blk">
<a href="http://tvdinspiration.rusff.ru/viewtopic.php?id=9#p361">
<img src="http://s9.uploads.ru/czTQp.jpg" /></a>
<div class="b">
<img src="http://s8.uploads.ru/LA4mS.gif" width=100% />
Dr. Wes Maxfield | доктор Уэс Максфилд<br>
около 30 y.o.<br>
Человек/призрак
</div></div>

<div class="hover-blk">
<a href="http://tvdinspiration.rusff.ru/viewtopic.php?id=9#p391">
<img src="http://s8.uploads.ru/txbR2.jpg" style="margin-left: 10px;" /></a>
<div class="b">
<img src="http://s8.uploads.ru/oUWv4.gif" width=100% />
Sophie Deveraux | Софи Деверо<br>
22 y.o.<br>
Ведьма
</div></div>

<div class="hover-blk">
<a href="http://tvdinspiration.rusff.ru/viewtopic.php?id=9#p395">
<img src="http://s9.uploads.ru/w3l4R.jpg" style="margin-left: 10px;" /></a>
<div class="b">
<img src="http://s9.uploads.ru/LPv02.gif" width=100% />
Тайлер Локвуд  | Tyler Lockwood<br>
19 y.o.<br>
Гибрид
</div></div>

<br><br><br>
<div class="hover-blk">
<a href="http://tvdinspiration.rusff.ru/viewtopic.php?id=9#p1032">
<img src="http://s8.uploads.ru/TBpS8.jpg" /></a>
<div class="b">
<img src="http://s8.uploads.ru/u4B53.gif" width=100% />
Elizabeth (Liz) Forbes | Элизабет "Лиз" Форбс<br>
около 45 y.o.<br>
Человек
</div></div>

<div class="hover-blk">
<a href="http://tvdinspiration.rusff.ru/viewtopic.php?id=9#p2645">
<img src="http://s8.uploads.ru/Jy5gf.png" style="margin-left: 10px;" /></a>
<div class="b">
<img src="http://s8.uploads.ru/DeBY2.gif" width=100% />
Lestat de Lioncourt | Лестат де Лионкур<br>
25|390 y.o.<br>
Вампир
</div></div>

                    </div>

                    <div id="sm6" class="submenutext">

<br><br>
<script language="JavaScript">
d = new Date();
var m = d.getTime();
m=m+'&url=';
m=m+self.location;
var a='<a title="Каталог фэнтези сайтов и банерообменная система Палантир" href="http://palantir.in/index.php?from=18528&rand='+m+'" target="_blank"><img alt="Каталог фэнтези сайтов и банерообменная система Палантир" src="http://palantir.in/showban2.php?type=1&from=18528&rand=' + m;
a=a+'" width="88" height="31" border="0"></a>';
document.write(a);
</script>
<noscript><a title="Каталог фэнтези сайтов и банерообменная система Палантир" href="http://palantir.in/index.php?from=18528" target="_blank"><img alt="Каталог фэнтези сайтов и банерообменная система Палантир" src="http://palantir.in/showban2.php?type=1&from=18528" width="88" height="31" border="0"></a></noscript>
<a href="http://cyanide.mybb.ru/" target="_blank"><img src="http://s2.uploads.ru/1Jh3Z.png
" title="CYANIDE" border="0" width="88" height="31"></a>
<br>
<a href="http://tvdinspiration.rusff.ru/" target=_blank> <img src="http://s8.uploads.ru/9Nekp.gif" title="The Vampire Diaries | The Inspiration"></a>
<a href="http://tvdlad.rusff.ru/"><img src="http://savepic.su/4221313.gif" border="0" alt="tvd: life after death"></a>
<a href="http://tvdgrowing.rusff.ru"><img src="http://s4.uploads.ru/g7F3P.gif" border="0" /></a>
<a href="http://mysticfalls.rolbb.ru/" TVD: Mystic Falls - Town of incest"><img src="http://ipic.su/img/img7/fs/00.1359467839.gif" width="88" height="31" border=0"/></a>
<br>
<a target="_blank" href="http://tvdimmortal.rusff.ru/"><img src="http://s0.uploads.ru/9leXW.gif" ></a></a>
<a href="http://crossroad-supernatural.ru/"><img src="http://s9.uploads.ru/T3ieA.gif" title="SPN - Crossroad"></a>
<a href="http://tvdundercontrol.rusff.ru/" target=_blank><img src="http://savepic.su/4217298.gif" alt="under control" border="0" width="88" hight="31"></a>
<br>
<a href="http://nhthisiswar.rusff.ru/" target="_blank"><img src="http://sa.uploads.ru/DdoPY.gif" title="NEW HAVEN: THIS IS WAR" /></a>
<a href="http://soullove.ru/" target=_blank> <img src="http://s8.uploads.ru/mVaEe.gif" border="0" alt="The Vampire Diaries | Soul Love"></a>
<a href=http://tumultfeelings.rusff.ru/><img src="http://savepic.su/1181254m.gif" border="0" alt="TVD: tumult feelings"width=88  height=31 border></a>
<a href="http://vdprimus.rusff.ru/" TARGET=_blank>
<img src="http://s7.uploads.ru/f5Hq7.png"border="0" alt="Vampire diaries:Primus inter pares"> </a>
<br>
<a href="http://restless.rusff.ru/" title="amsterdam: offshore for freaks" target="blank"><img src="http://s9.uploads.ru/ISkNx.jpg"/></a>
<a href="http://bourbonstreet.rusff.ru/"><img src="http://sa.uploads.ru/seE1m.png"></a>
<a href="http://tvdsinners.rusff.ru/"><IMG alt="TVD: Sinners and Saints"
src="http://sf.uploads.ru/7lv6k.gif"></a>
<br>
<a href="http://barleyhills.rusff.ru"><img src="http://savepic.org/5501990.gif" border="0" alt="BARLEY HILLS: DELIVER US FROM EVIL"></a>
<a href=http://tvdparadise.rusff.ru/><img src="http://s5.uploads.ru/t/b3ZFd.gif" border="0" alt="TVD: Dark Paradise"width=88  height=31 border></a>
<a href="http://brisson.rusff.ru/" target="_blank"><img src="http://sc.uploads.ru/cK35l.gif" title="TVD: History is a Lie." border="1" width="88" height="31"></a>
<a href="http://eternaltravel.rusff.ru/" target=_blank> <img src="http://s9.uploads.ru/r9MfN.gif"border="0"alt="Бесконечное путешествие" width=88 height=31></a>

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

Post Scriptum: Если Вы хотите перенести оформление таблицы в стиль, то копируете вот этот код:

Свернутый текст
Код:
#menu {
    margin-top: -5px;
    width: 180px;
    height: 60px;
}

#menu span {
    text-align: left;
    display: block;
    color: #000;
    margin: 5px 0;
    padding: 11px;
}
#submenu
{
    border: 1px dashed #000;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background-image: url("ссылка на фон таблицы");
}

#menu span {
    border: none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: transparent;
}

#menu .tabactive {
    color: #800000;
    background:#777777;
}
#submenu {
    font-size: 12px;
    height: 257px;
    padding: 3px;
    width: 530px;
}
.submenutext {
    display: none;
    height: 247px;
    width: 520px;
    padding: 5px;
}

и вставляете его в Цвета style_cs.css (второе окно стиля), а из HTML-низ удаляете.

Если у Вас возникнут вопросы, то смело можете задавать в этой теме.
С уважением ♥

0

14

`Nancy Beatlejuice, поставила на пробник пока. Но, видимо, что-то не то сделала, ибо кнопки расплылись и даже не работают х_х
http://mistery.rusff.ru/

хотелось бы сделать как-то так...

http://sd.uploads.ru/5h4sY.png

0

15

Cherry pie,
у Вас в коде вот эту часть кода:

Свернутый текст
Код:
#menu span {
    border: none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: transparent;
}

#menu .tabactive {
    color: #800000;
    background:#777777;
}

Замените на вот эту:

Свернутый текст
Код:
#menu span {
    border: none;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background: transparent;
height: 20px;
margin-top: -5px;
}

#menu .tabactive {
    color: #800000;
    background:transparent;
}

Для переключения вкладок в самый низ HTML-низ поставьте вот этот код:

Свернутый текст
Код:
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").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>

Он просто у вас на самом сайте стоял, поэтому я и не стала о нем говорить - думала, Вы не забудете
Теперь, по идее, все должно работать)

0

16

`Nancy Beatlejuice написал(а):

Он просто у вас на самом сайте стоял, поэтому я и не стала о нем говорить - думала, Вы не забудете

Косяк в том, что у меня там нет доступа к кодам в админке х) Поэтому так вышло... так что спасибо, что спасли))

И еще: хотела там меню сделать в два столбика, но не помню как выглядит сам код( Если сделать обычной таблицей, которую в постах ставят и изменить там "скобочки", то получится или нет? хз понятно ли объясняю

0

17

Cherry pie, Простите пожалуйста за задержку, были проблемы
Итак, сделать это реально и лучше немного иначе.

вставляете в блок контента вкладки
Код:
<table width="100%" border="0"><tr><td width="29%" rowspan="2">
ВКЛАДКА №1, ПЕРВЫЙ СТОЛБИК ТАБЛИЦЫ<BR>
текст текст текст
</div>
</td>

<td width="34%" rowspan="2">
ВКЛАДКА №1, ВТОРОЙ СТОЛБИК ТАБЛИЦЫ<BR>
текст текст текст
</td>
</tr></table>

0

18

http://zephyr.f-rpg.ru/files/0013/e6/99/52870.png
Спасибо, Cherry pie, что воспользовались нашими услугами! Если вам понравилась работа Верстальщика или же наоборот, оставьте свой отзыв в теме "Отзывы заказчиков о выполненной работе", нам важно знать ваше мнение.

0


Вы здесь » Зефир » Архив выполненной верстки » [Таблица] The Vampire Diaries | The Inspiration


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC