私は現在、CSSとHTMLを混乱させるだけのウェブサイトを作成していますが、ナビゲーションバーに問題があります。私はそれを作成しましたが、私は私のロゴをページの上部、つまりナビゲーションバーの上に置くと、ナビゲーションバーはページの真ん中に移動しました。ロゴのすぐ下にあります。私が覚えていることは、私がその時点で位置していない別の画像を入れたときに起こったことですが、その画像を移動した後でさえ、ナビゲーションバーは元の位置に戻っていませんでした。私はそれの位置を固定にしようとしましたが、それを画面の左側に移動しました。ナビゲーションバーをロゴの下に移動してそこに留めるにはどうしたらいいですか?
また、ナビバーを再び壊さずに、ウェブサイト内の2番目の画像を移動するにはどうすればよいですか?
は、ここに私のCSSです:
#image1 {
display: block;
margin-left: auto;
margin-right: auto;
height: 8%;
width: 30%;
}
#image2 {
position: relative;
width: 20%;
top: 400px;
right: 481px;
}
ul {
list-style-type:none;
width:60%;
margin: auto;
padding: 0;
overflow: hidden;
background-color: rgba(163,21,23,1.00)
}
li {
float: right;
width: 33.33%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border: thin;
border-style: groove;
}
li a:hover {
background-color: #111;
}
body {
background-color: rgba(96,96,96,1.00)
}
そして、これは私のHTMLです:CSSで
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> LoL </title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<img src="assets/lol.png" alt="Logo" id="image1">
<img src="assets/minions.png" alt="Minions in LoL" id="image2" >
<ul>
<li><a class="active" href="#Home">Home</a></li>
<li><a href="#Farming">Farming</a></li>
<li><a href="#Best champions for each role">Best champions for each role</a>
</li>
</ul>
<banner></banner>
</body>
</html>
ロゴとナビゲーションバーを同じ水平線にしたいですか? – Sudarshan
同じですがお互いの上にあるので、ロゴは最初にページの中央に表示され、そのすぐ下にナビゲーションバーが表示されます。私はこれをやったことがありますが、他の画像を挿入すると、ナビゲーションバーが完全に移動します。 – xKetjow
編集 - 私はそれを修正しました。必要なのは、最初はナビゲーションバーの上に置いていたので、HTML内の2番目の画像の xKetjow