Div verschiebt sich ungewollt

Dannyhtml · 25 März 2015

Hallo zusammen!
Ich bin Schüler und muss eine Website zu einem beliebigen Thema erstellen, in meinen Fall Apollo 11 ;-). Allerdings habe ich ein kleines Problem: Ich möchte auf der Website neben dem Bild eine Tabelle einfügen, doch jedes mal, wenn ich diese mit margin-top: 150px; positionieren möchte, verschiebt sich stattdessen mein div "Inhalt" nach unten. Beim Bild gab es keinerlei Probleme.

Bin schon richtig am verzweifeln und versteh einfach nicht, warum sich dauernd der Bereich ungewollt nach unten verschiebt. Mein Lehrer ist schon seit längerem krank und somit keine Hilfe.

Mein Layout besteht aus einem Bild oben als Banner, darunter ein div als Navigationsleiste und dann das div für den Inhalt.

Vielen Dank schon mal im Voraus!

Hier mein Quellcode:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Apollo 11</title>
</head>
<link rel="stylesheet" type="text/css" href="Apollo11.css">
<body>
<center>
<img class= "header"src= "BG-Moon-Top.jpg">
<div id ="navbar"></div>

<div class= "Inhalt">
<img class= "Crew" src= "apollo-11.jpg">
<table class= "Tabelle "border ="1">
<tr>
<th>Mission</th>
<th>Apollo 11</th>
</tr>
<tr>
<th>Besatzung</th>
<th>3</th>
</tr>
<tr>
<th>Start</th>
<th>16. Juli 1969</th>
</tr>
<tr>
<th>Mondlandung</th>
<th>20. Juli 1969</th>
</tr>
<tr>
<th>Landung auf der Erde</th>
<th>24. Juli 1969</th>
</tr>
</table>
</div>
</center>
</body>
</html>

css:
body {
background-color: lightgrey;
}

.header {
height: 270px;
width: 80%;

}

#navbar {
background-color:#2A373C;
height: 50px;
width: 80%;
color: #D08224;
font-family: Verdana;
}

.Inhalt {
background-color: white;
width: 80%;
height: 597px;
}

.Crew {
height: 300px;
width: 460px;
border-radius: 30px;
margin-top: 150px;
margin-left: 150px;
float: left;
}

.Tabelle {
margin-right: 150px;
margin-top: 150px;
}

djheke · 25 März 2015

Code:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Apollo 11</title>
<style>

* {
margin:0;
padding:0;
box-sizing:border-box;
}

head {
background:#333;
}
body {
background:#000;
width:80%;
margin:0 auto;
}
header {
height: 270px;
background:url(BG-Moon-Top.jpg) no-repeat top center #aaa;

}

#navbar {
background-color:#2A373C;
height: 50px;
color: #D08224;
font-family: Verdana;
}

.inhalt {
background-color: white;
min-height: 597px;
padding:150px 20px 20px;
}

.crew {
height: 300px;
width: 46%;
border:1px solid #000;
border-radius: 30px;
float: left;
}


table {
width:46%;
float:right;
border:1px solid #000;
}

th {
border:1px solid #000;
}
</style>
</head>

<body>
<header><h1>Apollo 11</h1></header>
<div id ="navbar">Navigation</div>
<div class= "inhalt">
<img class= "crew" src= "apollo-11.jpg">
<table>
<tr>
<th>Mission</th>
<th>Apollo 11</th>
</tr>
<tr>
<th>Besatzung</th>
<th>3</th>
</tr>
<tr>
<th>Start</th>
<th>16. Juli 1969</th>
</tr>
<tr>
<th>Mondlandung</th>
<th>20. Juli 1969</th>
</tr>
<tr>
<th>Landung auf der Erde</th>
<th>24. Juli 1969</th>
</tr>
</table>
</div>

</body>
</html>

Ach, und das nächste mal nicht soviel mit deinem Handy im Unterricht spielen.

@edit Ah, dein Lehrer ist krank, dann nehme ich das mit dem Handy zurück.

Dannyhtml · 25 März 2015

Passt. Vielen Dank für deine Hilfe!

Div verschiebt sich ungewollt

Dannyhtml

Neues Mitglied

djheke

Aktives Mitglied

Dannyhtml

Neues Mitglied

Neueste Beiträge