Выравнивание логотипа по центру

Автор Juanito, 04 Июль 2018, 22:27:29

« предыдущая тема - следующая тема »

0 Пользователей и 1 Гость просматривают эту тему.

Вниз

Juanito

Подскажите, как выровнять логотип сайта по центру горизонтально и вертикально. Вижу много способов в интернете, но если с выравниванием по центру понятно через text-align, то вот по вертикали или горизонтали я сомневаюсь. Надо вручную двигать какими-то параметрами, или есть какая-то универсальная команда чтобы само вцентрировалось в header?

Код лого:
Код
h1.forumtitle
{
   line-height: 100px;
   font-size: 2.4em;
   font-family: Geneva, verdana, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
}
h1.forumtitle a {
   text-shadow: 0 1px 0 rgba(255,255,255,0.8);
   color: #333;
}




GeorG

Для вертикального выравнивания, используйте flex-контейнер. Примерно как-то так:
Код
display: flex;
align-items: center;
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

Juanito

Цитата: GeorG от 04 Июль 2018, 23:18:01Для вертикального выравнивания, используйте flex-контейнер. Примерно как-то так:
Код
display: flex;
align-items: center;
Не помогает. Просто ничего не происходит после добавления кода.

Пока что я добился выравнивания таким методом:
Код
h1.forumtitle
{
   line-height: 100px;
   font-size: 2.4em;
   font-family: Geneva, verdana, sans-serif;
   margin: -12px 0px 0px 0px;
   padding: 0;
   text-align: center;
}
Не знаю, насколько он нормален.

GeorG

Цитата: Juanito от 05 Июль 2018, 00:17:38Не помогает. Просто ничего не происходит после добавления кода.
Это смотря куда и для кого элемента вы добавляли.
В Гуле посмотрите статьи по flex, там всё подробно объяснено, с примерами.
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

Juanito

Цитата: GeorG от 05 Июль 2018, 00:25:30Это смотря куда и для кого элемента вы добавляли.
В Гуле посмотрите статьи по flex, там всё подробно объяснено, с примерами.
Я делал так:

Код
h1.forumtitle
{
  line-height: 100px;
  font-size: 2.4em;
  font-family: Geneva, verdana, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

GeorG

Это мне ничего не говорит, я же не знаю как у вас там и что...
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

Delysid

Цитата: Juanito от 04 Июль 2018, 22:27:29Подскажите, как выровнять логотип сайта по центру горизонтально и вертикально. Вижу много способов в интернете, но если с выравниванием по центру понятно через text-align, то вот по вертикали или горизонтали я сомневаюсь. Надо вручную двигать какими-то параметрами, или есть какая-то универсальная команда чтобы само вцентрировалось в header?

Код лого:

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

GeorG

Для родительского блока пропишите display: flex;
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

Juanito

#8
05 Июль 2018, 11:36:21 Последнее редактирование: 05 Июль 2018, 11:48:41 от Juanito
Всплыла другая проблема - на мобильных лого не стягивается, нарушая дизайн. Можно как-то починить?

A Flex почему-то сдигает картинку влево.

Сайт на хостинге форум.стратегикон.рф, можете зайти посмотреть.

valdnieks

Код
<div align="center"><table width="99%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<table width="100%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">

index.template.php
Registered Linux user #325316
Последняя версия SMF: SMF 2.0.15
Версия GD: bundled (2.1.0 compatible)
Версия MySQL: 5.5.23
PHP: 5.6.30
Версия Web сервера: Apache/2.4.25 (Win64) PHP/5.6.30

Juanito

Цитата: valdnieks от 05 Июль 2018, 11:50:45
Код
<div align="center"><table width="99%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<table width="100%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">

index.template.php

После этого кода у меня просто слетает форум)) С ошибкой syntax error, unexpected '<' Или я не туда его впихиваю и надо на какую-то определённую строку?


valdnieks

Правильно, это образец. Додуматься не можете?  tickedoff
Registered Linux user #325316
Последняя версия SMF: SMF 2.0.15
Версия GD: bundled (2.1.0 compatible)
Версия MySQL: 5.5.23
PHP: 5.6.30
Версия Web сервера: Apache/2.4.25 (Win64) PHP/5.6.30

Juanito

Цитата: valdnieks от 05 Июль 2018, 15:18:05Правильно, это образец. Додуматься не можете?  tickedoff

Я очень слаб в в этих кодах - учусь, так сказать, на ходу. Пока только разобрался со сменой цветов, margin, padding, тенями и подобными простенькими командами. Данный код для меня слишком сложен и я не очень понимаю, как этот образец на практике применить. Не могли бы вы подсказать, что конкретно надо прописать на примере моего сайта? Ну или хотя бы сказать, что надо изменить в образце.

valdnieks

Ой, зарегистрировать на Вашем сайте невозможно.

index.template.php

Код
global $context, $settings, $options, $scripturl, $txt, $modSettings;

Далее.
Registered Linux user #325316
Последняя версия SMF: SMF 2.0.15
Версия GD: bundled (2.1.0 compatible)
Версия MySQL: 5.5.23
PHP: 5.6.30
Версия Web сервера: Apache/2.4.25 (Win64) PHP/5.6.30

DiS

@Juanito даже на demo на этой теме нет логотипа... соответственно доработки ложатся на Ваши плечи..  может быть Вам другую тему попробовать? Например https://demo.smftricks.com/index.php?theme=82 от того же производителя ? Там и логотип присутствует  ;)
скачать, если что тут
https://custom.simplemachines.org/themes/index.php?lemma=2847

PS надеюсь не обидел

Juanito

Цитата: valdnieks от 05 Июль 2018, 15:51:46index.template.php

Код
global $context, $settings, $options, $scripturl, $txt, $modSettings;

Далее.

Я нашёл эту строку. Но пока не понимаю, что нужно сделать дальше (приложил вид кода).

Код
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show the menu here, according to the menu sub template.
template_menu();

echo '
<div', !empty($settings['st_enable_header_background']) ? ' class="header-main" '. (!empty($settings['st_custom_header_url']) ? ' style="background-image: url('.$settings['st_custom_header_url']. ');"' : '') : ' class="header-normal"', '>
<div class="wrapper"', !empty($settings['forum_width']) ? ' style="width: '.$settings['forum_width'].'"' : '', '>
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>
</div>
</div>';

// Show the navigation tree.
theme_linktree(false, true);

echo '
<div class="wrapper"', !empty($settings['forum_width']) ? ' style="width: '.$settings['forum_width'].'"' : '', '>';

// The main content should go here.
echo '
<div id="content_section">
<div id="main_content_section">';

ЦитироватьОй, зарегистрировать на Вашем сайте невозможно.
А в чём конкретно проблема?

Цитировать@Juanito даже на demo на этой теме нет логотипа... соответственно доработки ложатся на Ваши плечи..  может быть Вам другую тему попробовать? Например https://demo.smftricks.com/index.php?theme=82 от того же производителя ? Там и логотип присутствует  ;)
скачать, если что тут
https://custom.simplemachines.org/themes/index.php?lemma=2847
На этой теме логотип есть, его можно поставить в админ панеле специальной кнопкой и он ставится вместо названия сайта. Единственная проблема в том, что он ставится по левому краю.

DiS

Цитата: Juanito от 05 Июль 2018, 16:05:31На этой теме логотип есть, его можно поставить в админ панеле специальной кнопкой и он ставится вместо названия сайта. Единственная проблема в том, что он ставится по левому краю.
ХЗ с чем Вы там боретесь до сих пор. idiot . У меня всё ровно  :coolsmiley:  
Я думал что проблема решена
Вам недоступны вложения в этом разделе.

Juanito

Цитата: DiS от 05 Июль 2018, 16:15:19ХЗ с чем Вы там боретесь до сих пор. idiot . У меня всё ровно  :coolsmiley:  
Я думал что проблема решена
Вам недоступны вложения в этом разделе.
У меня выравнивание стоит с помощью
Код
margin: -12px 0px 0px 0px;

Я не знаю, насколько это хорошо для оптимизации, тут мне писали, что надо как-то через flex выровнять. Плюс борюсь с нерезиновостью логотипа на мобильных устройствах


valdnieks

Цитата: Juanito от 05 Июль 2018, 16:05:31Я нашёл эту строку. Но пока не понимаю, что нужно сделать дальше (приложил вид кода).
Далее, страница:

Код
<div align="center"><table width="99%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<table width="100%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<a target="_blank" rel="nofollow" href="http://aaa/index.html">

Цитата: Juanito от 05 Июль 2018, 16:05:31А в чём конкретно проблема?
Подтверждение не приходит.
Registered Linux user #325316
Последняя версия SMF: SMF 2.0.15
Версия GD: bundled (2.1.0 compatible)
Версия MySQL: 5.5.23
PHP: 5.6.30
Версия Web сервера: Apache/2.4.25 (Win64) PHP/5.6.30

Juanito

ЦитироватьПодтверждение не приходит.
В спаме смотрели? Какая почта (гмаил, маил...)? Чуть позже отпишу по поводу кода.

Juanito

Цитата: valdnieks от 05 Июль 2018, 16:18:50Далее, страница:

Код
<div align="center"><table width="99%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<table width="100%" cellpadding=2 cellspacing=2 border=2 bgcolor="#000000" align="center">
<tr><td bgcolor="#FFFFFf"><div align="center">
<a target="_blank" rel="nofollow" href="http://aaa/index.html">

К сожалению, пока абсолютно не понимаю, что надо делать. По пробую по шагам... Вот код, который я нашёл, который, как мне кажется, отвечает за это лого. Этот тот код или нет? Если да, то я не очень понимаю, как в него внести изменения, которые вы написали в шаблоне, ибо он совсем другой.

Код
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show the menu here, according to the menu sub template.
template_menu();

echo '
<div', !empty($settings['st_enable_header_background']) ? ' class="header-main" '. (!empty($settings['st_custom_header_url']) ? ' style="background-image: url('.$settings['st_custom_header_url']. ');"' : '') : ' class="header-normal"', '>
<div class="wrapper"', !empty($settings['forum_width']) ? ' style="width: '.$settings['forum_width'].'"' : '', '>
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>
</div>
</div>';

// Show the navigation tree.
theme_linktree(false, true);

echo '
<div class="wrapper"', !empty($settings['forum_width']) ? ' style="width: '.$settings['forum_width'].'"' : '', '>';

// The main content should go here.
echo '
<div id="content_section">
<div id="main_content_section">';

S.T.A.L.K.E.R.

Для адаптивности темы нужно в CSS дописывать стили под разные разрешения экрана.

Juanito

Цитата: S.T.A.L.K.E.R. от 05 Июль 2018, 16:32:00Для адаптивности темы нужно в CSS дописывать стили под разные разрешения экрана.
Мне кажется, что проблема не в теме, а в самом лого. Обратите внимание, что сама тема нормально адаптируется, вылезает за пределы лишь лого, которое всё и ломает.

DiS

Цитата: Juanito от 05 Июль 2018, 16:17:33Я не знаю, насколько это хорошо для оптимизации, тут мне писали, что надо как-то через flex выровнять
без понятия про оптимизацию... проблема же решена  O0
Цитата: Juanito от 05 Июль 2018, 16:17:33Плюс борюсь с нерезиновостью логотипа на мобильных устройствах
это уже вторая проблема..
её решают я слышал специальным кодом и подготовкой десятка логотипов с разным размером... но могу ошибаться...
Я бы наверно просто уменьшил/изменил лого

Цитата: S.T.A.L.K.E.R. от 05 Июль 2018, 16:32:00Для адаптивности темы нужно в CSS дописывать стили под разные разрешения экрана.
O0
Вот-вот .. и я про тоже :)

Juanito

Цитироватьэто уже вторая проблема..
её решают я слышал специальным кодом и подготовкой десятка логотипов с разным размером... но могу ошибаться...
Я бы наверно просто уменьшил/изменил лого
А мне вот говорят уже двое человек, что это решается с помощью width (в том числе код, что тут выше предлагают, тоже содержит width как я вижу). Только я пока не понимаю, как и где это прописывать  ;D Просто дописывание max-width 100% в css не помогает.

valdnieks

Цитата: Juanito от 05 Июль 2018, 16:40:47А мне вот говорят уже двое человек, что это решается с помощью width (в том числе код, что тут выше предлагают, тоже содержит width как я вижу). Только я пока не понимаю, как и где это прописывать  ;D Просто дописывание max-width 100% в css не помогает.
width это команда размера, например [youtube width=500]ghfjfjjdjd[/youtube], чтобы размер подкорректировать.
А по поводу ЦСС, изначально хотел написать, но в index.template.php обязательно требуется внесение.
Registered Linux user #325316
Последняя версия SMF: SMF 2.0.15
Версия GD: bundled (2.1.0 compatible)
Версия MySQL: 5.5.23
PHP: 5.6.30
Версия Web сервера: Apache/2.4.25 (Win64) PHP/5.6.30

Juanito

Цитата: valdnieks от 05 Июль 2018, 16:53:02width это команда размера, например [youtube width=500]ghfjfjjdjd[/youtube], чтобы размер подкорректировать.
А по поводу ЦСС, изначально хотел написать, но в index.template.php обязательно требуется внесение.
Я пока что совсем не понимаю, что именно надо вносить. Можете по-подробнее написать, основываясь на этом моём посте? https://www.simplemachines.ru/index.php?topic=20395.msg174815#msg174815

S.T.A.L.K.E.R.

Цитата: DiS от 05 Июль 2018, 16:35:22её решают я слышал специальным кодом и подготовкой десятка логотипов с разным размером... но могу ошибаться...
Все правильно.
Код
@media only screen and (max-width:762px) { ту сами стили}
Все что мельче 762px будут подтягивать стили из того что выше.
Допустим на 1366 пикселях стиль .boardindextable{min-width:100%} смотрится нормально,а ниже 762px вылазит за границы.Значит
Код
@media only screen and (max-width:762px) {
.boardindextable{min-width:75%} или сколько нужно
}
Будет загружаться отсюда.

Сан

h1 img {width: 100%; max-width: 600px;}
Вот и всё. Больше ничего не надо.

Juanito

Цитата: Сан от 05 Июль 2018, 17:24:30h1 img {width: 100%; max-width: 600px;}
Вот и всё. Больше ничего не надо.

Применил этот код, изображение уехало влево. Пришлось дописать margin -12px 0px 0px 325px, чтобы центрировать, но с такими настройками на мобильных ещё больше съезжает вправо.

S.T.A.L.K.E.R.

Цитата: Juanito от 05 Июль 2018, 17:40:01Пришлось дописать margin -12px 0px 0px 325px, чтобы центрировать, но с такими настройками на мобильных ещё больше съезжает вправо.
И будет.Стиль то один для всех устройств.Чем мельче экран тем сильнее съедет.

Juanito

Цитата: S.T.A.L.K.E.R. от 05 Июль 2018, 17:22:59Все правильно.
Код
@media only screen and (max-width:762px) { ту сами стили}
Все что мельче 762px будут подтягивать стили из того что выше.
Допустим на 1366 пикселях стиль .boardindextable{min-width:100%} смотрится нормально,а ниже 762px вылазит за границы.Значит
Код
@media only screen and (max-width:762px) {
.boardindextable{min-width:75%} или сколько нужно
}
Будет загружаться отсюда.
Я даже понял смысл кода. Только не понимаю, куда именно его прописать. Что делает параметр @media?

S.T.A.L.K.E.R.

Цитата: Juanito от 05 Июль 2018, 17:53:40Я даже понял смысл кода. Только не понимаю, куда именно его прописать. Что делает параметр @media?
Добавлять в самый низ.
Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, КПК, монитор и др.
Тип   Описание
all   Все типы. Это значение используется по умолчанию.
aural   Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille   Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld   Наладонные компьютеры и аналогичные им аппараты.
print   Печатающие устройства вроде принтера.
projection   Проектор.
screen   Экран монитора.
tv   Телевизор.
Сделайте так
Код
h1.forumtitle {
    line-height: 100px;
    font-size: 2.4em;
    font-family: Geneva, verdana, sans-serif;
    padding: 0;
    text-align: center;
И логотип будет по центру.Только лого сделайте поменьше чтобы оно влезало в разные расширения экрана.В идеале не больше 320рх

Juanito

#33
05 Июль 2018, 18:23:08 Последнее редактирование: 05 Июль 2018, 18:44:10 от Juanito
ЦитироватьДобавлять в самый низ.
В самый низ чего? Блока логотипа или вообще в самый низ index.css?

Пока что уменьшил логотип до 320px и добавил указанный код

Код
@media only screen and (max-width:762px) {
.boardindextable{min-width:75%} или сколько нужно
}


 в самый низ index.css. Вылазит то конечно меньше (из-за меньшего размера лого), но всё равно вылазит.

S.T.A.L.K.E.R.

Цитата: Juanito от 05 Июль 2018, 18:23:08В самый низ чего? в самый низ index.css?
Да
Цитата: Juanito от 05 Июль 2018, 18:23:08и добавил указанный код
Это был пример.Код можете удалять.
Цитата: Juanito от 05 Июль 2018, 18:23:08Вылазит то конечно меньше (из-за меньшего размера лого), но всё равно вылазит.
А что у Вас с шапкой?Почему пространство справа пустое какое-то?

Juanito

ЦитироватьА что у Вас с шапкой?Почему пространство справа пустое какое-то?
Так потому что логотип вылазит, вот он и делает это пустое пространство.

ЦитироватьЭто был пример.Код можете удалять.
Тогда я снова ничего не понимаю, как починить этот логотип от вылезания за край на мобильном  :facepalm:

S.T.A.L.K.E.R.

Цитата: Juanito от 05 Июль 2018, 19:43:49Так потому что логотип вылазит, вот он и делает это пустое пространство.
Да это я уже понял...
Цитата: Juanito от 05 Июль 2018, 19:43:49Тогда я снова ничего не понимаю, как починить этот логотип от вылезания за край на мобильном
Не задумывалась тема под такие большие логотипы.Там максимально 240рх лого должно быть,а лучше ещё меньше.Или в CSS делать логотипы разных размеров и прописывать его в css.
Вниз самый своего css листайте,увидете там @media only screen and вот это и будут адаптивные стили вашей темы.Там их хватает.

DiS

Цитата: Juanito от 05 Июль 2018, 19:43:49Тогда я снова ничего не понимаю, как починить этот логотип от вылезания за край на мобильном  :facepalm:
Вам недоступны вложения в этом разделе.
 :)



GeorG

Цитата: Juanito от 05 Июль 2018, 16:17:33Я не знаю, насколько это хорошо для оптимизации, тут мне писали, что надо как-то через flex выровнять.
Я только написал про то, что с помощью flex сделать можно (про оптимизацию речи не было), это не претендует на самый лучшее решения проблемы, оно может быть более удобным, если заранее неизвестны размеры высоты самого родительского блока, в котором происходит выравнивание по вертикале дочернего элемента, если всё известно, то я бы возможно сам использовал отступы.
Верстка тем по шаблону, их доработка/переработка, переделка тем с версии smf 1.1 на smf 2.0. Примеры работ - insidestyle.ru
Установка модов (заточка под ваш форум); Моды под заказ; Обновление форума; Правильный перенос; Удаление/лечение вирусов; Устранения ошибок.
Обращаться в ЛС
Мой форум
Модуль анти-спама CleanTalk, сам пользуюсь
Сервера которыми сам пользуюсь - cadedic.ru

Вверх