メニューの右上隅に日付と時刻を追加するにはどうすればよいですか？

Question

私はレスポンシブなウェブデザインプロジェクトに取り組んでいます。私は問題を抱えています。つまり、右上隅に書かれたメニューに時間と日付を追加したいのです。私はこの効果を達成することができましたが、残念なことにページが可能な限り小さなサイズ、日付と時間の影のリスト要素に変更されました。数日間、私はこれを修正しようとしていますが、どうすればいいのかわかりません。手伝って頂けますか？

P.S.ページの下部には、うまく機能する崩壊ナビバーもあります。最良のオプションは、すべての

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; 
 
     } 
 
\t \t 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; 
 
\t font-family: Coda, sans-serif 
 
\t font-size: 12px !important; 
 
\t 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; 
 
\t font-family: Coda, sans-serif; 
 
\t font-size: 12px !important; 
 
\t letter-spacing: 4px; 
 
    } 
 
    
 
    .clock p 
 
    { 
 
     display: block; 
 
     color: #FFFFFF; 
 
     text-align: center; 
 
     padding: 0 0 0 0; 
 
     text-decoration: none; 
 
    } 
 
    
 

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

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

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

Answer 1

まず、以下のコードを変更することです：pはすでにブロックです。あなたはあなたのCSSでそれを適用する必要はありません。秒：.clockと.topcornerは同じです。 HTMLから1つのクラスを削除し、あなたのCSSにスタイルを入れてください。次へ：あなたはすでにちょうどこの場所フォントのサイズでクロックと減少とこれはあなたのpに追加

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

    } 

を使用しています。また絶対位置をオフにすると、ページを折りたたむときにドキュメントの流れから外れることはありません。

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; 
 
     } 
 
\t \t 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; 
 
\t font-family: Coda, sans-serif 
 
\t font-size: 12px !important; 
 
\t 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;} 
 
\t 
 
\t .clock 
 
\t { 
 
\t \t overflow: hidden; 
 
\t \t background-color: #000000; 
 
\t \t font-family: Coda, sans-serif; 
 
\t \t font-size: 6px !important; 
 
\t \t letter-spacing: 4px; 
 
\t \t top: 14px; 
 
\t \t right: 16px; 
 
\t } 
 
    
 
     .clock p 
 
\t { 
 
\t \t color: #FFFFFF; 
 
\t \t text-align: center; 
 
\t \t padding: 0 0 0 0; 
 
\t \t text-decoration: none; 
 
\t } 
 
    } 
 
    
 
    
 
    
 
    
 
    .clock 
 
    { 
 
     overflow: hidden; 
 
     background-color: #000000; 
 
\t font-family: Coda, sans-serif; 
 
\t font-size: 12px !important; 
 
\t letter-spacing: 4px; 
 
\t 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"> 
 
\t <p id="date_time"></p> 
 
\t <script type="text/javascript">window.onload = date_time('date_time');</script> 
 
</div> 
 

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