Kurz vor der Verzweiflung...

AimZKaY' · 10/12/2015, 21:12

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.

.SkyneT. · 10/12/2015, 22:18

Hättest nur etwas in die Sidebar reinschreiben müssen