Question

我非常紧张，因为标题不在页面顶部。希望有人可以帮助我，kodus给他们。

此页面的新功能，希望我能回来。我正在使用bootstrap所以我删除了unccacery代码，希望这能让你们帮助我。谢谢。

这是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;
}

Answer 1

如果您启动没有任何定义的HTML页面并放置段落，则浏览器将自动应用边距。解决这个问题的最好方法是在文件的开头做两个选项中的一个。

从正文中删除边距和填充

body {
margin: 0;
padding: 0;
}

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

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

* {
margin: 0;
padding: 0;
}

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

注意：您应该阅读CSS Resets以便更好地理解。每个CSS文件都应该从一系列事情开始，确保所有浏览器都将某些元素视为相同，并且不会增加额外的间距。

Answer 2

您应该使用重置样式 - 您的浏览器也会对页面应用一些CSS设置，因此即使页面完全为空，浏览器也会应用一些样式。重置样式可帮助您避免这些浏览器设置。可以在此处找到重置CSS样式的一个示例：enter link description here。正如你在那里看到的那样，body元素的填充和边距设置为零，这样你就可以从页面的顶部开始。

Answer 3

这就是HTML和CSS呈现和定位标题的方式，AFAIK。我对这个问题的解决方案，就像我正在制作一个与上边距齐平的工具栏，就是设置

margin-top:-15px;

我知道这可能因显示器分辨率而异。您也可以尝试查看我根据显示器分辨率调整CSS的问题。 Element Size Based on Monitor Width

标题不在页面顶部

3 个答案: