Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Положение И Размер Логотипа В Дизайне Туризм

Автор FamilyLand, 27 мая 2017 16:58

Авторизуйтесь для ответа в теме

Сообщений в теме: 5

#1 FamilyLand

Продвинутый пользователь

Пользователи
92 сообщений

ГородМосква

Отправлено 27 Май 2017 - 16:58

Добрый день!
Подскажите пожалуйста как сделать логотип больше и заполнить им весь пустой левый верхний угол. При изменении размера логотип сдвигает меню. В HTML не очень силён, пробовал что-то менять тут

#header .container > .logo {display: block;float: left;position: relative;width: 170px;height: 145px;text-align: center;}
#header .container > .logo a {display: block;line-height: 145px;vertical-align: middle;z-index: 2;padding: 3px 5px 5px 5px;}
#header .container > .logo img {display: inline-block;max-height: 145px;}

но максимум что у меня получилось это поставить логотип справа)

Прикрепленные изображения

Наверх

#2 RayLi

Активный участник

Модераторы
2 864 сообщений

Отправлено 27 Май 2017 - 17:45

No Tolerance (27 Май 2017 - 16:58) писал:

Добрый день!
Подскажите пожалуйста как сделать логотип больше и заполнить им весь пустой левый верхний угол. При изменении размера логотип сдвигает меню. В HTML не очень силён, пробовал что-то менять тут

#header .container > .logo {display: block;float: left;position: relative;width: 170px;height: 145px;text-align: center;}
#header .container > .logo a {display: block;line-height: 145px;vertical-align: middle;z-index: 2;padding: 3px 5px 5px 5px;}
#header .container > .logo img {display: inline-block;max-height: 145px;}

но максимум что у меня получилось это поставить логотип справа)

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

Наверх

#3 FamilyLand

Продвинутый пользователь

Пользователи
92 сообщений

ГородМосква

Отправлено 27 Май 2017 - 18:13

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

Наверх

#4 Firefly

Активный участник

Модераторы
3 810 сообщений

Отправлено 28 Май 2017 - 11:25

No Tolerance (27 Май 2017 - 18:13) писал:

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

Здравствуйте.
В шаблоне main.css код:

#header .header-right {float: left;width: calc(100% - 170px);border-right: 1px solid rgba(60,60,60,0.1);}

Заменил на:

#header .header-right {float: left;width: calc(100% - 215px);border-right: 1px solid rgba(60,60,60,0.1);}

Код:

#header .container > .logo {display: block;float: left;position: relative;width: 170px;height: 145px;text-align: center;}

Заменил на:

#header .container > .logo {display: block;float: left;position: relative;width: 215px;height: 145px;text-align: center;}

Код:

#header .header-right .header-links .top-links .links li {display: inline-block;font-size: 11px;text-transform: uppercase;line-height: 19px;padding: 0 16px;border: 0;}

Заменил на:

#header .header-right .header-links .top-links .links li {display: inline-block;font-size: 11px;text-transform: uppercase;line-height: 19px;padding: 0 11px;border: 0;}

Код:

#custommenu .mainnav > li > a {display: block;position: relative;text-transform: uppercase;padding: 9px 20px 9px 15px;font-size: 14px;font-family: 'PT Sans Narrow', sans-serif;font-weight: 400;letter-spacing: 1px;transition: color 0.1s,background-color .1s;}

Заменил на:

#custommenu .mainnav > li > a {display: block;position: relative;text-transform: uppercase;padding: 9px 20px 9px 10px;font-size: 14px;font-family: 'PT Sans Narrow', sans-serif;font-weight: 400;letter-spacing: 1px;transition: color 0.1s,background-color .1s;}

Проверьте результат, пожалуйста