Как выставить элеменеты header'а в нужном месте?
Нужно выставить элементы хедера в таком порядке:
Но в силу неопытности не понимаю как это сделать.
https://codepen.io/sinastra/pen/zYbOzJK
Как сделать отступ между "Concert Tours" и "News" как на картинке?
Получилось сделать по колхозному, но с таким способом он не реагирует на "резиновость".
Прошу помочь :)
Дополнительно:
Во флексах margin-right: auto для "Concert Tours"
Ответы:
если указываете ul то надо и написать и li. ul это список чего-то. А li это ячейка этого списка. Поэтому li и ul неотъямлемые части. Чтобы выставиль блоки в одну линию надо задать блокам свойство display, display: block или display: inline-block. Если использоваь display: block то надо задать дополнительно float: left, или же float: right. Но при свойстве float есть подводные камни, поэтому лучше использовать display: inline-block, здесь float не надо указывать. И никогда не задавайте длинну в пискселях, или в em, то шо при адаптивной вёрстке, т.е. при подгонке под размеры моб. устройств, будет шо попало.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles/header__main-page.css"> <link rel="stylesheet" href="body.css"> <title>Lorna Shore</title> <style> body { margin: 0; width: 100%; } header { display: block; width: 90%; text-align: center; margin: 0 auto; padding: 10px 20px; } nav { display: inline-block; position: relative; width: 80%; text-align: center; vertical-align: top; margin: 0 auto; } .logo__header { width: 7%; text-align: left; display: inline-block; } .logo__header a { width: 80%; display: block; } ul { padding: 0; margin: 0; vertical-align: top; display: inline-block; list-style-type: none; } .nav-center { width: 30%; margin: 0 20px; display: inline-block; } .account-button__header { width: 5%; text-align: right; display: inline-block; } .account-button__header a { width: 70%; display: block; } img { width: 100%; display: block; } .left-nav__header { width: 25%; } .right-nav__header { width: 30%; } .left-nav__header li { display: inline-block; list-style-type: none; width: 40%; vertical-align: top; margin-left: 10px; } .right-nav__header li { display: inline-block; list-style-type: none; width: 28%; vertical-align: top; margin-left: 10px; }</style> </head> <body> <header> <div class="logo__header"><a href="#"><img src="https://i.ibb.co.com/KFYwpxb/logo-Lorna-Shore.png" alt="logo"></a></div> <nav class="nav"> <ul class="left-nav__header"> <li><a href="#"><img src="https://i.ibb.co.com/qNnh7Sy/SHOP.png" alt="shop"></a></li> <li><a href="#"><img src="https://i.ibb.co.com/W0zrw15/Concert-tours.png" alt="concert tours"></a></li></ul> <a class="nav-center" href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a> <ul class="right-nav__header"> <li><a href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a></li> <li><a href="#"><img src="https://i.ibb.co.com/5W5Q8L4/About.png" alt="about"></a></li> <li><a href="#"><img class="contact-nav__header" src="https://i.ibb.co.com/Bt6jFP6/Contact.png" alt="contact"></a></li></ul></nav> <div class="account-button__header"><a href="#"><img src="https://i.ibb.co.com/tKTFL2M/account-icon.png" alt="account"></a></div></header> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles/header__main-page.css"> <link rel="stylesheet" href="body.css"> <title>Lorna Shore</title> <style> body { margin: 0; width: 100%; } header { display: block; width: 90%; text-align: center; margin: 0 auto; padding: 10px 20px; } nav { display: inline-block; position: relative; width: 80%; text-align: center; vertical-align: top; margin: 0 auto; } .logo__header { width: 7%; text-align: left; display: inline-block; } .logo__header a { width: 80%; display: block; } ul { padding: 0; margin: 0; vertical-align: top; display: inline-block; list-style-type: none; } .nav-center { width: 30%; margin: 0 20px; display: inline-block; } .account-button__header { width: 5%; text-align: right; display: inline-block; } .account-button__header a { width: 70%; display: block; } img { width: 100%; display: block; } .left-nav__header { width: 25%; } .right-nav__header { width: 30%; } .left-nav__header li { display: inline-block; list-style-type: none; width: 40%; vertical-align: top; margin-left: 10px; } .right-nav__header li { display: inline-block; list-style-type: none; width: 28%; vertical-align: top; margin-left: 10px; }</style> </head> <body> <header> <div class="logo__header"><a href="#"><img src="https://i.ibb.co.com/KFYwpxb/logo-Lorna-Shore.png" alt="logo"></a></div> <nav class="nav"> <ul class="left-nav__header"> <li><a href="#"><img src="https://i.ibb.co.com/qNnh7Sy/SHOP.png" alt="shop"></a></li> <li><a href="#"><img src="https://i.ibb.co.com/W0zrw15/Concert-tours.png" alt="concert tours"></a></li></ul> <a class="nav-center" href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a> <ul class="right-nav__header"> <li><a href="#"><img src="https://i.ibb.co.com/5TzzSMB/News.png" alt="news"></a></li> <li><a href="#"><img src="https://i.ibb.co.com/5W5Q8L4/About.png" alt="about"></a></li> <li><a href="#"><img class="contact-nav__header" src="https://i.ibb.co.com/Bt6jFP6/Contact.png" alt="contact"></a></li></ul></nav> <div class="account-button__header"><a href="#"><img src="https://i.ibb.co.com/tKTFL2M/account-icon.png" alt="account"></a></div></header> </body> </html>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы выставить элементы header'а в нужном месте на странице, вам потребуется использовать CSS и HTML. Есть несколько способов достичь этой цели, в зависимости от вашего дизайна и требований.
Один из способов - использовать CSS свойство position. Вы можете задать элементу header позицию fixed или absolute, чтобы он оставался на своем месте независимо от скроллинга страницы или других элементов. Например:
<header style="position: fixed;top: 0;left: 0;width: 100%"> <!-- Ваш контент здесь --> </header>
Если вам нужно разместить header внутри контейнера, вы можете использовать свойство position: relative для родительского элемента и position: absolute для header'а. Например:
<div style="position: relative"> <header style="position: absolute;top: 0;left: 0;width: 100%"> <!-- Ваш контент здесь --> </header> </div><div style="position: relative"> <header style="position: absolute;top: 0;left: 0;width: 100%"> <!-- Ваш контент здесь --> </header> </div>
Также вы можете использовать flexbox или grid layout для управления расположением элементов на странице. Например, с помощью flexbox:
<header style="justify-content: space-between"> <!-- Ваши элементы header'а здесь --> </header>
Или с помощью grid layout:
<header style="grid-template-columns: 1fr 1fr"> <!-- Ваши элементы header'а здесь --> </header>
Надеюсь, эти примеры помогут вам выставить элементы header'а в нужном месте на вашей странице. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.