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 you have read our privacy policy.

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