ページ全体が伸びていない

私には2つの質問があります。最初は、自分のHTMLタグに書き込むときに、ページを実行するときにハイパーリンクを使用できないということです。他の主な理由は、私のコードがページ全体に広がらないことです。ここでページ全体が伸びていない

私は

body { 
    background: #B2906F; 
    font-family: arial; 
    margin: 0; 
    height: 100%; 
} 

.maincontainer{ 
    width: 100%; 
    margin: 0 auto; 
} 


.picture{ 
    display: inline; 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    z-index: -1; 
    background-size: 100%; 
} 

.button{ 
    padding: 10px 15px; 
    text-decoration: none; 
    border-radius: 5px; 
    background-color: #05280c; 
} 
.button-primary:hover { 
    background-color: #05370c; 
} 

h1 { 
    display: inline; 
    margin: 0; 
    background-color: #2c421f; 
    padding: 5px; 
    position: absolute; 
} 

ul{ 
    margin: 0; 
    display: inline; 
    padding: 0px 0px 0px 250px; 
} 
ul li { 
    display: inline-block; 
    list-style-type: none; 
    padding: 15px 10px; 
    color: #050c0c; 
    margin: 0; 
    border-radius: 5px; 
} 

ul li a { 
    color: black; 
} 

footer{ 
    clear: both; 
} 

nav { 
    color: 
    height: 100%; 
    margin: 0; 
    background-color: #2c421f; 
}

ページをスタイリングし、これは私がページのために書いた私のhtmlであるために書いたCSSはあります。どんな助けも素晴らしいだろう。私はここ数日間ここで立ち往生している。

<!DOCTYPE html> 
<html> 

<head> 
    <title>NWWolfPack</title> 
    <link href="main.css" rel="stylesheet" /> 
</head> 

<body> 
    <div class="maincontainer"> 
     <h1>NW Wolf Pack</h1> 
     <div class="picture"><img src="camo.jpg" width="100%" height="150"> 
      <header> 
       <nav> 
        <ul> 
         <li class="button"><strong>Home</strong></li> 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
        </ul> 
       </nav> 
      </header> 
     </div> 
     <footer>2017 Dillan Hall</footer> 
</body> 

</html>

出典

2017-02-10 Dillan Hall

もう何が問題だったのですか？：| – Leo

申し訳ありませんが、私はそれをひどく言いました。私はちょうど私のCSSが左から右へページを横切って走るようにしたい。現時点では、ちょうど半分になります –

あなたのコードの開始タグと終了タグを確認してください。私はあなたが画像のdivの中でそのヘッダーをナビゲートするつもりだったとは思わない。 – Adrianopolis

これに従ってください：

body { 
 
    background: #B2906F; 
 
    font-family: arial; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
.maincontainer { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.picture { 
 
    display: inline; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
    background-size: 100%; 
 
} 
 

 
.button { 
 
    padding: 10px 15px; 
 
    text-decoration: none; 
 
    border-radius: 5px; 
 
    background-color: #05280c; 
 
} 
 

 
.button-primary:hover { 
 
    background-color: #05370c; 
 
} 
 

 
h1 { 
 
    display: inline; 
 
    margin: 0; 
 
    background-color: #2c421f; 
 
    padding: 5px; 
 
    position: absolute; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
    display: inline; 
 
    padding: 0px 0px 0px 250px; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    padding: 15px 10px; 
 
    color: #050c0c; 
 
    margin: 0; 
 
    border-radius: 5px; 
 
} 
 

 
ul li a { 
 
    color: black; 
 
} 
 

 
footer { 
 
    clear: both; 
 
} 
 

 
nav { 
 
    color: height: 100%; 
 
    margin: 0; 
 
    background-color: #2c421f; 
 
}

<div class="maincontainer"> 
 
     <h1>NW Wolf Pack</h1> 
 
     <div class="picture"><img src="camo.jpg" width="100%" height="150"> 
 
      <header> 
 
       <nav> 
 
        <ul> 
 
         <li class="button"><strong>Home</strong></li> 
 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
 
        </ul> 
 
       </nav> 
 
      </header> 
 
     </div> 
 
     <footer>2017 Dillan Hall</footer>

出典

2017-02-10 07:33:03

あなたは最高です。ありがとう、それは完全に働いた。 –

は、それはあなたの問題を引き起こしているあなたのCSSの.pictureにposition:fixedです。また、私はあなたのmaincontainerは閉鎖divを持っていないことに気づいた。

出典

2017-02-10 07:35:29 Adrianopolis

はpicture

.picture{ 
    display: inline; 
    margin: 0; 
    padding: 0; 

    z-index: -1; 
    background-size: 100%; 
}

あなたのクラスからposition:fixedを削除し、あなたのハイパーリンクは、あなたが何を意味するのかということworking..Isntしているようですか？

出典

2017-02-10 07:37:34 affaz

使用この1：

<!DOCTYPE html> 
<html> 

<head> 
    <title>NWWolfPack</title> 
    <link href="main.css" rel="stylesheet" /> 



</head> 

<body> 
    <div class="maincontainer"> 
     <h1>NW Wolf Pack</h1> 
     <div class="picture"><img src="http://www.dvd-ppt-slideshow.com/images/ppt-background/background-5.jpg" width="100%" height="150"> 
      <header> 
       <nav> 
        <ul> 
         <li class="button"><strong>Home</strong></li> 
         <li><a href="records.html" class="button button-primary"><strong>Records</strong></a></li> 
         <li><a href="membership.html" class="button button-primary"><strong>Membership</strong></a></li> 
         <li><a href="contactus.html" class="button button-primary"><strong>Contact Us</strong></a></li> 
        </ul> 
       </nav> 
      </header> 
     </div> 
     <footer>2017 Dillan Hall</footer> 
</body> 

</html>

STYLE：これがお手伝いします

<style> 
    button{ 
    padding: 10px 15px; 
    text-decoration: none; 
    border-radius: 5px; 
    background-color: #05280c; 
} 
.button-primary:hover { 
    background-color: #05370c; 
} 

h1 { 
    display: inline; 
    margin: 0; 
    background-color: #2c421f; 
    padding: 5px; 
    position: absolute; 
} 

ul{ 
    margin: 0; 
    display: inline; 
    padding: 0px 0px 0px 250px; 
} 
ul li { 
    display: inline-block; 
    list-style-type: none; 
    padding: 15px 10px; 
    color: #050c0c; 
    margin: 0; 
    border-radius: 5px; 
} 

ul li a { 
    color: black; 
} 

footer{ 
    clear: both; 
} 

nav { 
    color: 
    height: 100%; 
    margin: 0; 
    background-color: #2c421f; 
} 
    </style>

希望。それ以外の質問があれば教えてください。

出典

2017-02-10 07:44:13 Sangrai

ページ全体が伸びていない

答えて

関連する問題