取得の背景色は、こんにちは、私は新たなんだすべてのように私に簡単に行くのdiv

.wrapper { 
 
height:1200px; 
 
width:800px; 
 
overflow: auto; 
 
background:green; 
 
padding-top: 0px; 
 
padding-bottom: 0px; 
 
padding-left: 0px; 
 
padding-right: 0px; 
 

 
} 
 

 
.sidebar { 
 
background:grey; 
 
position:absolute; 
 
left:10%; 
 
top:0px; 
 
bottom:0px; 
 
width:20%; 
 
height:100%; 
 
float:left; 
 
} 
 

 
.content { 
 
background:blue; 
 
position:absolute; 
 
left:30%; 
 
right:0px; 
 
top:0px; 
 
bottom:0px; 
 
width:70%; 
 
float:left; 
 
} 
 

 
body { 
 
padding-top: 0px; 
 
padding-bottom: 0px; 
 
padding-left: 0px; 
 
padding-right: 0px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Steven game dev</title> 
 
\t <link rel="stylesheet" type="text/css" href="style2.css"/> 
 
</head> 
 
<body> 
 
\t <div class="wrapper"> 
 
\t <div class="sidebar"> 
 
\t \t <a href="home.html">Home</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">About</a> 
 
     \t \t <br> 
 
     \t \t <a href="page3.html">Blog</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Videos</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Pictures</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Contact</a> 
 
\t </div> 
 
\t <div class="content"> 
 
\t </div> 
 
\t </div> 
 
</body> 
 

 
\t 
 
</html>

上で動作します。私は何年も前にやったことのないクイックウェブサイトを作ろうと決心しました。文字通りすべてを忘れてしまいましたが、戻ってくるのは簡単にできると思っていました。何らかの理由で間違っていました。私のDivsの1人。 divはコンテナdiv内にありますが、これは私が問題を抱えている理由かもしれませんが、以前は何度も問題があったはずがないと確信しています。問題の部門は私のサイドバーですなぜ難しいのか理解できませんが、私はそれを解決するために多くのことを試してきました。私のCSSのしつこい性質を許してください私はすぐにdivsをブロックしようとしていたので、私が行っていたことの視覚を得ることができました。どんな助けでも大いに感謝しています。私はそれが私が逃した何かばかげたものだと確信していますが、これは簡単なものでなければなりません。

出典

2017-04-25 moderategamer

コードスニペットを表示すると、オレンジのサイドバーではなく、グレーのコンテナのみが表示されます。フィドルであなたのコードを見ると、オレンジ色が表示され、奇妙な灰色が隠れて見えます。とにかく、灰色の背景色を削除して、オレンジが通っているかどうかを確認してください。注目すべきは、要素のサイズが背景色のように重ならないため、罫線がわかりやすいことです。 – mrkd1991

、これは謎ですが、私はそれが働いてしまっています。ここに解決策があります：

#sidebar { 
    height: 100%; 
    width: 50%; 
    background-color:orange; 
    float:left; 
}

"待ってください"、私はあなたに "同じコードです！"と言います。どうやらない。 width: 50%;とbackground-color: orange;の間には見えない文字がありますが、背景色が止まっています。

スニペットをテストすると、私はコードを削除して再入力することになりました。これは、私が絶望的になったときに行うことです。

出典

2017-04-25 11:43:19 Manngo

ありがとう本当に奇妙です私はメモ帳++は私がこのすべてを手入力したために私を運んでいると思います。隠された文字は見えませんか、古い古い普通のメモ帳に切り替えると思っています。私が入力したものはすべて動作しませんが、私が物事を貼り付けると、彼らは大変感謝してくれたおかげで再び感謝します。 – moderategamer

それはとても変わったので、メモ帳に切り替えて、突然すべてが動作します！ – moderategamer

@moderategamerそこにいた、それは、ポストカードを買った。 Notepad ++は通常とても良いです（私は普通のWindowsを使わないので、最近の経験はありません）。ときどき型を変更するとタイプミスが強調されることもありますが、時にはこのような厄介な文字があります。好奇心のために、その理論をテストするためにN ++に目に見えない文字を表示する価値があるかもしれません。これがあなたの質問に答えた場合は、その答えを受け入れる気になりますか？ – Manngo

-1

サイドバーのナビゲーションメニューを探していると思います。また、以下のhttps://www.w3schools.com/w3css/w3css_sidebar.aspとhttp://jsfiddle.net/coltrane/cxQGc/をお勧めします。

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <div class="sidebar"> 
      <a href="page2.html">Home</a> 
      <br> 
      <a href="page2.html">About</a> 
      <br> 
      <a href="page2.html">Blog</a> 
      <br> 
      <a href="page2.html">Videos</a> 
      <br> 
      <a href="page2.html">Pictures</a> 
      <br> 
      <a href="page2.html">Contact</a> 
     </div> 
     <div class="content"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
    </body> 
</html> 
<style type="text/css"> 
.sidebar { 
    background: orange; 
    position: absolute; 
    left: 0; 
    top: 0px; 
    bottom: 0; 
    width: 178px; 
} 

.content { 
    background: red; 
    position: absolute; 
    left: 178px; 
    right: 0; 
    top: 0px; 
    bottom: 0; 
} 
</style>

出典

2017-04-25 02:21:03 Ace

答えをありがとう、私はまだそれが何らかの考えながら動作していない理由を得ることはありません。 – moderategamer

背景色：オレンジの前に空白文字があります。そこで、ブラウザは名前が認識できない[空白] [空白]の背景色であると考えました。私はdevtoolsの#sidebar要素を見て、その文字列にいくつかの目に見えない空白があった場合にのみ意味をなさないunrecognized rule: background-colorを得たのでこれを知っています。あなたの控えめなCSSの書き込みは使えませんでした！真剣

#sidebar \t { 
 
    height: 100%; 
 
    width: 50%; 
 
    background: orange; 
 
    float:left; 
 
} 
 

 
#container { 
 
    height: 800px; 
 
    width: 100%;    
 
    float:left; 
 
    background-color: grey; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    padding-top:0px; 
 
    padding-bottom:0px; 
 
} 
 

 
#content { 
 
    float: left; 
 
    background-color: red; 
 
    width:50%; 
 
    height:100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    padding-top:0px; 
 
    padding-bottom:0px; 
 
    background-color:blue; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <link rel="stylesheet" type="text/css" href="styledesign.css"/> 
 
</head> 
 
\t <title> 
 
Steven game dev! 
 
\t </title> 
 

 
<div id ="container"> 
 
<div id ="sidebar"> 
 
<a href="page2.html">Home</a> 
 
<a href="page2.html">About</a> 
 
<a href="page2.html">Blog</a> 
 
<a href="page2.html">Videos</a> 
 
<a href="page2.html">Pictures</a> 
 
<a href="page2.html">Contact</a> 
 
</div> 
 
<div id ="content"> 
 

 
\t <h1>Welcome to my website take a look around </h1> 
 
\t <p> 
 
\t I'm a drop out game developer from the University of Abertay Dundee and I've decided to give it another go. 
 
\t Watch me learn game development along the way as I slowly build my first 3d game using the Unreal Engine 4. 
 
\t </p> 
 

 

 
\t 
 
\t <p> 
 
\t Here is some work I have been doing on particles. As you may have noticed the goal was to try and recreate the particles from the Legends of Zeld: Windwaker. 
 
\t I'm still learning but it's a start the basic principles are there still have to work on the debris that scatters of from the explosion with trails of smoke 
 
\t following behind using Tails in ue4 particles editor. 
 
\t </p> 
 
\t 
 
</div> 
 
</div> 
 

 

 
</html>

出典

2017-04-25 02:23:37

CSSの追加のスペースはほとんど無視されます。重要なスペースは、（a） 'font {family：：Lucida Grande 'のように、' ab {} 'や（b）のような引用符で囲まれたプロパティのスペースのような、子セレクタの効果を持つセレクタのいくつかのスペースです。 ";" 'background-color'の周りのスペースは影響を与えません。 – Manngo

@Manngo十分な公正、それは別の空白文字だったに違いない。私が開発者のツールを見るとき、私は '認識されないルール：背景色 'を見たので、 'background-color'を取り囲む空白を削除すると、ブラウザはそれを認識しました。 –

取得の背景色は、こんにちは、私は新たなんだすべてのように私に簡単に行くのdiv

答えて

関連する問題