導航欄覆蓋以下文本

我有一個簡單的標題與img和導航欄。我希望導航欄出現在img下面（這是發生了什麼），但導航欄出現在下面的文本後面。我無法弄清楚如何讓文本在導航欄下面並停止覆蓋它（已經嘗試了清楚）。導航欄覆蓋以下文本

我想提一提我是新來的，所以我可以看看很簡單。

精彩的jsfiddle鏈接：http://jsfiddle.net/k2qQN/

然後，這裏是我的html：

< 

header role="banner"> 
     <img src="../assets/images/autologo.png" alt="A and B automotive logo" /> 
     <nav role="navigation"> 
      <ul> 
       <li><a href="#about-us/about-us.html">Services</a></li> 
       <li><a href="#getting-in-touch">Getting in Touch</a></li> 
       <li><a href="about-the-shop/about-the-shop.html">About Us</a></li> 
      </ul> 
     </nav> 
    </header> 
    <div role="main"> 
     <section id="services" title="Small overview of service"> 
      <h1>Title for content</h1> 
      <p> At <a href="getting-in-touch">Some shop</a> Some random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following infoome random text following info</p> 

     </section>

這裏是CSS：

html, body, #container { 
    height: 100%; 
    width: 100%; 
    border: 1px solid black; 
    font-size: 1.1em; 
    } 

header { 
    height: 20%; 
    width: 100%; 
    } 

img { 
    height: 100%; 
    width: auto; 
    }

來源

2013-03-05 user2093601

您在瀏覽哪個瀏覽器？ – Techmonk 2013-03-05 09:23:52

Chrome和火狐 – user2093601 2013-03-05 09:25:43

Firefox上的小提琴看起來不錯...它可能是圖像高度的原因：100％也許？由於圖像沒有加載的課程 – Techmonk 2013-03-05 09:27:12

給與role="main"上邊距股利。給它一個ID或類第一，所以你可以參考它更容易，那麼這樣做：

#main-div { 
    margin-top: 100px; 
}

來源

2013-03-05 09:25:37

這將完全工作，但即時通訊嘗試做我的第一個「響應式網頁設計」網站，並保持百分比，使該網站擴展到高清電視和智能手機相同。也許我可以做一個百分比而不是100px。 – user2093601 2013-03-05 09:33:41

是的，百分比邊際可能會起作用，儘管最好用@uruk給出的解決方案，他是最好的方法，我只是給出一個可能的替代方案:) – 2013-03-05 09:37:51

頭有height:20%，這就是爲什麼它是重疊的下方股利。讓img高度max-height:100%和標題爲height:auto

header { 
    height:auto; 
    width: 100%; 
    } 

img { 
    max-height: 100%; 
    width: auto; 
    }

DEMO

來源

2013-03-05 09:27:41 Sowmya

這將完全工作，但圖像是一個巨大的文件，以便它可以擴展到高清電視大小。如果我做了100％，它會佔用整個屏幕。這就是爲什麼它在20％的標題，所以100％的IMG總是20％的頁面。 – user2093601 2013-03-05 09:35:18

你的頭內圖像使用所有頭的高度。因此，無論使用該CSS改變圖像的高度：

header img { 
    height:123px; /* or another value smaller than the header's height of 100% */ 
}

或不設置頁眉的高度：

header { 
    width:100%; 
}

來源

2013-03-05 09:28:29 uruk

這是因爲你的頭有一個固定的高度。導航已滿溢，但內容未被推下。要麼讓標題獲取所需的高度，要麼設置overflow: hidden;以隱藏溢出的內容。

來源

2013-03-05 09:28:41

導航欄覆蓋以下文本

回答

相關問題