0

У меня есть div 'html':

<div class="navigate-panel">
<ul class="Navigation-menu">
    <p class="text-navigation-menu">Навигация</p>
</ul> 
</div>

И я делаю его как панелькой 'css':

.navigate-panel{
width: 900px;
height: 330px;
background-color: #17181c;
margin: 50px auto;
}

И вроде бы панель отобразилась, именно по середине, то что мне нужно. Но, если я например нажму F12(Просмотр кода элемента), то у меня эта панель двигается в левую сторону. А мне это не нужно, так как у меня по верх это панели еще должны быть кое какие элементы. Они то стоят на месте, а вот она двигается. Я попробовал использовать 'position: obsalute', и осле этого она у меня передвигается вообще в непонятную сторону. И сделать её по середине не могу.

Можете подсказать что не так? Как зафиксировать эту панельку? И на будущие, как делать другие элементы в единый элемент? Т.е что бы другие позиционировали от родителя. (По моему локальная позиционирование). И что делать если пользователь будет открывать сайт с телефона? Я проверил, то там полный крындык.

4
  • Раз у Вас margin: ... auto;, то естественно, что блок центрируется. Также должны вести себя и остальные элементы, при нормальной вёрстке. В данном случае, position: obsalute - зло.
    – UModeL
    25 мар 2021 в 17:47
  • Спасибо за ответ! Т.е мне нужно убрать auto? И в место его самостоятельно прописать позицию?
    – Komend
    25 мар 2021 в 17:48
  • ну, как бы да... В общем, либо всё позишинами, либо всё авто и процентами.
    – UModeL
    25 мар 2021 в 17:50
  • Спасибо что подсказали, буду пользоваться
    – Komend
    25 мар 2021 в 17:54

2 ответа 2

0

Если вы используете для элемента position: absolute, то родительскому элементу задавайте position: relative (и двигайте элемент свойствами top/left/right/bottom относительно этого родителя)

1
  • Спасибо за ответ! Я попробовал именно оставить все как есть. А в дочерний объект присвоить "position: relative", и задавать ему позицию top, left.. в процентах. Но вот почему то все равно, родительский объект и дочерний двигаются по разному, если сужать окно браузера.
    – Komend
    26 мар 2021 в 9:28
0

все можно оставить как есть, но вместо width -> max-width

 .navigate-panel{
      max-width: 900px;
      height: 330px;
      background-color: #17181c;
      margin: 50px auto;
    }
<div class="navigate-panel">
  <ul class="Navigation-menu">
    <p class="text-navigation-menu">Навигация</p>
  </ul> 
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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