На многих сайтах уже принято, как стандарт, в шапке сайта размещать логотип, который является ссылкой на главную страницу.
Как правило, такой логотип размещается с левой стороны и рядом с ним находится меню сайта.
В этому уроке хочу рассмотреть технику верстки, которая позволяет добиться такого эффекта.
На самом деле, ничего сложного здесь нет.
Для примера, давайте возьмем следующую структуру документа:
Место для меню
ПLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Текст footer
Если мы просто вставим логотип внутрь header, без всяких стилей:
То, можно будет увидеть следующую картину:
Место для меню сместилось на уровень ниже и теперь отображается не правильно.
Чтобы избежать этой ситуации, к логотипу нужно добавить следующие стили CSS.
Для ссылки, которая содержит логотип мы используем обтекание слева float:left, и с помощью margin-ов задаем точную позицию логотипа.
Теперь все отображается так, как надо:
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Результат
Отслеживать
задан 11 ноя 2016 в 9:40
652 1 1 золотой знак 7 7 серебряных знаков 21 21 бронзовый знак
А где у вас 1) таки расположена, по вашему мнению шапка и 2)какое из изображений логотип?
11 ноя 2016 в 9:47
Может вы имеете ввиду иконку в title слева?
11 ноя 2016 в 9:48
Они должны быть размещены на шапке. Отступы уже сделаны, нужно просто наложить их на картинку
11 ноя 2016 в 9:48
Установите style=position:absolute;left:0px;top;0px; на картинке логотипа и располагайтесь left top как вам нравится
11 ноя 2016 в 9:50
Это для шапки установить такие значения?
11 ноя 2016 в 9:52
Сортировка: Сброс на вариант по умолчанию
Мне кажется, что так будет проще:
#header < background: url(img/header.jpg) no-repeat; >Отслеживать
15.9k 8 8 золотых знаков 52 52 серебряных знака 99 99 бронзовых знаков
ответ дан 30 дек 2016 в 10:25
129 6 6 бронзовых знаков
если по быстрому то
но это большое зло так делать нельзя нужно не картинки использовать а background
Отслеживать
ответ дан 11 ноя 2016 в 19:01
Artem Molotko Artem Molotko
82 4 4 бронзовых знака
так ответь как надо, а не показывай костыли!
11 ноя 2016 в 19:04
Нужно изменить порядок блоков
Отслеживать
ответ дан 9 мар 2017 в 8:24
Sergey Vikhristyuk Sergey Vikhristyuk
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
25 февраля 1993 года Марк Андрессен (Marc Andreessen) написал:
Предлагаю новый опциональный HTML-тег: IMG
При нем должен обязательно указываться аргумент SRC=«url».
Тег отсылает к файлу растрового изображения (bitmap или pixmap). Браузер будет запрашивать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту тега в коде страницы .
Допустим, вы нарисовали в Corel Draw! логотип компании и собираетесь разместить его на сайте не как-нибудь, а формате HTML5. И, соответственно, размещать картинку не в растровом формате, а в .SVG
Что это дает, понятно – при любом масштабировании на планшете или любом другом гаджете мы имеем идеально точно отрисованную картинку, насколько детализированной она бы ни была.
По умолчанию экспорт из Corel Draw! в SVG формат даже при галочке «Только выделенные объекты» дает в результате картинку такого размера, как наш рабочий лист. То есть картинка будет на A4, если рабочий лист такого формата. Приходится делать отдельный лист точно такого размера в пикселах, какой нам нужен, делать наш логотип именно такого размера, центровать, а потом уже экспортировать.
При вставке на страницу тега
мы видим сразу волшебный результат в браузерах под Android 4 и на ipad’ах, но ничего не видим на компьютере в обычных браузерах. Firefox 13, IE 8, Opera 12, Chrome (версия 24)- все дружно предлагают скачать и сохранить SVG файл вместо того, чтобы просто показать его.
Попробуем другой способ вставки SVG —
— показывает совершенно аналогичный результат, Опера, правда, выдает «Нет плагина. Ознакомиться?».
Третий способ вставки SVG – с помощью тега
Вижу опять ту же картину – все мои браузеры не показывают SVG.
По таблице совместимости – все мои браузеры кроме IE8 просто обязаны показывать правильно. К тому же, напомню, планшеты под Android и IPad IOS отображают мою страницу верно.
Оказывается, дело в том, что мой сервер (IBM Lotus Domino) не умеет корректно отдавать MIME-Type для SVG. И файл, лежащий в File Resources базы, не может быть корректно отдан! Прописываю строчку image/svg+xml в свойствах ресурса. И, о чудо! – все браузеры (кроме IE8) показывают все три варианта (img, embed, object) вставки картинки. Отлично, это меня устраивает, «костыли» для IE будут в gif. Еще раз удивляюсь тому факту, что даже без mime-type на планшетах все показывалось правильно.
А теперь я пробую увеличить масштаб страницы, чтобы посмотреть на свой логотип, а, точнее, сравнить, как отображается один и тот же файл, вставленный тремя разными тегами. Оказывается, при увеличении масштаба страницы в Firefox, контур того варианта, который был вставлен тегом IMG, то расплывается, то снова становится четким.
Я не претендую на звание специалиста в этой области, наоборот, хотела бы задать вопрос. Просто не нашла ничьего мнения по данному вопросу. У SVG формата нет watermarks, равно как и других защитных атрибутов.
Обычно фирмы владеют файлами в векторах как исходниками. Делая брендбук, дизайн-студии отдают вектор, а везде используется уже растр.
А SVG, вообще-то, текстовый формат, точнее, XML-ный. И, будучи вставленным в любую программу для паблишинга, он будет воспроизведен без потери качества. Это надо учитывать, т.к. редактировать ваши файлы будет гораздо проще и, возможно, потом будет нечем доказать, что вы являетесь законным правообладателем.
Логотип для сайта. Вроде и банальность, но ответственный подход к его созданию и популяризации, способен свергать горы!
Перефразируя классиков, можно сказать, что правильный логотип — это больше половины всего дела! Поэтому нельзя вот просто так взять и игнорировать правильный/качественный/действенный логотип для своей компании/проекта/сайта.
Логоти́п (от др.-греч. λόγος — слово + τύπος — отпечаток) — оригинальное начертание полного или сокращённого наименования организации или товара. Логотип является словесной частью товарного знака. Википедия
Логотип – это уникальное изображение, служащее для создания запоминающегося образа и уникальности брэнда. Он есть у малых и крупных компаний, он встречается повсеместно на сайтах в интернете. Встретить сайт без логотипа — большая редкость.
Логотип играет немалую роль в формировании качественного интернет-ресурса. А сам качественный логотип увеличивает постоянную аудиторию сайта, увеличивает продажи и активность пользователей. Влияя психологически, логотип из года в год, поднимает уровень авторитета владельца, откладывая подсознательный образ в памяти клиента/потребителя/участника/посетителя. По этой причине, логотип очень редко меняется, ведь в популяризацию существующего вкладывается немалые время и средства.
Какие бывают логотипы и что нужно о них знать вебмастерам?
Каждый логотип помимо того, что должен олицетворять компанию или проект, должен обладать психологическим влиянием, выглядеть простым, но нести скрытый смысл. Логотип очень редко меняется, поэтому при его создании нужно ориентироваться на целые поколения клиентов/потребителей/участников/посетителей, исходя из того, что он не должен устаревать!
Логотипы можно разбить на 3 группы, каждая из которых в той или иной мере используется на практике:
Создание логотипа – процесс довольно сложный и ответственный. Он должен быть не только красивым и простым, но и информативным. Любой смысл логотипа возможно скомбинировать в рамках одной из указанных групп.
К логотипам на сайтах выдвигается ряд требований. Зачастую это неписанные правила, никем не регламентируемые, но тем не менее, зачастую выполняемые вебмастерами. Итак, как должен выглядеть логотип на сайте?
С большим ростом мобильных устройств, сайты принято делать адаптивными (респонсивными), такая верстка используется для удобства посетителей сайта, которые могут просматривать сайт с разнообразных устройств с самыми разными разрешениями экранов. Адаптивный дизайн — адаптируется под разрешение экрана пользователя. Таким образом, целесообразно адаптировать и сам логотип.
Технически это сделать не сложно. Нужно запастись разными вариантами логотипов (большой, средний и маленький), подключить в месте вывода логотипа код:
и подключать стили в CSS, вызывая вызов логотипов, согласно разрешениям у посетителей Вашего сайта:
@media only screen and (max-width: 1000px) < #logo < background: url("logo1.png") >> @media only screen and (max-width: 600px) < #logo < background: url("logo2.png"); >> @media only screen and (max-width: 300px) < #logo < background: url("logo3.png"); >>
Оцените материал:
(5 голоса, рейтинг: 3,60 из 5)
Вячеслав Скоблей (ака files) — типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на WordPress, решаю многочисленные проблемы, которые до появления интернета не существовали.
Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой.
Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро.
Пишите, если возникли вопросы Сказать СПАСИБО!