HTMLとCSSのナビゲーションバーのエラー

私はHTMLのナビゲーションバーを作成する必要がある学校プロジェクトをやっています& CSS。私は以下のコードを持っていますが、それが欲しいほど反応しません。HTMLとCSSのナビゲーションバーのエラー

私は画面を小さくすると、テキストが近くになる。 pクラスの間に固定スペースを追加する方法や、別の方法でこの問題を解決する方法はありますか？

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Header</title> <!-- This is the page title --> 
    <link href="style.css" rel="stylesheet" type="text/css"> <!-- This adds the stylesheet so that "style.css" can edit this page --> 
    <meta content="Hugh Chalmers" name="author"> 
</head> 
<body> 
    <div class="header"> <!-- This will be the Navigation Bar part of the page. Currently, it is invisible, but the CSS will change that. --> 
     <p class="text" id="home">Home</p> 
     <p class="text" id="about">About Us</p> 
     <p class="text" id="contact">Contact Us</p> 
     <p class="text" id="products">Products</p> 
     <p class="text" id="forums">Forums</p> 
    </div> 
</body> 
</html>

はCSS：

.header { 
    position: absolute; 
    width: 100%; 
    height: 10%; 
    left: 0; 
    top: 0; 
    background-color: red; 
} 

.text { 
    font-family: font-family: 'PT Sans',sans-serif; 
    font-size: 30px; 
    font-weight: 700; 
    color: #fff; 
    position: absolute; 
} 

#home { 
    position: absolute; 
    left: 5%; 
} 

#about { 
    position: absolute; 
    left: 15%; 
} 

#contact { 
    position: absolute; 
    left: 27%; 
} 

#products { 
    position: absolute; 
    left: 40%; 
} 

#forums { 
    position: absolute; 
    left: 53%; 
}

出典

2016-10-13 Hugh Chalmers

です絶対的な位置付けの_awful_多くはあなたのページが成長するにつれて維持する本当のクマになります。私は確かにいくつかのより穏やかなルールに従ってページがあなたのコンテンツを自然に流すことができる何かより少ないマニュアルを行うことを検討することをお勧めします。 –

あなたは本当に面倒なCSSスタイルを持っています –

あなたがp要素にdisplay:inline-blockを使用することができ、これを行うにはposition:absoluteを使用しないでください。

.header { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    background-color: red; 
} 

.text { 
    font-family: font-family: 'PT Sans',sans-serif; 
    font-size: 30px; 
    font-weight: 700; 
    color: #fff; 
    display: inline-block; 
    text-align:center; 
    padding: 5px; 
}

すべての個体にスタイルを設定する必要はありません。p。

JSFiddle

出典

2016-10-13 19:26:10 xort

これら

CSSを使用してCSSスタイルを置き換えます

.header { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    background-color: red; 
} 
.text { 
    font-family: font-family: 'PT Sans',sans-serif; 
    font-size: 30px; 
    font-weight: 700; 
    color: #fff; 
} 
.header p { 
    display: inline-block; 
    padding: 0 5px; 
} 

@media (max-width: 480px) { 
    .text { 
    font-size: 1em; 
    font-weight: 350; 
    } 
.header p { 
    display: inline-block; 
    padding: 4px 0; 
    } 
}

出典

2016-10-13 19:31:39

私はこれが好きですが、画面サイズが小さくなるとリスト項目が消えます。どうすればこの問題を解決できますか？ –

あなたは[Media Query]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）について学ぶ必要があります。あなたの問題を解決するためにメディアクエリで私の答えを編集しました@HughChalmers –

[This]（https://css-tricks.com/snippets/css/media-queries-for-standard-devices/）は、デバイスごとに、指定する必要があるサイズを特定するための優れたリソースです。しかし、私はほとんど常にちょうど1つのサイズで回っています。それはあなたのhtmlとcssがどのように構造化されているか、そしてあなたが使っているポジショニングやユニットなどに本当に依存します。 – vladdobra

あなたのナビゲーションバーには、実際に、どのようなナビゲーションバーがあるオプションのリストを（表すことになっている場合それでは、意味的には、意味的には、リストを使う意味があります。順序は本当に重要ではありませんので、我々は順不同リスト、<ul>使用したい：その後、水平に表示するために、次に

<div class="header"> 
    <ul> 
     <li class="text" id="home">Home</li> 
     <li class="text" id="about">About Us</li> 
     <li class="text" id="contact">Contact Us</li> 
     <li class="text" id="products">Products</li> 
     <li class="text" id="forums">Forums</li> 
    </ul> 
</div>

を、それはそれらを浮き、または表示モードを変更するのいずれかの単純な問題です。私は後者を好む：

.header ul li 
{ 
    display: inline-block; 
}

あなたのCSSの少し微調整バージョンと例：https://jsfiddle.net/L0pb47ms/

出典

2016-10-13 19:38:59

はこれらを使用してHTMLとCSSスタイルを置き換えます

ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: red; 
 
} 
 

 
ul.topnav li {float: left;} 
 

 
ul.topnav li a { 
 
    display: block; 
 
    font-size: 30px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
ul.topnav li a:hover:not(.active) {background-color: #111;} 
 
ul.topnav li.right {float: right;} 
 

 
@media screen and (max-width: 400px){ 
 
    ul.topnav li.right, 
 
    ul.topnav li {float: none;} 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link href="style.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
<ul class="topnav"> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 

 
</body> 
 
</html>

出典

2016-10-13 20:40:22

HTMLとCSSのナビゲーションバーのエラー

答えて

関連する問題