Hi,
ich bin momentan ein bisschen am rumprobieren. Dabei ist ein Problem aufgekommen:
Wenn ich die Schriftgröße der h1 vom div inhalt ändere, vergrößert sich der Abstand zwischen dem div inhalt und menu. Woran liegt das?
Und die CSS Datei:
ich bin momentan ein bisschen am rumprobieren. Dabei ist ein Problem aufgekommen:
Wenn ich die Schriftgröße der h1 vom div inhalt ändere, vergrößert sich der Abstand zwischen dem div inhalt und menu. Woran liegt das?
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Texteditor</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Gorditas:700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="website">
<div id="header">
<h1>Texteditor</h1>
</div>
<div id="menu">
<ul id="navigation">
<li>Menü 1</li>
<li>Menü 2</li>
<li>Menü 3</li>
</ul>
</div>
<div id="inhalt">
<h1>Texteditor</h1>
</div>
<div id="footer">
</div>
</div>
</body>
</html>Und die CSS Datei:
Code:
body {
background-color: lightyellow;
text-align: center;
}
#website {
width: 980px;
margin: 0 auto;
}
#header {
width: 980px;
height: 200px;
background: orange;
}
#header h1 {
padding-top: 60px;
font-size: 50px;
font-family: 'Gorditas', cursive;
}
#menu {
width: 980px;
height: 55px;
background: grey;
margin-top: 10px;
}
#navigation {
width: 940px;
float: left;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: black;
border-top-width: 2px;
border-top-style: solid;
border-top-color: black;
text-align: justify;
}
#navigation ul {
list-style-type: none;
margin: 0;
padding: 10px;
}
#navigation li {
display: inline;
}
#inhalt {
width: 980px;
height: 500px;
margin-top: 10px;
background: lightgrey;
}
#inhalt h1 {
padding-top: 10px;
font-size: 40px;
font-family: 'Gorditas', cursive;
}