не удается установить цвет фона для элемента div с идентификатором

#javascript #html #css #web

#javascript #HTML #css #веб

Вопрос:

Я новичок в веб-дизайне. В этом проекте я пытаюсь установить цвет фона для 5 элементов div с их идентификатором. 3 из них работают, но последние 2 раздела (напиток и еда) не окрашиваются.Я также пытался изменить порядок и переименовать элементы или изменить элементы в тег p, но у всех них была одна и та же проблема. вот мой код и результат: вот ссылка на изображение

 <html>
    <head>
      <style>
         body
          {
            padding:0px;
            margin:0px;
          }

        #navigationbar
        {
          width:100%;
          height:131px;
          position:absolute;
          top:526px;                
        }

        .d1
        {
          font-weight:bold;
          text-align:center;
          font-size:20pt;
          width:20%;
          height:100%;
          float:left;
          margin:0px;
        }

        .p1
        {
          margin-top:65px;

        }

        #breakfast
        {
          background-color:red;
        }

        #sweets
        {
          background-color:#ff1a1a;
        }

        #appetizer
        {
          background-color:#009933;
        {


        #food
        {
          background-color:lime;
        }

        #drink
        {
            background-color:blue;
        }
            </style>
    </head>
    <body>
       <div id="navigationbar"> 
                <div class="d1" id="breakfast">  <p class="p1"> Breakfast  </p>  </div>
                <div class="d1" id="sweets">     <p class="p1">   Sweets   </p>  </div> 
                <div class="d1" id="appetizer">  <p class="p1"> Appetizer  </p>  </div> 
                <div class="d1" id="drink">      <p class="p1">  Drink     </p>  </div>
                <div class="d1" id="food">       <p class="p1">   Food     </p>  </div>
        </div>


    </body>
</html>

Ответ №1:

У вас неправильная скобка в вашем коде:

 #appetizer
{
   background-color: #009933;
{ /* wrong bracket */

вместо

 #appetizer
{
    background-color: #009933;
}

Ответ №2:

Вот рабочая версия, немного измененная для краткости и внешнего вида.

 .d1 { text-align: center; width: 20%; height: 100%; float: left; }
.p1 { margin-top: 65px; }
#breakfast { background-color: red; }
#sweets { background-color: skyblue; }
#appetizer { background-color: #009933; } /* <-- The issue was here */
#food { background-color: lime; }
#drink { background-color: blue; }

 <div id="navigationbar">
  <div class="d1" id="breakfast">
    <p class="p1"> Breakfast </p>
  </div>
  <div class="d1" id="sweets">
    <p class="p1"> Sweets </p>
  </div>
  <div class="d1" id="appetizer">
    <p class="p1"> Appetizer </p>
  </div>
  <div class="d1" id="drink">
    <p class="p1"> Drink </p>
  </div>
  <div class="d1" id="food">
    <p class="p1"> Food </p>
  </div>
</div>