ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

🔴 Разговорный стрим "Время уDEVительных историй"

Дата и время: начало 17 февраля в 17:00 по МСК;
Сделаем обзор на дизайн из нашей постоянной рубрики и расскажем последние новости комьюнити.
Потом будет сессия вопросов и ответов. Прозвучат провокационные и неоднозначные вопросы.
Расчехляйте свой вопросомёт! 🔥 🔥 🔥

Подробности

☕ 7 вечеров с Авалон

Дата: с 17 по 24 февраля;
Тема разговора: администрирование проекта, создание видео и другое творчество;
Присоединяйтесь к обсуждению и подготовьте свои вопросы!

Задать вопрос

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже два года.

Посетить

TVD: FACELESS

В каждой истории есть две стороны.
Я и герой, и злодей.

Посетить

ЭНТЕРОС

Магия и технологии, эпизоды, 18+
ПутеводительХотим видетьРасы

Посетить

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

💰 Продаётся: функционал, упрощающий жизнь админу форума

Ивент-календарь, вкладки и слайдеры в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.
Ультимативный список тем - картинки, описания и иконки для топиков.

Как купить

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
🎨 Голосуйте за лучшие парные аватарки до 29.02! Отдать голос.
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



[Выполнено] (БЕСПЛАТНО) Верстка: Таблица в шапке

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

1

Здравствуйте.)
Очень нужна помощь.. нашлась таблица, но код встал как - то странно, конечно явно напортачил там
http://mahan.rusff.me/
Очень хочется чтобы все это встало красиво и по центру. Чтобы можно было поставит пару активистов и они были бы прямо над квадратиками нужных. Чтобы все было на одном и не перещелкивалось. Подскажите пожалуйста

А так выглядит код, который поставил в объявления:

код

<!-- ТАБЛИЦА-->
<!-- ссылки-->
<div class="tbleft"> <div class="tbl"><div class="tblink "><a href="ссылка">Сюжет</a> </div> <div class="tblink ">
<a href="ссылка">Расы</a> </div> <div class="tblink "><a href="ссылка">Гостевая</a> </div> <div class="tblink "><a href="ссылка">Правила</a> </div>
<br><br>

<!-- текст лево-->
<br><br> По всем возникающим вопросам обращаться к 
<br><br>
</div>

<div class="tbleftin">

Время.

</div></div>

<div class="tbright">   
<!-- текст право-->

<br><br>
<div class="tbrightin"><div class="tbtitle">Нужные персонажи</div> </div><br>
<a href="--"><img src="https://forumstatic.ru/files/001a/ad/d3/11951.jpg" alt="Имя" height="70" margin="5px"></a>
<a href="--"><img src="https://forumstatic.ru/files/001a/ad/d3/11951.jpg" alt="Имя" height="70" margin="5px"></a>
<a href="--"><img src="https://forumstatic.ru/files/001a/ad/d3/11951.jpg" alt="Имя" height="70" margin="5px"></a>
<a href="--"><img src="https://forumstatic.ru/files/001a/ad/d3/11951.jpg" alt="Имя" height="70" margin="5px"></a>
</div>

0

2

Jarl Erg

Ну Вы таблицу нашли, а стили потеряли, дайте ссылку откуда брали таблицу(без стилей она так и должны выглядеть)

Ну или поправьте скриншот таблы в ФШ как должно выглядеть в итоге

+3

3

Deff, таблицу нашел на каком-то сайте, пытался сам создать.. но вышло, как видите.. а хотел приблизительно такую сделать, очень понравилось оформление
https://imagiart.ru/viewtopic.php?id=15091#p996991
Только под ссылками пытался добавить тест и пару иконок для админов, а там над нужными еще пару иконок с подписью активисты, но весь форум слетел в этих попытках..

+1

4

Jarl Erg
Ок, тогда не быстро... Два три дня... Зеленый в точности как на эскизе ? Или ближе к вашему форуму
http://mahan.rusff.me/

+2

5

Deff
Ближе к моему, если можно. Буду чертовски благодарен за помощь!

+2

6

Jarl Erg
Не Успеваю закончить - завтра добью (Пока только точно по скриншоту, без добавки указанных полей:

#p173575,Jarl Erg написал(а):

Только под ссылками пытался добавить тест и пару иконок для админов, а там над нужными еще пару иконок с подписью активисты, но весь форум слетел в этих попытках..

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

+3

7

Deff
Ого! Это потрясающе!

+2

8

@Jarl Erg
Вид:
https://forumupload.ru/uploads/0007/e3/f7/3753/104472.png

Код в начало Объявления:

Код:
<!-- ТАБЛИЦА-->

<div class="wrap-table" style="/*outline:red solid 1px;*/position:relative; margin:-11px -60px 10px;width:1000px;height:294px;background:url(https://forumstatic.ru/files/0012/d8/04/84493.png) no-repeat;">
  <!-- Левый Блок -->
  <div class="left-blk1">
     <!-- ссылки-->
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
     #pun-announcement .html-box {
       border: 0 none!important;
       box-shadow: none!important;
       background: transparent;
     }
     .left-blk1{
        /*outline:red solid 1px;*/
        position: absolute;
        left:17px; 
        top:14px;
        width:433px;
        height:266px;
     }
     .right-blk1{
        /*outline:red solid 1px;*/
        position: absolute;
        left:538px;
        top:14px;
        width:447px;
        height:266px;
     }
     .left-link1{
        width:433px;
        margin-top:10px;
        text-align:center;
     }
     .left-link1 a{
        display:inline-block;
        width: 90px;
        height:30px;
        background:#93A377;
        margin: 0 4px;
        text-align:center;
        vertical-align:middle;
        box-sizing:border-box;
        padding-top:4px;
        border:1px solid #3F4A2E;
     }
     .AVA-blk {
        text-align:center;
        display:inline-block;
        position: absolute;
        height:100px;
        box-sizing:border-box;
        padding-top:
     }
     .AVA-blk > .txt{
        background: #506036;
        box-sizing:border-box;
        padding-top:2px;
        height:20px;
        margin: 0 0 5px;
        color: #93A377;
        font: normal normal 400 12px/12px Lora;
        letter-spacing:1.3px;
     }
     .AVA-blk > a{
        opacity:.57;
        display:block;
        float:left;
        width: 56px;
        border:2px solid #506036;
        height:64px;
        margin: 0 1px;
        background: #93A377;
        background-size: 130%;
        background-position: center 13%;
        transition: .36s;
     }
     .AVA-blk > a:hover{
        opacity:.87;
        transition: .66s;
     }
     .AVA-blk.Admins {
        /*outline:red solid 1px;*/
        top:50px;
        right:48px;
     }
     .текст-привествие{
        /*outline:red solid 1px;*/
        position: absolute;
        font: normal normal 400 12px/15px Lora;
        letter-spacing: .53px;
        text-shadow: 1px 1px 0 rgba(0,0,0,.06);
        color: #E5E7E0; /*rgba(255, 255, 255, 0.83);*/
        text-align:justify;
        width: 230px;
        height:64px;
        left:15px;
        top:65px;
        text-indent: 14px;
     }
     .НОВОСТИ{
        /*outline:red solid 1px;*/
        position: absolute;
        font: normal normal 400 12px/15px Lora;
        letter-spacing: .53px;
        text-shadow: 1px 1px 0 rgba(0,0,0,.06);
        color: #E5E7E0;
        background: #516136;
        text-align:justify;
        width: 386px;
        height:87px;
        left:15px;
        top:164px;
     }
     .НОВОСТИ > h2{
        left:0; right:0;
        text-align:center;
        position: absolute!important;
        margin: -19px auto!important;
        font-size:15px;
     }
     .НОВОСТИ > .wrp-новости {
        padding: 7px;
        box-sizing: border-box;
        height: 100%;
        overflow: hidden;
        overflow-y:auto;
     }
     .wrp-новости p:before{
        content: "\25CF";
        display:inline-block;
        margin-right:6px;
     }
     .punbb .wrp-новости a{
        font: normal normal 400 12px/15px Lora;
        color: #E5E7E0!important;
     }
     .punbb .wrp-новости a:hover{
        text-decoration: underline;
     }
     .AVA-blk.Активисты {
        /*outline:red solid 1px;*/
        top:10px;
        right:18px;
     }
     .AVA-blk.Нужные {
        /*outline:red solid 1px;*/
        bottom:9px;
        left:38px;
     }
     .Рассы.Нужных{
        /*outline:red solid 1px;*/
        position: absolute;
        color: rgba(229,231,224,.83);
        width: 125px;
        right:6px;
        opacity:.87;
        bottom:8px;
     }
     .Рассы.Нужных:before{
        content: "{";
        display: inline-block;
        top: 13px;
        left:-25px;
        font-size:42px;
        position:absolute;
        transform: scale(.7,2.9);
     }
     .Рассы.Нужных:after{
        content: "}";
        display: inline-block;
        top: 13px;
        right:-2px;
        font-size:42px;
        position:absolute;
        transform: scale(.7,2.9);
     }
     .punbb .Рассы.Нужных a{
        display:block;
        font: normal normal 400 11px/15px Lora;
        color: #E5E7E0!important;
     }
     .punbb .Рассы.Нужных a:hover{
        text-decoration: underline;
     }
     .Рассы.Нужных a:before{
        content: "\25CF";
        display:inline-block;
        margin-right:6px;
     }
     .Лучший.Пост{
        /*outline:red solid 1px;*/
        position: absolute;
        left:65px;
        width:382px;
        height:145px;
        font: normal normal 400 11px/14px Lora;
        color: #E5E7E0!important;
        text-align:justify;
        box-sizing: border-box;
        padding:8px;
     }
     .Лучший.Пост .txt{
        background: #506036;
        box-sizing:border-box;
        text-align:center;
        padding-top:2px;
        width: 219px;
        height:20px;
        margin: 2px 0 5px;
        color: #93A377;
        font: normal normal 400 12px/12px Lora;
        letter-spacing:1.3px;
     }
     .punbb .Лучший.Пост a{
        font: italic normal 400 11px/15px Lora!important;        
        color: #E5E7E0!important;
        text-decoration: underline;
     }
     .Лучший.Пост .A1{
        /*outline: blue solid 1px;*/
        width:146px;
        height:70px;
        float:right;
     }
     </style>
     <div class="left-link1"><a href="ссылка">Сюжет</a><a href="ссылка">Расы</a><a href="ссылка">Гостевая</a><a href="ссылка">Правила</a></div>

     <!--Привествие-->
     <div class="текст-привествие">
Добро пожаловать в магический ролевой мир «Легенды Маханa» !
Сейчас 1120 год, история начинает новый виток ...
     </div>

     <!--Админы-->
     <div class="AVA-blk Admins"><div class="txt">Админы</div>
        <!-- <a href="/profile.php?id=2" title="Архитектор" style="background-image:url(https://forumavatars.ru/img/avatars/001a/d5/32/2-1605007563.jpg)"></a>-->
        <a href="/profile.php?id=12" title="Leona Lockhart" style="background-image:url(https://forumavatars.ru/img/avatars/001a/d5/32/12-1662214591.jpg)"></a>
        <a href="/profile.php?id=6" title="Godric Navir" style="background-image:url(https://forumavatars.ru/img/avatars/001a/d5/32/6-1646209184.jpg)"></a>
     </div>

     <!--НОВОСТИ-->
     <div class="НОВОСТИ">
         <h2>НОВОСТИ</h2>
         <div class="wrp-новости">
           <p><a href="Ссылка">Осенний марафон, конкурс</a></p>
           <p><a href="Ссылка">Открытие сюжета «Звёздная кровь»</a></p>
           <p><a href="Ссылка">Акция: Флудер недели</a></p>
           <p><a href="Ссылка">Пост месяца, конкурс</a></p>
           <p><a href="Ссылка">Открытие сюжета «Штормовой Предел»</a></p>
           <p><a href="Ссылка">Открытие сюжета «Маханская лихорадка»</a></p>

         </div>
     </div>


  </div>
  <!-- Правый Блок -->
  <div class="right-blk1">
     <!--Лучший Пост месяца -->
     <div class="Лучший Пост месяца"><div class="txt">Лучший Пост месяца</div><div class="A1"><!--//Обтекатель Активистов!//--></div>
Рыжие волосы выделяются слишком ярко на фоне молодой весенней листвы. Йорвет щурится, идет в сторону неожиданной лесной посетительницы тихо, по-эльфски бесшумно, и только узнав женщину, позволяет  траве шуршать под кожей сапог.
<br>— Трисс Меригольд ? — эльф приветствует чародейку ...    <a href="ссылка на пост">more</a>
     </div>

     <!--Активисты-->
     <div class="AVA-blk Активисты"><div class="txt">Активисты</div>
        <a href="/profile.php?id=12" title="Лучший пост  месяца" style="background-image:url(https://forumavatars.ru/img/avatars/001a/d5/32/12-1662214591.jpg)"></a>
        <a href="/profile.php?id=6" title="Постописец недели" style="background-image:url(https://forumavatars.ru/img/avatars/001a/d5/32/6-1646209184.jpg)"></a>
     </div>

     <!--Нужные персонажи-->
     <div class="AVA-blk Нужные"><div class="txt">Нужные персонажи</div>
        <a href="Ccылка на пост с описанием" title="Имя, расса" style="background-image:url(https://forumavatars.ru/img/avatars/001a/d5/32/12-1662214591.jpg)"></a>
        <a href="Ccылка на пост с описанием" title="Имя, расса" style="background-image:url(Ccылка на аватар перса)"></a>
        <a href="Ccылка на пост с описанием" title="Имя, расса" style="background-image:url(Ccылка на аватар перса)"></a>
        <a href="Ccылка на пост с описанием" title="Имя, расса" style="background-image:url(Ccылка на аватар перса)"></a>
     </div>

     <!--Рассы Нужных-->
     <div class="Рассы Нужных">
        <a href="/viewtopic.php?id=129#p9531">Люди</a>
        <a href="/viewtopic.php?id=129#p9532">Маханы</a>
        <a href="/viewtopic.php?id=129#p9533">Вампиры</a>
        <a href="/viewtopic.php?id=129#p9536">Оборотни</a>
        <a href="/viewtopic.php?id=129#p9534">Разумная нежить</a>
        <a href="/viewtopic.php?id=129#p9535">Искусственные разумные</a>
     </div>
  </div>
</div>

+3

9

Deff
Вы просто мастер! Большое спасибо!

+2