标题不在页面的最顶部

use*_*936 5 html css position

我很紧张,因为标题不在页面顶部。希望有人可以帮助我,向他们致敬。

这个页面的新手,所以希望我会回来。我正在使用引导程序,所以我删除了 uneccacery 代码,希望这能让你们帮助我。谢谢你。

这是 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;
}
Run Code Online (Sandbox Code Playgroud)

dvo*_*utt 10

例如,如果您开始一个没有任何定义的 HTML 页面并放置一个段落,浏览器将自动应用边距。解决此问题的最佳方法是在文件的开头执行以下两个选项之一。

从正文中删除边距和填充

body {
margin: 0;
padding: 0;
}
Run Code Online (Sandbox Code Playgroud)

这会从 body 标记中删除边距和填充(这会在文件顶部增加间距)。这是一个干净的实现,因为它只影响 body 标记并将所有内容刷新到顶部。

从所有内容中删除所有边距和填充

* {
margin: 0;
padding: 0;
}
Run Code Online (Sandbox Code Playgroud)

这将从所有 HTML 元素中删除边距和填充。继承问题是您现在需要将它添加回需要它的每个元素。这不是推荐的解决方案,但在某些情况下这可能是有益的。

注意:您应该阅读CSS 重置以获得更好的理解。每个 CSS 文件都应该从一组内容开始,以确保所有浏览器都以相同的方式处理某些元素并且不会添加额外的间距。


Jus*_*ang -2

这就是 HTML 和 CSS 渲染和定位标题的方式,AFAIK。我对这个问题的解决方案,就像我制作一个与上边距齐平的工具栏一样,只需设置

margin-top:-15px;
Run Code Online (Sandbox Code Playgroud)

我知道这可能会因显示器分辨率而异。您还可以尝试查看我提出的有关根据显示器分辨率调整 CSS 的问题。 基于监视器宽度的元素大小