— элемент навигации
HTML-элемент определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки.
| Категории контента | Потоковый контент, секционный контент, явный контент. |
|---|---|
| Допустимое содержимое | Потоковый контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, содержащий потоковый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLElement |
Атрибуты
Этот элемент поддерживает глобальные атрибуты.
Примечание
- Не обязательно все ссылки должны быть обёрнуты в . следует использовать лишь для главных навигационных блоков. Например, часто содержит список ссылок, которые не стоит оборачивать в .
- Документ может содержать несколько элементов. Например, один для навигации по сайту, второй для навигации по странице.
- Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.
Примеры
nav class="menu"> ul> li>a href="#">Главнаяa>li> li>a href="#">О насa>li> li>a href="#">Контактыa>li> ul> nav>
Спецификация
| Specification |
|---|
| HTML Standard # the-nav-element |
Совместимость браузера
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 4 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Как вставить логотип и меню в одной строке?
Здравствуйте. Не как не могу поставить логотип и меню на одну строчку. Получается, что логотип выдавливается вниз. Покрасил в зелёный, то что выдавливает. При absolute наезжает на меню.
https://codepen.io/Mymacom/pen/NQjovp
- Вопрос задан более трёх лет назад
- 7169 просмотров
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); ).
HTML: Меню
В нём меню сайта размечено с помощью обычного тега с идентификатором menu . Как известно, такое обозначение работает для разработчиков, но не для браузеров. Они не понимают, что это меню, а не просто обёртка для списка.
Для создания полноценного меню используется парный тег , задача которого — разметить область страницы с основным меню. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.
Заменим на изученный тег :
Элемент nav , как и header не является уникальным для страницы. Его можно использовать для любого меню на странице, но есть несколько рекомендаций:
- Нет необходимости оборачивать каждое меню в элемент nav . В основном такой областью указываются только основные меню. Дополнительные, такие как меню в футере, не оборачивают в тег , хотя это не запрещено.
- Хороший пример дополнительного использования nav — навигация по текущей странице.
- nav может содержать не только ссылки, но также и текст, в котором есть ссылки. Ориентируйтесь на здравый смысл. Если навигация является основной для страницы или всего сайта, то оберните её в тег .
Задание
Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег и маркированный список
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
- Оборачивайте в элемент навигации только основные меню сайта или отдельной страницы. Дополнительные меню не нуждаются в обёртке в тег
- Навигация может быть в любой области страницы, а не только в шапке сайте
Как вставить логотип на шапку сайта?
Результат
Отслеживать
задан 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
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Техника позиционирования логотипа внутри шапки сайта (header).
На многих сайтах уже принято, как стандарт, в шапке сайта размещать логотип, который является ссылкой на главную страницу.
Как правило, такой логотип размещается с левой стороны и рядом с ним находится меню сайта.
В этому уроке хочу рассмотреть технику верстки, которая позволяет добиться такого эффекта.
На самом деле, ничего сложного здесь нет.
Для примера, давайте возьмем следующую структуру документа:
Место для меню
