2017-11-12 8 views
0

私は現在、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> 
+0

ロゴとナビゲーションバーを同じ水平線にしたいですか? – Sudarshan

+0

同じですがお互いの上にあるので、ロゴは最初にページの中央に表示され、そのすぐ下にナビゲーションバーが表示されます。私はこれをやったことがありますが、他の画像を挿入すると、ナビゲーションバーが完全に移動します。 – xKetjow

+0

編集 - 私はそれを修正しました。必要なのは、最初はナビゲーションバーの上に置いていたので、HTML内の2番目の画像の xKetjow

答えて

0

画像1について、ピクセルに割合からの高さを変更します。 (セイ150ピクセル)

Image1 { height: 150px; } 

を次に、あなたのul要素と右のロゴの下にナビゲーションバーを座ってする必要があり

Ul { 
Top: 150px; 
Display: Fixed; 
} 

を入れてみてください!

ブラウザで開発ツールを使用して何が起こっているかを確認します。 I.E.Eマージンを下げるなど クロムで右クリックして「要素を調べる」ことができます。

+0

私はお互いの権利を置くことができたが、私の問題はそれ以上の画像を入れたときに、ナビゲーションバーと元の位置に戻すことはできません。私が定位置に置いたとき:固定し、それを右に動かした。 – xKetjow

+0

編集 - 私はそれを修正しました。必要なのは、最初はナビゲーションバーの上に置いていたので、HTML内の2番目の画像の xKetjow

関連する問題