Ich bin gerade an meiner Website am basteln. Ich habe soweit alles hinbekommen. Dann habe ich in meinen COntent bereich einen kurzen Text geschrieben - Der gersamte Content-Bereich hat sich nach unten bewegt, die Sidebar steht praktisch mit dem Menü allein da.
HTML:
Code:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="animate.css" />
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="menu" class="animated FadeInDown">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#idee">Philosophie</a></li>
<li><a href="#leistungen">Leistungen</a></li>
<li><a href="#kosten">Kosten</a></li>
<li><a href="#kontakt">Kontakt</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</div>
<center>
<div id="content" class="animated FadeInLeft">
<h1> Test</h1>
</div>
<div id="sidebar" class="animated FadeInRight">
</div>
<div id="footer" class="animated FadeInUp">
</center>
</body>
</html>
CSS:
Code:
body {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
background-color: #F1F1F1;
overflow: auto;
}
ul {
width: 100%;
background: white;
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
}
ul li a {
position: relative;
display: block;
padding: 25px 25px 25px 25px;
color: black;
text-decoration: none;
z-index: 1;
}
ul li a::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
background-color: #304F81;
transition: all 250ms;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
z-index: -1;
}
ul li a:hover::before {
height: 100%;
}
#content {
background-color: white;
height: 899px;
width: 680px;
margin-top: 5px;
display: inline-block;
}
#sidebar {
background-color: white;
height: 899px;
width: 250px;
margin-left: 5px;
display: inline-block;
margin-top: 5px;
}
#footer {
background-color: #304F81;
height: 80px;
width: 100%;
}
Ich wäre über jede Hilfe dankbar, ich bin hier am verzweifeln.
