2016-04-01 7 views
-1

さて、私はウェブサイトで作業しています。私は中央のウェブサイトのメインコンテンツを持ち、メインコンテンツの左側には、ウェブサイト上の異なるリンクを含む垂直ナビゲーションバーが必要です。私は、ナビゲーションバーとスタイル、それを作成する方法を知っているが、私はちょうど私がウェブサイトのコンテンツの残りの部分と干渉するナビゲーションバーなしでこれを行うことが方法がわからない、ここでの例です:垂直ナビゲーションバー

https://gyazo.com/8f8fc2f7e57e9b419671e6fda603546c

あなたがリンクで見ることができるように、ナビゲーションバーのコンテンツはメインコンテンツの残りの部分の上にあるので、私はfloat:leftを追加することにしました。スタイルシートに戻って、私はそれがメインコンテンツとインラインになってしまった。なぜウェブサイトはこれをしますか?ウェブページのさまざまな要素をどのように分離し、他のものに干渉することなく自由に移動できますか?

JSFiddle

HTML:

<DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>CSGOMarble</title> 
    <link rel="stylesheet" type="text/css" href="homepage.css"> 
</head> 
<body> 
<div class="navbar"> 
    <ul> 
    <li>Coin Flip</li> 
    <li>About Us</li> 
    <li>Contact</li> 
    </ul> 
</div> 
</html> 

CSS:

body { 
background-color: #999999; 
font-family: Arial, Verdana, sans-serif; 
margin-top: 50px 
} 
h1 { 
background-color: black; 
color:white; 
padding-top: 30px; 
padding-bottom: 30px; 
margin-left: 275px; 
margin-right: 275px; 
border-radius: 10px; 
margin-bottom: 50px; 
} 
.container{ 
margin-left: 275px; 
margin-right: 275px; 

} 

li { 
list-style-type: none; 
float: left; 
} 
+0

navと他のオブジェクトを分割する必要があります表示。あなたが持っているものは、Webページの始まりに過ぎません。時間がたつにつれて、より多くのスタイリング「クラス」を作成してください。そうすれば、ページにあまり多くのCSSコードは必要ありません。 – Sparky256

答えて

0

float: leftワットすべてのnavアイテムを隣り合わせに配置します(水平スペースがある限り)。垂直メニューの場合は、liの項目でdisplay: blockを使用してください(デフォルトですので、CSSに書き込む必要はありません)。これはそれらをお互いの下に置きます。

ウィンドウの要素(メニューの左部分のような)を修正するには、position: fixedを使用します。これは画面との相対的なもので、残りの部分はスクロールしません。しかし、それはメインコンテンツのような固定されていない他の要素と重なり合うので、それらをオフセットで配置する必要があります(例えばposition: relative; left: 180px;

+0

こんにちは!あなたの答えをありがとう、しかし、私は水平にリストを修正すると、あなたが言ったように、すべてのコンテンツが重複し、位置を使用してそれを修正していない! – Senoj

+0

あなたはそれを別のDIVに入れなければなりません – Johannes

0

li {float: left;} 

を削除し、代わりに

を追加
.navbar{float: left} 

は...あなたの問題

を解決しますが、私はあなただけのレイアウトについてやHTML要素の配置に関するいくつかの基本的な理解が不足して推測し、自由にあなたの要素を「移動」するために、あなただけのレイアウトは、物事た必要あなたのニーズにフィットした後、彼らは他のことを干渉しないだろう:)

レイアウトチュートリアル:http://www.w3schools.com/html/html_layout.asp
ポジショニングのチュートリアル:http://www.w3schools.com/css/css_positioning.asp

関連する問題