Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

Адаптивный дизайн - настройка меню, логотипа и пр

Помогите с настройкой элементов
Посетитель
Innajan
Сообщений: 26
104 дня назад
Здравствуйте!
Прошу помощи! Когда верстаю шаблон в самом Артистире, то всё нормально отображается.
На хосте (и локальном, и удалённом) шрифты выглядят очень мелкими (визуально меньше 10 кегля, хотя стоит 13 кегль). И картинки тоже выглядят меньше, чем есть. И, как мне кажется, из-за этого едет дизайн шапки. На ноутбуке всё ок, а на большом мониторе контент просто уезжает под шапку... Если сдвигать его ниже, то на ноутбуке слишком большой отступ от шапки.
Такое ощущение, что где-то задан размер в процентах, так как весь сайт пропорционально уменьшен.
Вот ссылка (сайт пока на тестовой площадке):
Скрытый текст виден только зарегистрированным пользователям

Там уже задан аж 16 кегль текста, а выглядит гораздо мельче...
Помогите, пожалуйста, а то уже голову сломала...
Спасибо.
Постоянный участник
Степаныч
Медаль
Сообщений: 636
3 дня назад
Innajan, Насчет шрифта. В лисе все довольно корректно. Посмотрите в другом браузере, как вариант браузер не правильно масштабирует.
16px выглядят как 16. Правда межстрочный интервал уменьшен.

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


Насчет слайдера. Здесь все хитрей. Если правильно понял используется Nivo Slider, однако он почему то растягиваясь в ширину при больших разрешениях, не масштабирует высоту (должно быть height: auto;). То есть он не корректно адаптируется.
Если исправляли его сами то нужно доработать.

Если же это так было в готовом модуле то если не можете поправить сами, найдите что то другое без косяков.

Это на первый взгляд.
Постоянный участник
Handi
Медаль
Сообщений: 717
3 дня назад
Степаныч:
16px выглядят как 16. Правда межстрочный интервал уменьшен.

В ручную можно поправить меж строчный в template.css строка 52

Код PHP:
  1. .art-postcontent, .art-postcontent li, .art-postcontent table, .art-postcontent a, .art-postcontent a:link, .art-postcontent a:visited, .art-postcontent a.visited, .art-postcontent a:hover, .art-postcontent a.hovered {
  2. font-family: 'Arial Narrow',Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
  3.  
  4. }
добавить туда line-height: 175%;

Сам шрифт потом можно уменьшить template.css строка 2
#art-main {
cursor: default;
font-family: 'Arial Narrow',Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
}

font-size: 16px; поставить нужный.

Лучше менять все в программе в проекте, так как к этим размерам многое может быть привязано, менять придется во многих местах. music
качественное продвижение и раскрутка сайтов в сеопульте
Постоянный участник
Степаныч
Медаль
Сообщений: 636
3 дня назад
Handi, facepalm размер много где указан.
Handi:
Лучше менять все в программе в проекте, так как к этим размерам многое может быть привязано, менять придется во многих местах.

И вопрос как я понял стоит не в том что бы сменить шрифт, а в том что не корректно выглядит.
Посетитель
Innajan
Сообщений: 26
104 дня назад
Спасибо всем отозвавшимся!
У меня во всех браузерах стоит масштаб 100%, на всех компьютерах. На трёх мониторах (различных по разрешению экрана) шрифт отображается одинаково. Кстати, точно так же, как на приложенной Степанычем картинке... Но только это, всё-таки, не 16 кегль. Я скопировала и вставила в Ворд, там шрифт оказался 10 (визуально он так и выглядит на 10, хотя я в css выставила везде 16), я сделала 16 для сравнения. Картинку прилагаю.
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Упс, порылась в интернете, тут ещё и разница в единицах между pt и px. В итог получается, что 12pt=16px=1em=100%... Хотя люди пишут, что при разрешении экрана 72 пиксела на дюйм (обычное разрешение) 12 pt соответствует 12px, 14pt соответствует 14px.
В Артистире 13 кегль соответствовал визуально тому, что надо. Непонятно, почему потом нужно увеличивать размер шрифта, чтобы не было слишком мелко.
Слайдер да, Vinaora Nivo, победить его никак не могу. Ничего в нём не меняла, высота и ширина стоят auto. Жаль отказываться, для тройки ещё не очень-то найдёшь подходящие расширения.
Постоянный участник
Степаныч
Медаль
Сообщений: 636
3 дня назад
Innajan:
порылась в интернете, тут ещё и разница в единицах между pt и px. В итог получается, что 12pt=16px=1em=100%... Хотя люди пишут, что при разрешении экрана 72 пиксела на дюйм (обычное разрешение) 12 pt соответствует 12px, 14pt соответствует 14px.
В Артистире 13 кегль соответствовал визуально тому, что надо. Непонятно, почему потом нужно увеличивать размер шрифта, чтобы не было слишком мелко.

Мне кажется Вы копаете не в ту сторону smile

В Artisteer все шрифты задаются в px.

Настроить межстрочный интервал и стиль шрифта по умолчанию в 4.3 можно на этой вкладке

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.


На скрине настройки по умолчанию.
Не помню были или нет подобные настройки в 4.0 (версия переходная, не запомнилась).
Обычно эти настройки не трогаю.

Innajan:
Но только это, всё-таки, не 16 кегль. Я скопировала и вставила в Ворд, там шрифт оказался 10 (визуально он так и выглядит на 10, хотя я в css выставила везде 16), я сделала 16 для сравнения.

У Вас на сайте стоит в стилях:

font-size: 16px;

Handi:
Сам шрифт потом можно уменьшить template.css строка 2
#art-main {
cursor: default;
font-family: 'Arial Narrow',Arial,'Arial Unicode MS',Helvetica,Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
}
Редактировалось: 1 раз (Последний: 9 мая 2015 в 00:38)
Посетитель
Innajan
Сообщений: 26
104 дня назад
Я к тому, что, оказывается, шрифт величиной в 16 пунктов (pt) не соответствует шрифту в 16 пикселей (px). Я привела данные из таблицы соответствия. Да, 16px я и задавала в css, визуально он, получается, должен соответствовать 12 кеглю в пунктах (pt). Брр... Но зато теперь понятно, почему ожидаешь увидеть одно, а на выходе другое.
Постоянный участник
Степаныч
Медаль
Сообщений: 636
3 дня назад
Innajan, Здесь есть еще один нюанс.
Innajan:
У меня во всех браузерах стоит масштаб 100%, на всех компьютерах. На трёх мониторах (различных по разрешению экрана) шрифт отображается одинаково.

Вопрос в том что для разных разрешений мониторов "нормально" если шрифт задан в пикселях px будет выглядеть по разному.

У меня постоянное разрешение стоит 1280 px (одно из наиболее распространенных) и я визуально привык к определенным размерам шрифтов на сайтах.

У Вас, если разрешение другое, то для Вас и "нормально" будет по другому.

По мне то что писал выше Handi, если поставить на Вашем сайте размер 13 px и межстрочный выставить в программе line-height: 175%;
то будет то что я вижу обычно на сайтах для текста.

Сейчас у Вас для меня крупновато (16px) и строки немного частят.

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

Я обычно у себя размеры шрифтов для текста в дефолтном шаблоне редко трогаю. Думаю они подходят для большинства мониторов. Изменяю только сами шрифты.

ЗЫ: Впрочем это уже конечно спорный вопрос, как лучше выставить. smoke
Редактировалось: 4 раза (Последний: 9 мая 2015 в 01:14)
Постоянный участник
Степаныч
Медаль
Сообщений: 636
3 дня назад
По слайдеру. Можно наверное попробовать решить проблему переместив его в позицию banner1 вынеся её за пределы листа, как расказано в этой теме:
Скрытый текст виден только зарегистрированным пользователям


Тогда header по высоте можно совсем убрать.

ЗЫ: Только у Вас там для листа отступ (margin) стоит с отрицательным значением в вверх, надо будет поправить.
Редактировалось: 1 раз (Последний: 9 мая 2015 в 01:34)
Посетитель
Innajan
Сообщений: 26
104 дня назад
Разве крупновато? Я, наоборот, увеличивала до тех пор, пока мне не будет комфортно. Очень трудно мелкий шрифт читать. Видимо, это действительно субъективно - для каждого человека понятие "нормально" относительно. Но, в любом случае, спасибо за участие! Кое-что прояснилось. Я не знала, что такая разница между px и pt. Жаль, что со слайдером не получилось разобраться.Добавлено спустя 2 минутыА, не увидела Ваш пост! Одновременно отправили)) Спасибо, попробую. Только завтра...
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 916
1 день назад
Относительно единиц измерения шрифтов. У всех свои достоинства и недостатки. В программе все размеры шрифтов задаются в px.
С одной стороны у этого метода недостаток, на больших разрешениях мониторов шрифт выглядит визуально мельче.

С другой стороны он не "дышит", а значит структура сайта и тексты на страницах будут сохранять заданные пропорции и при разных разрешениях сайт будет выглядеть одинаково только пропорционально увеличенным или уменьшенным.

Статья в тему по единицам измерения и отличиям:
Скрытый текст виден только зарегистрированным пользователям
Посетитель
Innajan
Сообщений: 26
104 дня назад
По совету Степаныча поставила слайдер в позицию banner1 и поменяла код в index.php. Марджин обратно поставила 0 auto, я его специально сделала отрицательным, потому что после вставки слайдера контент очень сильно уезжал вниз, пришлось его поднимать. Всё получилось круто и классно, но теперь как спустить хэдлайн и вытащить его и логотип поверх слайдера?)) Лого я уже вытаскивала поверх, его z-index: 9999. Только сейчас это не работает. У хэдлайна top: 255px, если даже поставить 500px - ничего не меняется.Добавлено спустя 7 минутsamson, спасибо за полезную ссылку! Но я для себя, в общем-то, уже уяснила, что к чему. В пикселах, так в пикселах.
Постоянный участник
Степаныч
Медаль
Сообщений: 636
3 дня назад
На скорую руку решение с логотипом и с заголовками.

В index.php находите класс с логотипом у Вас это

<div class="art-object20424339933"></div>

Переносите это перед закрывающим тегом </header>

Логотип должен появится на верху, дальше Вам нужно будет уменьшить картинку логотипа, что бы она не залазила на меню, и не мешала кликать на пункты и все стили подогнать под новое изображение.

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

Со слоганом тоже можно попробовать перенести его.
Постоянный участник
Evgenert
Медаль
Сообщений: 305
3 часа назад
Innajan, преффикс art- из кода лучше убрать, а если его поменять то можно получить вообще уникальный код для шаблона joke
В видеоурокох есть про то как убрать art-:
Скрытый текст виден только зарегистрированным пользователям


Еще можно название сайта в теге H1 исправить на div почитать можно здесь:
Скрытый текст виден только зарегистрированным пользователям


Еще некоторые доработки шаблонов artisteer:
Скрытый текст виден только зарегистрированным пользователям


Спойлер
Редактировалось: 1 раз (Последний: 10 мая 2015 в 11:33)
Посетитель
Innajan
Сообщений: 26
104 дня назад
Спасибо огромное всем за советы!
А можно ли как-то привязать логотип и слоган к краю листа? А то при смене разрешения всё выравнивание разъезжается...
А меню нельзя вытащить поверх лого во избежание перекрытия (мало ли, может, со временем будет куча подпунктов и они перекроют-таки логотип)?
Evgenert, спасибо за ссылки, надо будет все просмотреть.
По поводу ночей и праздников... Я могу работать только по ночам и спасибо добрым людям за то что помогают!
Редактировалось: 1 раз (Последний: 11 мая 2015 в 23:59)
|
Перейти на форум:
Быстрый ответ
У вас нет прав, чтобы писать на форуме.