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>
Googleのこれらの機能は、ビューポートタグ、メディアクエリ、レスポンシブデザインチュートリアルなど、グッドである必要があります。 –
メディアクエリとブートストラップグリッドビューは非常に優れたレスポンスです。 –