CODEWITHSUNDEEP
htmlcssposition
user3185936
user3185936

Reputation: 1667

Header not at the very top of the page

I am very stressed because the header is not on the top of the page. Hope someone can help me, kodus to them.

New to this page, so hopefully I will come back. I am using bootstrap so I removed the uneccacery code, hopefullt this will be able you for guys to help me. Thank you.

Here is the 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;
}

Upvotes: 5

Views: 18359

Answers (4)

LMB
LMB

Reputation: 1

Hello I've been in the similar situation and what I done is this. Even without changing the margin and padding to 0.

  • { margin: 0; }

Upvotes: 0

Miroslav Lazovich
Miroslav Lazovich

Reputation: 103

You should use reset styles - your browser also applies some CSS settings to the page, so even if the page is completely empty, browser will apply some styles to it. Reset styles help you avoid these browser settings. One example of reset CSS style can be found here: reset styles. As you can see there, body element has its padding and margin set to zero, so that way you get to start from the very top of the page.

Upvotes: 1

dvoutt
dvoutt

Reputation: 950

If you start an HTML page without any definition and place a paragraph for instance the browser will automatically apply margins. The best way to address this is as the beginning of the file either do one of the two options.

Remove margin and padding from body

body {
margin: 0;
padding: 0;
}

This removes the margin and padding from the body tag (which adds spacing at the top of the file). This is a clean implementation as it only affects the body tag and flushes everything to the top.

Remove all margins and padding from everything

* {
margin: 0;
padding: 0;
}

This will remove margin and padding from all HTML elements. The inherit problem is that you now need to add it back to every element that needs it. This is not a recommended solution, but there may be cases where this is beneficial.

Note: you should read up on CSS Resets to get a better understanding. Each CSS file should start off with a set of things that makes sure that all browsers treat certain elements the same and do not add extra spacing.

Upvotes: 10

Justin Chang
Justin Chang

Reputation: 194

That is just the way that HTML and CSS renders and positions headers, AFAIK. My solution to this problem, like if I am making a toolbar that is flush with the top margin, is to just set

margin-top:-15px;

I know this could vary based on monitor resolution. You could also try looking at this question that I asked on adjusting CSS based on monitor resolution. Element Size Based on Monitor Width

Upvotes: -2

Related Questions