Поставить кнопки под изображение

Question

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-image: url("Music museum/fon/white.png");
  background-size: cover;
  background-position: center;
}

.button {
  margin: 10px;
  padding: 15px 30px;
  font-size: 20px;
  color: #DF73FF;
  background-color: rgba(250, 250, 250, 0.5);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  flex: 1 0 auto;
}

.button:hover {
  color: #DF73FF;
  background-color: rgba(204, 204, 255, 0.8);
}

#image-container img {
  width: 100%;
  object-fit: cover;
}

#image-container {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

<div id="image-container">
  <img src="Music museum/covers/open.jpg">
</div>
<footer>
  <form action="Music museum/1The_Weeknd_-_House_Of_Balloons_Glass_Table_Girls.html">
    <button class="button">The Weeknd - House Of Balloons Glass Table Girls</button>
    <form action="Music museum/2JAWNY_-_Honeypie.html">
      <button class="button"> JAWNY - Honeypie</button>
      <button class="button">Кнопка 3</button>
      <button class="button">Кнопка 4</button>
</footer>

Сейчас они сверху на изображении, а должны быть под ним. Желательно не на одной строчке, а каждая на своей

Answer 1

Тег <form> обязательно должен иметь закрывающий тег
У контейнера картинки уберите position: absolute, он вырывает элемент из потока документа, поэтому следующий за ним блок смещается вверх, а блок с картинкой позиционируется относительно документа.

Получится примерно так:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            background-image: url("Music museum/fon/white.png");
            background-size: cover;
            background-position: center;
        }

        .button {
            margin: 10px;
            padding: 15px 30px;
            font-size: 20px;
            color: #DF73FF;
            background-color: rgba(250, 250, 250, 0.5);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            flex: 1 0 auto;
        }

        .button:hover {
            color: #DF73FF;
            background-color: rgba(204, 204, 255, 0.8);
        }
        
        #image-container img {
            width: 100%;
            object-fit: cover;
        }
        #image-container {
            width: 100%;
            text-align: center;
            overflow: hidden;
        }
}

    </style>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="image-container">
            <img src="Music museum/covers/open.jpg">
        </div>
<footer>
 <form action="Music museum/1The_Weeknd_-_House_Of_Balloons_Glass_Table_Girls.html">
  <button class="button">The Weeknd - House Of Balloons Glass Table Girls</button>
 </form> <!-- Здесь закрыть --->
 <form action="Music museum/2JAWNY_-_Honeypie.html">
    <button class="button"> JAWNY - Honeypie</button>
    <button class="button">Кнопка 3</button>
    <button class="button">Кнопка 4</button>
 </form> <!-- Здесь закрыть --->
</footer>
</body>
</html>

БЛОГ НА HUSL

Поставить кнопки под изображение

Ответы (1 шт):