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

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

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


Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (62)


Общие вопросы по оформлению (62)

Сообщений 821 страница 840 из 1001

1

Инструменты для поиска и редактирования стиля (скриптов).

Как с помощью браузера можно определить элемент дизайна.

Каталог скриптов/CSS

Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.

Типовые Вопросы (ЧаВо)

Ответы на часто задаваемые вопросы.

Как задавать вопросы! Разница между стилем и скриптом. ( Советы)

Плюс к названию темы еще и Памятка.

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

+2

821

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

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

Как сделать видимой шапку в уменьшенном варианте?

Не совсем ясна задача - вы хотите видеть вашу шапку в мобильной версии целиком? Все 294px? Или ее все ж уменьшить, мобильный стиль и все такое...

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

Я прикрепила на верх шапки пользовательские ссылки при помощи тега "absolute" , в итоге в мобильной версии отображаются некорректно. Как правильно это исправить?

Решение вашей проблемы выглядит таким образом (в html-верх):

<style type="text/css">
@media screen and (max-width: 540px) {
  /* правка пользовательских ссылок */
  #pun-ulinks .container {
  width: auto;
  box-shadow: none;
  }}
</style>

Из-за того, что в стиле мобильной версии не задана явно ширина контейнера юзерских ссылок, а прописанная вами ширина данного контейнера превышает размеры моб. экрана практически в 2 раза - они "немного" сместились влево, ваше абсолютное позиционирование тут роли не сыграло оно было переопределено для моников шириной меньше 540px.

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

И вообще пофиксить съезжающее отображение меню (Например, переместить какие-то отдельные кнопки, но только в мобильном стиле).

Вообще в мобильном стиле скрываются все доп. кнопки панели навигации вроде правил, и добавленных через админку ссылок - остаются только основные (Форум, Участники, Поиск, Профиль, Сообщения, АМС, Выход - 7шт для АМС), но на скриншоте явно видно, что у вас их 9:
а) не могу по фотографии определить, какие это 2 кнопки (т.к. у них те же пикчи, что и у ссылки, ведущей на главную страницу);
б) могу предположить, что одна из них "Награды";
в) Уважаемые знатоки, 13 сектор! 9-ку в студию (название 9-ой ссылки)  :question:

+2

822

Несравненные, всем вам прекрасного времени суток
Прошу не судить строго за мой вопрос, но самостоятельные исследования зашли в тупик. Мне бы очень помог простой и подробный инструктаж о том, как настраивается прозрачность [opacity] на выборочные изображения - когда наводишь на него и оно из бледного становится ярче. Нашла много всякого на эту тему, но почему-то не во всех нужных местах прозрачность получилось применить. Как установить прозрачность на какой-то целый блок (те же баннеры), тут всё более-менее понятно. Но если мне нужно задать прозрачность лишь одному изображению в ряду из нескольких -  тут у меня руки кривые окончательно. Прозрачным-то оно становится, но при наведении курсором к исходным цветам не возвращается. *фейспалм* Буду благодарна за наводку на тему, если таковая имеется (искала долго, но на форуме смогла найти только краткие обсуждения, из которых немногое поняла).
Спасибо!

0

823

Sanarami
Добавить к нужному(ым) изображению(ям) класс .opacity, прописать в стили

img.opacity {
  opacity:.5;
  transition:opacity .6s ease;
}
img.opacity:hover{
  opacity:1.0;
}

+2

824

цвейг
Ссылки на картинки для Разделов В Студию ... ( Ибо их наверно нун пододвинуть будет
Ну или Типовой код поставьте => Типовые Вопросы п.п.1

0

825

Alex_63, спасибо большое за доступность объяснения. Обязательно попробую. Думаю, что теперь получится.

+1

826

как  закрыть  форум   делать

0

827

один твой
В смысле?

0

828

один твой
Форумы - Редактирование форумов - Права доступа - Снять все галки (запретить Чтение форума, Ответов, Тем)
http://s4.uploads.ru/t/QBx5Z.jpg

Отредактировано ACT3255 (Пт, 23 Июн 2017 16:28:00)

0

829

ACT3255
Гы, как мну понял - юзеру нун было закрыть форум совсем(мне в Лс был тот жа Вопрос - я ответил именно про это)

+1

830

Leonheart, здравствуйте! Благодарю за ответ.

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

Не совсем ясна задача - вы хотите видеть вашу шапку в мобильной версии целиком? Все 294px? Или ее все ж уменьшить, мобильный стиль и все такое...

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

Leonheart написал(а):
Решение вашей проблемы выглядит таким образом (в html-верх):

<style type="text/css">
@media screen and (max-width: 540px) {
  /* правка пользовательских ссылок */
  #pun-ulinks .container {
  width: auto;
  box-shadow: none;
  }}
</style>

и в 2 раза - они "немного" сместились влево, ваше абсолютное позиционирование тут роли не сыграло оно было переопределено для моников шириной меньше 540px.
Из-за того, что в стиле мобильной версии не задана явно ширина контейнера юзерских ссылок, а прописанная вами ширина данного контейнера превышает размеры моб. экрана практически в 2 раза - они "немного" сместились влево, ваше абсолютное позиционирование тут роли не сыграло оно было переопределено для моников шириной меньше 540px.

Спасибо большое! Сейчас пользовательские ссылки на месте.

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

Вообще в мобильном стиле скрываются все доп. кнопки панели навигации вроде правил, и добавленных через админку ссылок - остаются только основные (Форум, Участники, Поиск, Профиль, Сообщения, АМС, Выход - 7шт для АМС), но на скриншоте явно видно, что у вас их 9:
а) не могу по фотографии определить, какие это 2 кнопки (т.к. у них те же пикчи, что и у ссылки, ведущей на главную страницу);
б) могу предположить, что одна из них "Награды";
в) Уважаемые знатоки, 13 сектор! 9-ку в студию (название 9-ой ссылки)

Вот пояснения по кнопкам.

http://sa.uploads.ru/DH3LY.png

Да, хорошо было бы понять, как скрыть "Награды", и изменить (поставить другие иконки) или тоже скрыть "PR-вход" и "Вход в админ-панель без надстроек".
Заранее спасибо!

Отредактировано Grey_Fox (Сб, 24 Июн 2017 06:00:24)

0

831

Grey_Fox, ну я бы так попробовал:

<!-- Мобильный стиль -->
<style type="text/css">
@media screen and (max-width: 540px) {
  /* Скрыть кнопку наград */
  #navawards {display: none!important;}

  /* иконка кнопки PR-входа */
  #navpr_1 a, #navpr_1 a:hover {background: url(ссылка_на_иконку) 50% 50% no-repeat !important;}

  /* иконка входа в админку без надстроек */
  #navadmin_st a, #navadmin_st a:hover {background: url(ссылка_на_иконку) 50% 50% no-repeat !important;}

  /* правка пользовательских ссылок */
  #pun-ulinks .container {
  width: auto;
  box-shadow: none;
  }

  /* мини-шапка */
  #pun-title table {
  height: 150px!important;
  background-size: cover;
  }
}
</style>
<!-- //End//-Мобильный стиль -->

Если совсем скрыть PR-вход и вторую админку, то дописать тут:

/* Скрыть кнопку наград, pr-вход, доп. админку */
  #navawards, #navpr_1, #navadmin_st {display: none!important;}

И тогда бэкграунды иконок из стиля можно убрать. Но наверное не стоит скрывать ни доп. админку, ни пиар-вход, хотя дело ваше  :dontknow:
P.S.: размер иконок 48х48 .png.

Отредактировано Leonheart (Сб, 24 Июн 2017 06:42:00)

+1

832

Доброго дня) Вопрос такой. Поставила таблицу со вкладками, мне нужно чтобы они стояли ровненько друг к другу и при клике на кнопочку менялся фон вкладки.
http://immortals.f-rpg.ru/ - форум. скрины как должно быть прикладываю) фоновые картинки которые должны будут меняться у меня есть) все одного размера

примеры

http://s5.uploads.ru/xwUPA.png
http://s0.uploads.ru/ag2fD.png

Добавлено спустя 2 часа 53 минуты 24 секунды:
нам бы только кнопочки уровнять...

Отредактировано Trinity Wane (Сб, 24 Июн 2017 14:29:59)

0

833

Trinity Wane, доброго. моя любимая тема
Если бы только кнопачки уравнять...
Там за кнопачками тянется куча нюансов...

Обновите код объявления:

Тык
Код:
<style type="text/css">
/* !Панель навигации поверх таблицы */
#pun-navlinks .container {
  position: relative;
  z-index: 999;
  }
 
#MyTable {
  position: relative;
  z-index: 998;
  margin-top: -632px;
  margin-left: -93px;
  width: 1200px;
  height: 510px;
  }
 
#MyTableBtns, #MyTableCnt {float: left;}
 
#MyTableBtns {margin-top: 140px;}
 
#MyTableBtns  ._btn {
  margin: 0 0 -1px 0; /* внешние отступы между кнопками */
  width: 143px; /* ширина кнопки */
  height: 35px; /* высота кнопки */
  background-position: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: .45s ease;
  }

/* картинки кнопок */
._btn.first {background-image: url(http://sd.uploads.ru/B4FPN.png);}
._btn.second {background-image: url(http://se.uploads.ru/8lQyb.png);}
._btn.third {background-image: url(http://s6.uploads.ru/5OmFb.png);}
._btn.fourth {background-image: url(http://s6.uploads.ru/B3R8H.png);}
._btn.fifth {background-image: url(http://se.uploads.ru/PJS3i.png);}
._btn.sixth {background-image: url(http://s8.uploads.ru/auoAY.png);}
._btn.seventh {background-image: url(http://s6.uploads.ru/4hzFx.png);}
._btn.eighth {background-image: url(http://s5.uploads.ru/dtlVn.png);}
._btn.ninth {background-image: url(http://sd.uploads.ru/aY9QS.png);}
._btn.tenth {background-image: url(http://s4.uploads.ru/yrjft.png);}
 
#MyTableBtns ._btn:hover {opacity: .65;}
 
#MyTableCnt ._cnt {
  display:none;
  position:absolute;
  top: 4px;
  right: 9px;
  padding:20px;
  background-position: -39px -45px;
  background-repeat: no-repeat;
  }
 
._cnt .overflows {
  width:943px;
  height:463px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  }
</style>
 
<div id="MyTable">
  <!-- Кнопки -->
  <div id="MyTableBtns">
    <div class="_btn first"></div>
    <div class="_btn second"></div>
    <div class="_btn third"></div>
    <div class="_btn fourth"></div>
    <div class="_btn fifth"></div>
    <div class="_btn sixth"></div>
    <div class="_btn seventh"></div>
    <div class="_btn eighth"></div>
    <div class="_btn ninth"></div>
    <div class="_btn tenth"></div>
  </div>
 
  <!-- Контент -->
  <div id="MyTableCnt">
    <div class="_cnt" style="background-image: url(ссылка1);"><div class="overflows">
    Контент 1
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка2);"><div class="overflows">
    Контент 2
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка3);"><div class="overflows">
    Контент 3
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка4);"><div class="overflows">
    Контент 4
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка5);"><div class="overflows">
    Контент 5
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка6);"><div class="overflows">
    Контент 6
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка7);"><div class="overflows">
    Контент 7
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка8);"><div class="overflows">
    Контент 8
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка9);"><div class="overflows">
    Контент 9
    </div></div>
    <div class="_cnt" style="background-image: url(ссылка10);"><div class="overflows">
    Контент 10
    </div></div>
  </div>
</div>
 
<script type="text/javascript">
$().pun_aboutReady(function() {
  $('#MyTableBtns ._btn').click(function() {
    $('._btn.active').removeClass('active');
    var index = $(this).addClass('active').index();
    $('#MyTableCnt ._cnt').fadeOut(300).eq(index).fadeIn(300);
  });
  $('#MyTableBtns ._btn').eq(0).click();
});
</script>

P.S.: Там где ссылка - ставить ссылку на бэкграунды вкладок 1,2...10 соответственно.  :love: обалденные картинки на фон!

Отредактировано Leonheart (Сб, 24 Июн 2017 16:42:15)

0

834

Leonheart
спасибо большое!) вы прям меня выручили)

+1

835

Leonheart
а еще, слово контент в табле кликабельно) это я опять где накосячила?)

0

836

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

/* иконка кнопки PR-входа */
  #navpr_1 a, #navpr_1 a:hover {background: url(ссылка_на_иконку) 50% 50% no-repeat !important;}
  /* иконка входа в админку без надстроек */
  #navadmin_st a, #navadmin_st a:hover {background: url(ссылка_на_иконку) 50% 50% no-repeat !important;}

Наверно только дописать синим: (Иначе может не проканать - ибо перекроецо правилом из mobile.*.css

<!-- Мобильный стиль -->
<style type="text/css">
@media screen and (max-width: 540px) {
  /* Скрыть кнопку наград */
  #navawards {display: none!important;}

  /* иконка кнопки PR-входа */
  .punbb #pun-navlinks #navpr_1 a,.punbb #pun-navlinks #navpr_1 a:hover {background: url(ссылка_на_иконку) 50% 50% no-repeat !important;}
  /* иконка входа в админку без надстроек */
  .punbb #pun-navlinks #navadmin_st a,.punbb #pun-navlinks #navadmin_st a:hover {background: url(ссылка_на_иконку) 50% 50% no-repeat !important;}

  /* правка пользовательских ссылок */
  #pun-ulinks .container {
  width: auto;
  box-shadow: none;
  }

  /* мини-шапка */
  #pun-title table {
  height: 150px!important;
  background-size: cover;
  }}
</style>
<!-- //End//-Мобильный стиль -->

+2

837

Trinity Wane написал(а):

слово контент в табле кликабельно) это я опять где накосячила?)

Не, эт я...

*не актуально*

Отредактировано Leonheart (Сб, 24 Июн 2017 17:15:17)

0

838

Trinity Wane написал(а):

а еще, слово контент в табле кликабельно) это я опять где накосячила?)

Ну у Вас прозрачка от пункта меню Поиск накладываецо на таблу, и поэтому в этом месте как бы кликабельность... Ну можно убрать z-index у самой таблы ( красным

#MyTable {
  position: relative;
  z-index: 998;
  margin-top: -632px;
  margin-left: -93px;
  width: 1200px;
  height: 510px;
  }

И прописать еще больший z-index для .overflows =>

._cnt .overflows {
  width:943px;
  height:463px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  position:relative;
  z-index:99999;

  }

+1

839

Leonheart
Alex_63
спасибо) вопрос: а настройки таблицы можно из таблицы в css перенести? то есть из объявы в окно стиля? или нежелательно?

0

840

Trinity Wane
Ну Нет проблем - из тегов <style  выньте и поставьте в Конец Второго Окна

0


Вы здесь » Единый форум поддержки » Архив » Общие вопросы по оформлению (62)