Menu
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;
}
844
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.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
