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>

Ваш ответ

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

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