标题不在页面顶部

我非常紧张，因为标题不在页面的顶部。希望有人能帮助我，对他们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

标题不在页面顶部

回答

相关问题