Как вставить логотип на шапку сайта?
Результат
Отслеживать
задан 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
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Мне кажется, что так будет проще:
#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.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как вставить логотип и меню в одной строке?
Здравствуйте. Не как не могу поставить логотип и меню на одну строчку. Получается, что логотип выдавливается вниз. Покрасил в зелёный, то что выдавливает. При absolute наезжает на меню.
https://codepen.io/Mymacom/pen/NQjovp
- Вопрос задан более трёх лет назад
- 7095 просмотров
2 комментария
Простой 2 комментария
alex steel @alexsteel07
а так (скрин) prntscr.com/ommb5p
Mymacom @Mymacom Автор вопроса
alex steel, с первого взгляда да, но меню адаптивное (гамбургер), а с ним что-то не так просто. Конечно можно засунуть в медия скрин, но какая-то примитивность мучает
Решения вопроса 0
Ответы на вопрос 3
Ну самое простое, что ты можешь сделать, так это добавить свойство float: left; для id Menu. (Но это далеко не самый лучший вариант)
Но лучше добавь им двоим (#logo и #Menu) float: left;. После чего добавь ширину для твоего лого (в отладчике показывает, что его ширина примерно 175px). А для #Menu добавь ширину 100% отняв отуда ширину лого. Примерно так -> ( width: calc(100% — 175px); ).
Техника позиционирования логотипа внутри шапки сайта (header).
На многих сайтах уже принято, как стандарт, в шапке сайта размещать логотип, который является ссылкой на главную страницу.
Как правило, такой логотип размещается с левой стороны и рядом с ним находится меню сайта.
В этому уроке хочу рассмотреть технику верстки, которая позволяет добиться такого эффекта.
На самом деле, ничего сложного здесь нет.
Для примера, давайте возьмем следующую структуру документа:
Заголовок.
П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,
Если мы просто вставим логотип внутрь header, без всяких стилей:
То, можно будет увидеть следующую картину:
Место для меню сместилось на уровень ниже и теперь отображается не правильно.
Чтобы избежать этой ситуации, к логотипу нужно добавить следующие стили CSS.
Для ссылки, которая содержит логотип мы используем обтекание слева float:left, и с помощью margin-ов задаем точную позицию логотипа.
Теперь все отображается так, как надо:
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Урок 11. Установка логотипа через CSS
Добавим несколько полезных вещей, с помощью которых можно облегчить себе жизнь, работая над сайтом. Прежде всего, решим вопрос установки логотипа через документ стилей CSS, который мы уже прописывали, говоря о ссылках, заголовках и тексте.
Для того, чтобы установить логотип через CSS, а не устанавливать его на каждой странице сайта вручную, нужно прописать этот самый логотип в нашем документе CSS. Делаем это так:
Открываем наш документ CSS и вписываем в него такую строчку:
div#logo < width:599; height:98px; background:url('http://dugward.ru/LM311.jpg'); top left no-repeat;>
— «div» -, как вы уже знаете, коробочный тег, который отграничивает элемент от соседних;
— слово «logo» — это собственное наименование нашей картинки логотипа.
— атрибуты «width:599; height:98px;» — это, как вы уже знаете, ширина и высота картинки (в данном случае, ширина и высота логотипа, который мы устанавливали в соответствующем уроке);
— «background:url(‘http://dugward.ru/LM311.jpg’);» — адрес картинки, который записывается именно таким образом (никаких вариаций не допускается, одинарные кавычки должны быть на своих местах);
— «top left no-repeat;» — картинка будет стоять слева, не размножаться.
Вы можете задать свои параметры для изображения и установить его справа, либо по центру. Так, как нужно вам.
Далее, в html-код вашей страницы, в то место, на котором вы намерены установить картинку, вместо адреса картинки вы вписываете такой тег, адресующий к вашему документу CSS:
Если мы разместим в нашем документе этот фрагмент, то код страницы будет выглядеть так:
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.
А здесь вы поставите свои баннеры, если захотите
Красным зачёркнутым я обозначила тот фрагмент, который вы убираете и на его место ставите новый фрагмент, который выделен синим цветом.
В готовом виде ничего не изменится, ваш логотип будет стоять там же. где ему и положено стоять на странице.
Таким образом можно вставлять картинки в любое место страницы вашего сайта. Вы задаёте картинке название и прописываете её в документа стилей CSS, а потом вставляете соответствующий фрагмент в страницу сайта. Например, вы ставите картинку под названием «sw». В документе CSS это будет выглядеть так:
Зачем это нужно? Какая разница, ствить на страницу Но представьте: вы создали в фотошопе новый, более красивый логотип и хотите поставить его на сайт. А у вас на сайте 20, 40, 80 или более страниц. Поменять логотип вручную на каждой из ста страниц. На это же уйдёт уйма времени!
А так — вам достаточно поменять картинку в CSS и она автоматически поменяется на всех страницах.
Примечание: Помните, что стили CSS не допускают неточностей, документ стилей гораздо более «капризный», чем html. Поэтому старайтесь не допускать никаких собственных интерпретаций и если у вас что-то не пошло, внимательно посмотрите, не пропустили ли вы где-нибудь непарную кавычку, или поставили вместо непарной кавычки — парную.
Так же помните, что классы рисунков обозначаются только словами, а не цифрами, как в случае с заголовками. Нужно писать наименование класса прописываемого в CSS рисунка «logo» или «sw», или «net», а не «1», «2», или «3».
Урок окончен.