我的頁面沒有橫跨整個頁面

我有兩個問題。首先，當我在我的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; 
}

的CSS，這是我的HTML我寫的頁面。任何幫助都是極好的。我在這裏呆了幾天。

<!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標籤。我不認爲你打算在圖片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

刪除position:fixed從你的類picture

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

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

和你的超級鏈接似乎working..Isnt那你是什麼意思？

來源

2017-02-10 07:37:34 affaz

使用這一個：

<!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> 
    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

我的頁面沒有橫跨整個頁面

回答

相關問題