Как добавить дату и время в верхнем правом углу в меню?

Question

Я работаю над адаптивным проектом веб-дизайна. У меня есть проблема, а именно, что я хочу добавить время и дату в письменное меню, которое должно быть в верхнем правом углу. Частично мне удалось добиться этого эффекта, но, к сожалению, когда страница меняет размер на минимально возможный, элементы списка даты и времени затмевают. Уже несколько дней я пытаюсь это исправить, но понятия не имею, как это сделать. Вы можете мне помочь?

PS Внизу страницы у меня также есть сваливающаяся панель навигации, которая хорошо работает. Лучшим вариантом будет изменить код ниже

function date_time(id)
{
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Niedziela,', 'Poniedziałek,', 'Wtorek,', 'Środa,', 'Czwartek,', 'Piątek,', 'Sobota');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
  result = ''+days[day]+' '+d+' '+months[month]+' '+'  |  '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}

  
  ul.topnav 
  {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000000;
   font-family: Coda, sans-serif
   font-size: 12px !important;
   letter-spacing: 4px;
  }

   ul.topnav li 
   {
      float: left;
   }

   ul.topnav li a 
   {
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
   }

   ul.topnav li a:hover:not(.active) 
   {
      background-color: #9ECB16;
   }

   @media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}
   }
   
   
   
   
   .clock
   {
      overflow: hidden;
      background-color: #000000;
   font-family: Coda, sans-serif;
   font-size: 12px !important;
   letter-spacing: 4px;
   }
   
   .clock p
   {
      display: block; 
      color: #FFFFFF;
      text-align: center;
      padding: 0 0 0 0;
      text-decoration: none;
   }
   

   
   .topcorner
   {
   position: absolute;
      top: 14px;
      right: 16px;
   }

<!-- CLOCK -->
<div class="clock topcorner">
 <p id="date_time"></p>
 <script type="text/javascript">window.onload = date_time('date_time');</script>
</div>

<!-- MENU -->
<ul class="topnav">
    <li><a href="#">SALON</a></li>
 <li><a href="#">SYPIALNIA</a></li>
    <li><a href="#">KUCHNIA</a></li>
 <li><a href="#">ŁAZIENKA</a></li>
 <li><a href="#">PRZEDPOKÓJ</a></li>
</ul>

Answer 1

Прежде всего: р уже блок. Вам не нужно применять это в вашем CSS. Второе: .clock и.topcorner - то же самое для вас. удалите один класс из html и соедините стили в вашем css, так как вы создаете беспорядок для себя. Далее: вы уже используете

@media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}

   }

Просто добавьте к этому свой p с часами и уменьшите в этом месте размер шрифта. Также отключите абсолютную позицию, чтобы она не вышла из потока документа при свертывании страницы.

Answer 2

function date_time(id)
{
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Niedziela,', 'Poniedziałek,', 'Wtorek,', 'Środa,', 'Czwartek,', 'Piątek,', 'Sobota');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
  result = ''+days[day]+' '+d+' '+months[month]+' '+'  |  '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}

  ul.topnav 
  {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000000;
   font-family: Coda, sans-serif
   font-size: 12px !important;
   letter-spacing: 4px;
  }

   ul.topnav li 
   {
      float: left;
   }

   ul.topnav li a 
   {
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
   }

   ul.topnav li a:hover:not(.active) 
   {
      background-color: #9ECB16;
   }

   @media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}
   
   .clock
   {
    overflow: hidden;
    background-color: #000000;
    font-family: Coda, sans-serif;
    font-size: 6px !important;
    letter-spacing: 4px;
    top: 14px;
    right: 16px;
   }
   
      .clock p
   {
    color: #FFFFFF;
    text-align: center;
    padding: 0 0 0 0;
    text-decoration: none;
   }
   }
   
   
   
   
   .clock
   {
      overflow: hidden;
      background-color: #000000;
   font-family: Coda, sans-serif;
   font-size: 12px !important;
   letter-spacing: 4px;
   position: absolute;
      top: 14px;
      right: 16px;
   }
   
   .clock p
   {
      color: #FFFFFF;
      text-align: center;
      padding: 0 0 0 0;
      text-decoration: none;
   }

<!-- CLOCK -->
<div class="clock">
 <p id="date_time"></p>
 <script type="text/javascript">window.onload = date_time('date_time');</script>
</div>

<!-- MENU -->
<ul class="topnav">
    <li><a href="#">SALON</a></li>
 <li><a href="#">SYPIALNIA</a></li>
    <li><a href="#">KUCHNIA</a></li>
 <li><a href="#">ŁAZIENKA</a></li>
 <li><a href="#">PRZEDPOKÓJ</a></li>
</ul>