2016-12-14 1 views
0

html/cssコードのposition属性の問題を解決するのが難しいです。私はw3を試してみましたが、この属性に関する多くのstackoverflow/exchangeポストは無駄です。私は同じ場所でそれと一緒にスクロールすることができるように固定位置で右と下に単語 "社会的"を持っていたい。私はそれがどんな位置づけにもかかわらず、右と下にそれを得ることさえできません。私の問題が何処にあるのかも知れないので教えてください。CSS postion:fixed

<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Template_</title> 
 
    <!--><meta name="generator" content="Geany 1.27" /></--> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <style> 
 
\t .container{ 
 
\t \t position:relative; 
 
\t \t width= 100%; 
 
\t \t height= 100%; 
 
\t \t overflow=scroll; 
 
\t } 
 
\t 
 
\t .banner{ 
 
\t \t <!--></--> 
 
\t \t position:absolute; 
 
\t \t margin:5px; 
 
\t \t width:90%; 
 
\t \t right: 0px; 
 
\t } 
 
\t 
 
\t .banner .test{ 
 
\t \t <!--></--> 
 
\t \t font-weight: 900; 
 
\t \t font-size: 3em; 
 
\t \t margin:10px; 
 
\t \t font-variant: small-caps; 
 
\t } 
 
\t 
 
\t .banner .logo{ 
 
\t \t <!-->controls images within banner</--> 
 
\t \t position: ; 
 
\t } 
 
\t .social_bar{ 
 
\t \t width: 300px; 
 
\t \t border: 3px solid #73AD21; 
 
\t } 
 
\t #social_strip{ 
 
\t \t <!-->post button on either left or right to remain fixed 
 
\t \t through scrolling 
 
\t \t position:fixed; 
 
\t \t right:0;</--> 
 
\t \t position: fixed; 
 
\t \t bottom: 0px; 
 
\t \t right: 0px; 
 
\t } 
 
\t .content_container{ 
 
\t \t <!-->contain all content within container, relative to 
 
\t \t overall container</--> 
 
\t \t position: relative; 
 
\t \t margin:5px; 
 
\t \t padding:5px; 
 
\t } 
 
    </style> 
 
    </head> 
 
    <div class="social_bar" id="social_strip">social</div> 
 
    <body class="container"> 
 
\t  <div class="banner"> 
 
\t \t  <p>Banner</p> 
 
\t \t  <div class="test"> 
 
\t \t \t  <p>Test</p> 
 
\t \t  </div> 
 
\t </div> 
 
\t <div class="content_container"> 
 
\t \t <p>Content</p> 
 
\t </div> 
 
    </body>

答えて

2

HTMLスタイルにコメントを削除します。それが動作します。

これはわかりません。

しかし、CSSでは、コメントするには/* */が必要です。

(例えば)

/* This is a comment */

<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Template_</title> 
 
    <!--><meta name="generator" content="Geany 1.27" /></--> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <style> 
 
\t .container{ 
 
\t \t position:relative; 
 
\t \t width= 100%; 
 
\t \t height= 100%; 
 
\t \t overflow=scroll; 
 
\t } 
 
\t 
 
\t .banner{ 
 
\t \t position:absolute; 
 
\t \t margin:5px; 
 
\t \t width:90%; 
 
\t \t right: 0px; 
 
\t } 
 
\t 
 
\t .banner .test{ 
 
\t \t font-weight: 900; 
 
\t \t font-size: 3em; 
 
\t \t margin:10px; 
 
\t \t font-variant: small-caps; 
 
\t } 
 
\t 
 
\t .banner .logo{ 
 
\t \t position: ; 
 
\t } 
 
\t #social_strip{ 
 
\t \t position: fixed; 
 
\t \t bottom: 0px; 
 
\t \t right: 0px; 
 
     width: 300px; 
 
\t \t border: 3px solid #73AD21; 
 
\t } 
 
\t .content_container{ 
 
\t \t position: relative; 
 
\t \t margin:5px; 
 
\t \t padding:5px; 
 
\t } 
 
    </style> 
 
    </head> 
 
    <div class="social_bar" id="social_strip">social</div> 
 
    <body class="container"> 
 
\t  <div class="banner"> 
 
\t \t  <p>Banner</p> 
 
\t \t  <div class="test"> 
 
\t \t \t  <p>Test</p> 
 
\t \t  </div> 
 
\t </div> 
 
\t <div class="content_container"> 
 
\t \t <p>Content</p> 
 
\t </div> 
 
    </body>

+1

正しいです。 CSSの構文が正しくないため、 'position:fixed'プロパティが認識されませんでした。 – thesbros

+0

@thesbros私はcssにコメントする方法を覚えていません。しかし、私は彼の問題はスタイルに関するコメントだと思う。 –

+1

ありがとうございました。私がしたときにうまくいきました。.test {font-size:3em; font-variant:small-caps;}しかし、他のすべてのものはそうしなかった。それは手がかりだったはずですが、その2人が働いたので奇妙でした。私はLinux上でGeanyに自分のコードを書いていますが、コメントとして/ * * /を区別しませんが、のためにそれは私のためにクリックしませんでした。ありがとうございました! –