Новое
На Зефире прошла небольшая реорганизация. Подробности читайте в теме Вестника

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

Зефир

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

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


Вы здесь » Зефир » Все для работы с кодами » Нужна таблица.


Нужна таблица.

Сообщений 31 страница 39 из 39

1

Если вам необходима таблица на форум, можете обратиться в эту тему. Правил всего два, и они несложные:
1. Обаятельна ссылка на тестовик/чистовик, если у вас проблема с:
   - Позиционированием тех или иных элементов;
   - Настройкой таблицы;
   - Заполнением информации;
   - Подгонкой таблицы под дизайн.

2. Наличие эскиза с подробным указанием, что и где, если:
   - Вы хотите таблицу с ноля;
   - Вы хотите таблицу "как там" (ссылка "там" прилагается) с описанием изменений.

Помогает любой желающий.

0

31

Майк написал(а):

это вкладки таблицы? или же кнопки для всплывающей панели с текстом?

наверное вкладки Оо

Майк написал(а):

поясните (или пример)

вот как тут только чтобы эти надписи были сверху, а не сбоку, сбоку чтобы были просто важные ссылки
http://smmystery.anihub.ru/

0

32

Код:
<table width = 100%>
<tr><td width = 25% class = 'linkt'><a href='google.com'>aaa</a></td><td><div class="korpus">
  <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">CSS</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">HTML</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Дополнительно</label>
  <div>первая вкладка</div>
  <div>вторая вкладка</div>
  <div>третья вкладка</div>
</div></td></tr>
</table>

<style>
.korpus > div, .korpus > input { display: none; }

.korpus label { padding: 5px; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; }

.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px;}

.linkt a, .inkt a:hover  {
  display: block;
  margin: 1px;
  padding: 0px 5px;
  -moz-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;}

.linkt a:hover {
  letter-spacing: 2px;}

</style>

+1

33

Майк,  спасибки))) http://sa.uploads.ru/WYeMS.png

0

34

Добрый день!

Пытаюсь справиться с таблицей, но не особо получается. Суть проблемы: хочу спорядковать блок и кнопки соответственно границам картинки фона.

Здесь их по моему разумению надо как-то подвинуть левее
http://s7.uploads.ru/t/39pvA.jpg

И можно ли сделать один фон для одной вкладки и другой для всех остальных?

Ссылка: http://eidos.rusff.ru/

Заранее благодарю за помощь.

Отредактировано Диана (2018-07-10 10:33:21)

0

35

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

их по моему разумению надо как-то подвинуть левее

.news-text {
    height: 220px;
    width: 500px;
    margin: 15px 90px 5px 0px;
    border: 0px solid #333333;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
}

Найдите подчеркнутые коды и поменяйте значение отступа на выделенное.

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

И можно ли сделать один фон для одной вкладки и другой для всех остальных?

Можно подробнее?

0

36

Большое спасибо, это именно то, что мне было нужно!

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

0

37

Диана, ммм... дайте мне время. Дня два-три.

0

38

Диана

Здесь находится ТОЛЬКО код самой таблицы, заключенной в <table></table>. Этот код меняете на тот, что у вас есть сейчас.
Код:
<center>
   <table background="http://forumfiles.ru/files/0016/4a/c9/68151.jpg" style="height: 294px;width: 721px; background-repeat: no-repeat;">
      <tbody>
         <tr>
            <td valign=top>
               <div id="menu"><b>
<span alt="#sm1" style="cursor: pointer;">Начало</span>
<span alt="#sm2" style="cursor: pointer;">Навигация</span>
<span alt="#sm3" style="cursor: pointer;">Игра</span>
<span alt="#sm4" style="cursor: pointer;">Лучшие</span></b>
               </div>
            </td>
         </tr>
         <tr>
            <td id="MenuTxT"  align="center" valign="top">
               <div id="submenu" align="center">
                  <div id="sm1" class="submenutext" style="display: block;">
                     <center>
                        <table style="width: 850px" valign="center" align="center">
                           <tbody>
                              <tr>
                                 <td id="MenuTxT-news" width="200px" valign="bottom" align="right">
                                    <div id="submenu-news" align="center">
                                       <div id="sn1" class="submenutext-news" style="display:block;">
۞  Ведутся завершающие работы по форуму.
<br><br><a href="http://forum-top.ru/vote/4473" title="Рейтинг форумов Forum-top.ru" target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_2.gif" alt="Рейтинг форумов Forum-top.ru" /></a><br><br>
<a href="http://top.roleplay.ru/23874" title="Рейтинг Ролевых Ресурсов - RPG TOP" target="top_">
<img src="http://img.rpgtop.su/88x31x11x7.gif" alt="Рейтинг Ролевых Ресурсов - RPG TOP" border="0" width="88" height="31"></a> 
<br><br>
<a href='http://wizardtop.ru/in.php?id=3042' target='_blank' title='Волшебный рейтинг игровых сайтов'><img src='http://wizardtop.ru/b/11.gif' border='0' width='88' height='31' alt='Волшебный рейтинг игровых сайтов'></a>
<br><br>
<a title="Каталог фэнтези сайтов Палантир" href='http://palantir.in/?from=19451' target='_blank'><img src="http://palantir.in/count.php?id=19451&cid=concept_8.gif" alt='Palantir' title="Каталог фэнтези сайтов Палантир" border=0 width="88px" height="31px"></a>
                                      </div>
                                       <div id="sn2" class="submenutext-news"><br/><br/>
۞ Ничего важного - форум еще не открылся.
<br><br>
<div id="clockPlay">&#160</div>
                                        </div>
                                       <div id="sn3" class="submenutext-news"><br/><br/>
<b>08.06.</b> Ведутся завершающие работы по форуму, надеемся, что вскоре сможем открыть его для игры.
<br><br>
<b>30.11.</b></align> Установлен <b>временный</b> дизайн
<br><br>
<b>31.12.</b></align> Установлен <b>постоянный</b> дизайн
                                       </div>
                                    </div>
                                 </td>
                                 <td valign="top" align="center" colspan="2">
                                    <div class="news-text">
                                       <div class="news_text">
Добро пожаловать на Эйдос - мир душ!<br>
Представляли ли вы жизнь после смерти? Не переживайте, многие даже не подозревали о таковой. Но она есть. Это ваш второй шанс. Кем вы будете? Когда-то мы все были людьми. Ничего такого не помните? Не переживайте, воспоминания возвращаются со временем. Вспомнить - одно из заданий нашего мира. Какие еще есть задания? О, их много. Присоединяйтесь и узнайте!<br>
Какие еще тайны прячет наш мир? А вы хотите узнать все сразу, верно? Нет, чтобы полностью узнать и понять наш мир, нужно стать его частью. Жить с нами... Что опять не так? Ааа, вы не понимаете, как можно жить серым сгустком света, которым вы сейчас являетесь? Все просто - вскоре вы обретете облик, выберете сторону и начнете жить полной жизнью! Скорее, присоединяйтесь к нам и узнайте облик своей души!<br><br>
<align=center><b>Вступай в игру своей души!</b></align>
                                       </div>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td valign="center" align="center" colspan="3">
                                    <div id="menu-news"><b>
<span alt="#sn1" style="cursor: pointer;">Новости</span>
<span alt="#sn2" style="cursor: pointer;">Важное</span>
<span alt="#sn3" style="cursor: pointer;">История</span></b>
                                    </div>
                                 </td>
                              </tr>
                           </tbody>
                        </table>
                     </center>
                  </div>
                  <div id="sm2" class="submenutext">
                     <div class="links">
<br/><h3>Гостям</h3>
                        <center>
<a href="http://eidos.rusff.ru/viewtopic.php?id=18"><u>Гостевая книга</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=23"><u>Правила</u></a><br>
<a href="http://eidos.rusff.ru/viewforum.php?id=10"><u>Все о мире</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=27"><u>Путеводитель</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=33"><u>Акции от АМС</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=34"><u>Акции от игроков</u></a><br>
                        </center>
                     </div>
                     <div class="links" style="margin-left:4px;">
<br/><h3>Пользователям</h3>
                        <center>
<a href="http://eidos.rusff.ru/viewtopic.php?id=61"><u>Объявления</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=22"><u>Отлучки</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=83"><u>Охота</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=35"><u>Получение награды</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=37"><u>Торговая лавка</u></a><br>
                        </center>
                     </div>
                     <div class="links" style="margin-left:244px;">
<br/><h3>Реклама & флуд</h3>
                        <center>
<a href="http://eidos.rusff.ru/viewforum.php?id=2"><u>Флуд</u></a><br>
<a href="http://eidos.rusff.ru/viewforum.php?id=3"><u>Игры</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=2"><u>Наша реклама</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=38"><u>Баннерообмен</u></a><br>
<a href="http://eidos.rusff.ru/viewtopic.php?id=4#p29"><u>Партнерство</u></a><br>                                                </center>
                     </div>
                  </div>
                  <div id="sm3" class="submenutext">

                    <table width="710px" height="260px">
                        <tr>
                           <td valign="top">
                              <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">

<img src="http://uploads.ru/i/a/8/k/a8kn2.png">
<br><font size=4>Новости Светлых душ</font>
                              </div><div id="spoiler4">
Никаких новостей - игра еще не началась.
                              </div></div>
                           </td>
                           <td valign="top">
                              <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">

<img src="http://uploads.ru/i/b/f/Z/bfZW6.png">
<br><font size=4>Новости Темных душ</font>
                              </div><div id="spoiler4">
Никаких новостей - игра еще не началась.
                              </div></div>
                           </td>
                        </tr>
                        <tr>
                           <td valign="top">
                              <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">

<img src="http://uploads.ru/i/T/l/6/Tl6Jk.png"><br><font size=5>Общие новости</font>
                              </div><div id="spoiler4">
Никаких новостей - игра еще не началась.
                              </div></div>
                           </td>
                           <td valign="top">
                              <div class="main" id="spo_all"><div class="category" id="spo_top" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!='block') ? 'block' : 'none'; obj.display=tmp; return false;">

<img src="http://uploads.ru/i/b/Z/8/bZ8hX.png"><br><font size=5>Погода</font>
<br><br>
<font size=2><b>Температура:</b> от +10°С до +13°С</font>
                              </div><div id="spoiler4">
Дождь мелко моросит с самого утра, но сквозь редкие тучки, даже не очень серые, видно солнце. Часто облака расходятся и ничто не мешает солцу ярко освещать землю.
                              </div></div>
                           </td>
                        </tr>
                     </table>
                  </div>
               <div id="sm4" class="submenutext">
                     <div class="ams-best">
<img src=" title="http://s9.uploads.ru/eGEdI.png" title="Лучший волк" alt=""/>
<img src=" title="http://s9.uploads.ru/eGEdI.png" title="Лучшая волчица" alt=""/>
<img src=" title="http://s9.uploads.ru/eGEdI.png" title="Персональный сатана форума" alt=""/>
<img src=" title="http://s9.uploads.ru/eGEdI.png" title="Ангел форума" alt=""/>
<img src=" title="http://s9.uploads.ru/eGEdI.png" title="описание аватарки 5 во вкладке лучшие" alt=""/>
<img src=" title="http://s9.uploads.ru/eGEdI.png" title="описание аватарки 6 во вкладке лучшие" alt=""/>
<img src=" title="http://s9.uploads.ru/eGEdI.png" title="описание аватарки 7 во вкладке лучшие" alt=""/>
<img src=" title="http://s9.uploads.ru/eGEdI.png" title="описание аватарки 8 во вкладке лучшие" alt=""/>
                     </div>
                  </div>
            </td>
         </tr>
      </tbody>
   </table>
</center>
Этот кусок кода вставляете в теги <style><style> в конце общего блока с настройками к таблице. Кусочек отвечает за картинки фона таблицы
Код:
/*картинки фона таблицы*/
div#sm1 {
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url(http://forumfiles.ru/files/0016/4a/c9/21110.jpg);
}
div#sm2, div#sm3, div#sm4 {
    background-image: url(http://forumfiles.ru/files/0016/4a/c9/96874.jpg);
    background-position: top center;
    background-repeat: no-repeat;
}

+1

39

Ветруша, спасибо Вам огромное, всё получилось просто великолепно!

0


Вы здесь » Зефир » Все для работы с кодами » Нужна таблица.


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