2017-06-19 271 views
0

我有一個問題,我希望我的頁眉被固定到Web瀏覽器的頂部,與我製作的導航欄相同。問題是,當我更改Web瀏覽器的大小時,標題將覆蓋內容並移動導航欄。我該如何解決這個問題?頁面大小改變時頁頭重疊內容HTML

<body> 
    <h1>Knox Enterprises Inc.</h1> 
    <div class="nav"> 
     <a href="index.html">Home</a> 
     <a href="About.html">About</a> 
     <a href="Contact.html">Contact</a> 

    </div> 
    <div class="adjust"> 
     <div class="home"> 
      <div class="home-pictures"> 
       <img src="http://i64.tinypic.com/14o91c1.jpg" width="300px" height="225px"> 
       <img src="http://i63.tinypic.com/2rpzh3p.jpg" width="300px" height="225px"> 
      </div> 
      <div class="home-pictures2"> 
       <img src="http://i68.tinypic.com/rswqoy.jpg" width="300px" height="225px"> 
       <img src="http://i66.tinypic.com/2lm8bdg.jpg" width="300px" height="225px"> 
      </div> 
      <div class="home-description"> 
       <ul> 
        <h5>Riveredge, NJ</h5> 
        <h5>Date Completed: June 2014</h5> 
       </ul> 
     </div> 
     <div class="home"> 
      <div class="home-pictures"> 
       <img src="home_5.jpg" width="300px" height="225px"> 
       <img src="home_6.jpg" width="300px" height="225px"> 
      </div> 
      <div class="home-pictures2"> 
       <img src="home_7.jpg" width="300px" height="225px"> 
       <img src="home_8.jpg" width="300px" height="225px"> 
      </div> 
      <div class="home-description"> 
       <ul> 
        <h5>Teaneck, NJ</h5> 
        <h5>Date Completed: March 2015</h5> 
       </ul> 
     </div> 
     <div class="home"> 
      <div class="home-pictures"> 
       <img src="home_9.jpg" width="300px" height="225px"> 
       <img src="home_10.jpg" width="300px" height="225px"> 
      </div> 
      <div class="home-pictures2"> 
       <img src="home_11.jpg" width="300px" height="225px"> 
       <img src="home_12.jpg" width="300px" height="225px"> 
      </div> 
      <div class="home-description"> 
       <ul> 
        <h5>Tenafly, NJ</h5> 
        <h5>Date Completed: August 2016</h5> 
       </ul> 
     </div> 
    </div> 
</body> 

和我的CSS代碼是

html, body { 
     margin: 0; 
     padding: 0; 
     background-image:url("backround.jpg"); 
     background-repeat: repeat-y; 
    } 
    /*Knox Header*/ 
    h1 { 
     position: fixed; 
     top: -40px; 
     width: 100%; 
     font-family: Georgia; 
     color: white; 
     text-shadow: 4px 4px black; 
     background-image: url("header.jpg"); 
     font-size: 60px; 
     text-align: center; 
     text-transform: uppercase; 
     border-bottom: 5px solid orange; 
     border-top: 5px solid orange; 
    } 
    /*Nav Menu/Home Page*/ 
    .nav { 
     position:fixed; 
     padding-top:78px; 
     background-image:#606060; 
     overflow: hidden; 
     } 
    .nav a { 
     font-family: Helvetica; 
     background-color:black; 
     float: left; 
     color: #f2f2f2; 
     text-align: center; 
     padding: 10px 12px; 
     text-decoration: none; 
     font-size: 12px; 
     border-right: 2px solid orange; 
     border-bottom: 2px solid orange; 
     border-top: 2px solid orange; 
     letter-spacing: 2px; 
     } 
    .nav a:hover { 
     background-color: #ddd; 
     color: black; 
     } 
    .home { 
     text-align:center; 
     padding-top: 10px; 
     padding-bottom: 10px; 
     } 
    .home-pictures, .home-pictures2{ 
     height:auto; 
     width:auto; 
     display: inline-block; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    .home img { 
     border: 1px solid white; 
     } 
    .home-description { 
     line-height: 0px; 
     color: white; 
     letter-spacing: 2px; 
     font-family: Helvetica; 
     font-size: 18px; 
     } 
+0

爲您的內容提供等於或高於標題高度的邊距。讓它隨着媒體查詢或與js的調整大小 – buxbeatz

+0

這裏是擺弄解決方案https://jsfiddle.net/stqo2mxk/ praticly柯克哈登解決方案實施 – buxbeatz

+0

還沒有將java納入我的html,但生病嘗試這可能。謝謝。 –

回答

0

把這兩樣元素的容器內,使這個容器固定而不是使用兩個元素與position: fixed。 它們都沒有流動,因此它們不會受到彼此的影響(因此當內容沒有足夠寬度時導航欄將與h1重疊,因此它必須斷開線路)

https://jsfiddle.net/7ntdes6t/

0

我想通過包裝你的頭和導航欄在它自己的標籤入手,如:

<header class='header-fixed'> 
    <h1>Knox Enterprises Inc.</h1> 
    <div class="nav"> 
    <a href="index.html">Home</a> 
    <a href="About.html">About</a> 
    <a href="Contact.html">Contact</a> 
    </div> 
</header> 

然後,你只需要擔心的一個固定位置的元素。

從那裏,你有一些選擇。

  1. 你可以使用JavaScript來監視窗口尺寸並調整對您的相應的margin-top。

  2. 你可以確定你的標題在普通瀏覽器尺寸上的高度,並使用media queries來調整其餘的。

編輯:

其實,你知道什麼會更容易?

<header> 
    ... 
</header> 
<div id="Content"> 
    ... 
</div> 

header { 
    height: 120px; 
} 
#content { 
    height: calc(100% - 120px); 
    overflow-y: scroll; 
} 

如果你能找出你的頭究竟有多高,那麼你可以使用計算()來設置你的內容的其餘部分的高度,實際上使該分區的一部分滾動。那時,你不需要固定位置。

+0

好吧,我會嘗試做一些這些。我對HTML很陌生,所以需要研究如何做媒體查詢。 –

+0

其實,你知道什麼會更容易嗎?

頭{高度:120像素; } #content {height:calc(100% - 120px); overflow-y:scroll; } –

+0

生病嘗試並執行此操作。 –