Как сверстать шапку наиболее грамотно в данном примере?

CSS HTML PHP

1 ответ

Здравствуйте!

стили , которые важно знать примерно следующие

.content{ max-width: 1440px; } .section-content{ max-width: 1140px; }

.content{ max-width: 1440px; } .section-content{ max-width: 1140px; }

Подскажите пожалуйста как грамотно сверстать .header т.к. не понятно как позиционировать исключительно по центру логотип (.logo). Очень не хотелось бы использовать position: absolute. Но ничего другого придумать не могу пока. И где должен располагаться .burger-menu-desctop триггером на его открытие разумеется будет кнопочка .burger но вот сам .burger-menu-desctop занимает 100% ширины контента, т.е. есть предположение что саму менюшку .burger-menu-desctop нужно располагать в блоке .content

Дополнительно:

В песочнице codepen сверстайте свой вариант, тогда другим будет проще вам что-то посоветовать.

.header {   display:grid;   grid-template-columns: 1fr min-content 1fr; }

.header { display:grid; grid-template-columns: 1fr min-content 1fr; }

&lt;header&gt;   &lt;left/&gt;   &lt;logo/&gt;   &lt;right/&gt; &lt;/header&gt;

Сергей delphinpro, а не гридом это можно сделать? Просто грид это все же вопрос поддержки до сих пор для многих браузеров
Muranx, откуда дровишки?
https://caniuse.com/css-grid абсолютно все браузеры поддерживают гриды
Muranx, на флексах можно так же. только для логотипа фиксированный размер, а для боковушек ширину через calc(50% - var(--logo-width) / 2)

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Алексей Денисов Ответ

Для верстки шапки наиболее грамотно в данном примере, рекомендуется использовать следующий подход:

1. Создайте контейнер для шапки с помощью тега

. В этот контейнер поместите элементы шапки, такие как логотип, меню навигации и другие элементы.

2. Для логотипа сайта используйте тег с атрибутом src, указывающим путь к изображению логотипа. Для лучшей доступности добавьте атрибут alt с описанием логотипа.

3. Для навигационного меню используйте тег