1

Если точнее , то есть у меня есть Header: введите сюда описание изображения

Если сделать окно браузера в пол экрана , то получается:

введите сюда описание изображения

Что хочу я: введите сюда описание изображения

Код Header'a:
HTML :

<!--Хиадер-->
<div class="BackgroundHeader"></div>
<div class = "row HeaderText">
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 ImgBrand">
<!--<img src = "https://i.pinimg.com/originals/f4/ae/17/f4ae17e0fdef8361185405752c460bd5.png" width="250" height = "150">-->
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Self-development">
<p><b>Саморазвитие</b></p>
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Lessons">
<p><b>Уроки</b></p>
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Shop">
<p><b>Магазин</b></p>
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Office">
<p><b>Личный кабинет</b></p>
</div>
<div class = "col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 Help">
<p><b>Помощь</b></p>
</div>
</div>
</div>

CSS :

.BackgroundHeader
{
    width:3000px;
    height:100px;
    position:relative;
    border:1px;
    background-color:white;
    z-index:4;
}
     .HeaderText
{
    position:relative;
    top:-65px;
    z-index:6;
    font-size:18px;
}
.Self-development
{
    left:185px; 
}
.Lessons
{
   left:75px;
}
.Shop
{
    left:-105px; 
}
.Office
{
    left:-275px; 
}
.Help
{
   left:-365px; 
}
.ImgBrand
{
    position:relative;
    top:-60px;
}

//Также там есть место под бренд,но сейчас он просто отсутствует,я его потом доставлю.Сейчас мне главное понять по какому принципу это работает.

//При возможности хотел бы получить ответ не обязательно полный (можно сказать что искать),но на чистом HTML-CSS.

1
  • почитайте про margin'ы и media query
    – meine
    9 сен 2019 в 20:00

1 ответ 1

1

Зачем каждый элемент отдельно позиционировать? Посмотрите про margin и padding. Или, как вариант, сделать меню через флекбоксы. Отличная статья на эту тему: https://html5.by/blog/flexbox/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.