2017-10-09 13 views
0

2つの大きな質問があり、感謝します。ありがとうございました(私はプログラミングに興味がありません):1)私のテキストを変更してすべての画面(iphone ipad laptop)に合うようにする方法はわかりません。 ..)2)そして、どのように私は同じ水平線にとどまるように、要素を英語、フランス語...を右(私の言語)に移動できますか? おかげナビゲーションバーでこれを変更するにはどうすればよいのですか?どの画面にも合うようにコードを変更するにはどうすればよいですか?

.code { 
 
    overflow: auto; 
 
} 
 

 
.logo { 
 
    float: left; 
 
} 
 
/* ~~ Top Navigation Bar ~~ */ 
 

 
#navigation-container { 
 
    width: 1200px; 
 
    margin: 0 auto; 
 
    height: 70px; 
 
    position: fixed; 
 
    background-color: white; 
 
    opacity: 0.8; 
 
    padding-bottom: 10px; 
 
    padding-top: 0px; 
 
    margin-top: 0px; 
 
} 
 

 
.navigation-bar { 
 
    height: 70px; 
 
    width: 111%; 
 
} 
 

 

 

 
#navigation-container img { 
 
    float: left; 
 
    height: 111%; 
 
} 
 

 
#navigation-container ul { 
 
    padding: auto; 
 
    margin: auto; 
 
    text-align: center; 
 
    display: block; 
 
} 
 

 
#navigation-container li { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    height: 24px; 
 
    margin-top: 4px; 
 
    margin-bottom: 4px; 
 
    display: inline; 
 
} 
 

 
#navigation-container li a { 
 
    color: black; 
 
    font-size: 16px; 
 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 
    text-decoration: none; 
 
    line-height: 70px; 
 
    padding: 5px 15px; 
 
    opacity: 0.7; 
 
} 
 

 
#menu { 
 
    float: center; 
 
} 
 

 
a:hover { 
 
\t background-color: #0099cc; 
 
} 
 
hr { 
 
\t color: darkgray; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Welcome </title> 
 
\t <link rel="stylesheet" href="text.css" type="text/css"> 
 
\t <meta charset="UTF-8"> 
 
</head> 
 
<body> 
 
    <div class="navigation-bar"> 
 

 

 
    <div id="navigation-container"> 
 

 
     <img src="Bildschirmfoto%202017-10-08%20um%2012.01.55.png"> 
 

 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Who are we ?</a></li> 
 
     <li><a href="#">Newest</a></li> 
 
     <li><a href="#">The Best</a></li> 
 
     <li><a href="#">English</a></li> 
 
     <li><a href="#">Deutsch</a></li> 
 
     <li><a href="#">Français</a></li> 
 
     
 
     </ul> 
 
     
 
    
 
     
 
    <hr > 
 
    </div> 
 
    </div> 
 
    
 
</body> 
 
</html>

+1

Googleのこれらの機能は、ビューポートタグ、メディアクエリ、レスポンシブデザインチュートリアルなど、グッドである必要があります。 –

+0

メディアクエリとブートストラップグリッドビューは非常に優れたレスポンスです。 –

答えて

0

あなたは限り、あなたは携帯電話上のデスクトップのナビゲーションレイアウトをしたいと最小限の変更でこの作業を行うことができます。

https://codepen.io/will0220/pen/YrabEm

あなたは100%の幅であることをナビゲーションバーとナビゲーションバーのラッパーを変更することをお勧めします - あなたはそれが特定のサイズを超えることはしたくない場合は、max-幅を追加することができます。そこから、より小さいサイズ(私の例では1000pxですがそれよりも小さくすることができます)で起動するより小さいデバイスのメディアクエリを追加し、nav要素のフォントサイズ/パディングのビューポート単位に切り替えます。これは、モバイルでフルデスクトップナビを使いたい場合にのみ使用できます。ユーザビリティのために別のモバイルメニューを探す方が良いでしょうが、少なくとも現状のままで適応します。

@media (max-width: 1000px){ 
    #navigation-container li a{ 
    font-size: 3vw; 
    padding: 5px 1vw 
    } 
} 
関連する問題