標題不在頁面頂部

我非常緊張，因爲標題不在頁面的頂部。希望有人能幫助我，對他們kodus。標題不在頁面頂部

本頁新增內容，所以希望我會回來。我正在使用bootstrap，所以我刪除了未經授權的代碼，希望這將能幫助你們。謝謝。

下面是HTML：

<!DOCTYPE html PUBLIC " 
<html> 
<head> 
    <meta charset="utf-8"> 
    <link type="text/css" rel="stylesheet" href="../bootstrap/css/bootstrap.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Gruppe 18 - Hovedprosjekt</title> 
</head> 
<body> 

<!-- Navigasjon --> 

     <div id="header"> 
      <h1><img src="NIH.gif" alt="NITH logo"> <span class="title">Norges Idrettshøgskole</span></h1> 
     </div> 
    <div id="nav"> 
     <form class="formnav" action="index.html" method="get"> 
      <button class="btn btn-success btn-lg navbar-btn" type="submit"><strong>Hjem</strong></button> 
     </form> 
     <form class="formnav" action="dokumenter.html" method="get"> 
      <button class="btn btn-danger btn-lg navbar-btn" type="submit"><strong>Dokumenter</strong></button> 
     </form> 
     <form class="formnav" action="omgruppen.html" method="get"> 
      <button class="btn btn-danger btn-lg navbar-btn" type="submit"><strong>Om gruppen</strong></button> 
     </form> 
     <form class="formnav" action="prosjektet.html" method="get"> 
      <button class="btn btn-danger btn-lg navbar-btn" type="submit"><strong>Prosjektet</strong></button> 
     </form> 
    </div> 
    <!-- <hr id="navhr"> FJERNE Denne? --> 



<!-- Navigasjon slutt --> 


<div id="main_container"> 
<div id="overskrift"> 
<h2>Hovedprosjekt - Gruppe 18 | 2013/14</h2> 
</div> 
<br/> 
<p>Hei, vi er gruppe 18 ved HioA i hovedprosjekt for våren 2014, vi er fem studenter som studerer anvendt-datateknologi og har fått i oppgave å utvikle et system for Norges Idrettshøgskole som er vår oppdragsgiver. Les mer om prosjektet <a href="prosjektbeskrivelse.pdf">her</a>.</p> 
</div> 



</body> 
</html> 


#header { 
    text-align: center; 
    color: black; 
} 

#navigation { 
    text-align: center; 
} 

#navhr { 
    background-color: red; 
    height: 1px; 
} 

#main_container { 
    padding-left: 23%; 
    padding-right: 23%; 

    font-family: Tw Cen Mt; 
    font-size: 150%; 

} 

#overskrift { 
    text-align: center; 

} 

#nav { 

    text-align: center; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 100px; 
    background-image:url('bg.png'); 
} 

#header { 

    margin: 0; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 95px; 
    background-image:url('bg.png'); 
} 

.formnav { 
    display: inline; 
} 

.dokbody { 
    width: 750px; 
    height: 100px; 
    margin: 0 auto; 
    float: none; 
} 

.dokbody > p { 
    display: inline-block; 
} 

.dokbody > h4 { 
    display: inline-block; 
} 

.dokbody > hr{ 
    background-color: red; 
    height: 1px; 
    text-align: center; 
}

來源

2014-01-11 user3185936

檢查你的CSS。您經常需要'body {margin：0}'去除正文元素上瀏覽器的默認邊距。 – 2014-01-11 20:33:51

如果您告訴我們您正在使用的Bootstrap版本，我們可以使用JSFiddle來模擬您的代碼。爲什麼你使用表單而不是錨點鏈接到不同的頁面？例如。 'Home' –

-1

這僅僅是方式，HTML和CSS渲染和位置頭，AFAIK。我對這個問題的解決方案，如果我做一個工具欄，與上邊距平齊一樣，是隻設置

margin-top:-15px;

我知道這可能變化基於顯示器的分辨率。您也可以嘗試查看我根據顯示器分辨率調整CSS所提出的問題。 Element Size Based on Monitor Width

來源

2014-01-11 20:36:02

非常感謝！我插入了margin-top：-20px;在身體標籤，它的工作完美無瑕。非常感謝。 – user3185936

但要小心，因爲基於像素的測量可以根據顯示器分辨率輕鬆改變，正如我在答案中所述。 –

如果您在沒有任何定義的情況下啓動一個HTML頁面，並且放置了一個段落，瀏覽器將自動應用邊距。解決這個問題的最好方法是在文件的開頭或者執行兩個選項之一。

刪除邊距和填充從身體

body { 
margin: 0; 
padding: 0; 
}

這消除從身體標記（其在該文件的頂部增加了間距）中的餘量和填充。這是一個乾淨的實現，因爲它隻影響身體標記並將所有內容刷新到頂部。

卸下一切

* { 
margin: 0; 
padding: 0; 
}

所有邊距和填充這將從所有的HTML元素去除margin和padding。繼承問題是您現在需要將其添加回每個需要它的元素。這不是一個推薦的解決方案，但可能會有這種情況，這是有益的。

注意：您應該閱讀CSS Resets以獲得更好的理解。每個CSS文件應該以一組東西開始，確保所有瀏覽器都將某些元素視爲相同，並且不會添加額外的空格。

來源

2014-01-11 21:08:55 dvoutt

您應該使用重置樣式 - 您的瀏覽器也會將一些CSS設置應用於頁面，因此即使頁面完全爲空，瀏覽器也會爲其應用一些樣式。重置樣式可幫助您避免這些瀏覽器設置。復位CSS樣式的一個例子可以在這裏找到：enter link description here。正如你所看到的那樣，body元素的填充和邊距設置爲零，這樣你就可以從頁面的頂部開始。

來源

2014-01-11 21:16:41

標題不在頁面頂部

回答

相關問題