Ich habe mir mal erlaubt die HTML Datei etwas "aufzuräumen".
Anbei schicke ich dir gleich noch die CSS Datei.
Weniger Divs und die Menüpunkte funktionieren nun wieder.
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="../../CSS/bootstrap-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/style.css">
<title>San Andreas Rescue Center | Intranet</title>
</head>
<body>
<div class="sidebar">
<ul class="nav nav-stacked sidebar">
<li><a href="#" class="active"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-inbox"></i> Einsatzberichte</a></li>
<li><a href="#"><i class="fa fa-ambulance"></i> Fahrzeugplan</a></li>
<li><a href="#"><i class="fa fa-calendar"></i> Dienstplan</a></li>
<li><a href="#"><i class="fa fa-cog"></i> Einstellungen</a></li>
</ul>
</div>
<div class="content">
<div class="home-div">
<div class="underline">
<h1><i class="fa fa-home"></i> Home</h1>
</div>
<div class="row"> <!-- Zeile 1 -->
<div class="col-md-6"> <!-- Spalte 1 -->
<h3>Nachrichten</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-md-6"> <!-- Spalte 2 -->
<h3>Termine</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="row"> <!-- Zeile 2 -->
<div class="col-md-6"> <!-- Spalte 1 -->
<h3>Irgendetwas 2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="col-md-6"> <!-- Spalte 2 -->
<h3>Irgendetwas 3</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="eberichte-div" hidden>
<div class="underline">
<h1><i class="fa fa-home"></i> Home</h1>
</div>
</div>
<div class="fplan-div" hidden>
<div class="underline">
<h1><i class="fa fa-home"></i> Home</h1>
</div>
</div>
<div class="dplan-div" hidden>
<div class="underline">
<h1><i class="fa fa-home"></i> Home</h1>
</div>
</div>
<div class="settings-div" hidden>
<div class="underline">
<h1><i class="fa fa-home"></i> Home</h1>
</div>
</div>
</div>
<footer class="footer">
<p class="text-muted"><i class="fa fa-copyright"></i> 2015 Yannik Böltes, San Andreas Rescue Center</p>
</footer>
</body>
</html>
Alles anzeigen
body {
background-color: #EEE;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
color: #333;
}
h4 {
font-size: 12px;
}
.footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
background-color: #F5F5F5;
padding-top: 5px;
z-index: 100;
text-align: center;
}
.container .text-muted {
margin: 20px 0px;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
#wrapper {
height: 100%;
width: 50px;
background-color: #332C2F;
z-index: 1000;
}
.sidebar {
padding-top: 30px;
line-height: 25px;
z-index: 1000;
}
a {
color: #577492;
border-left: 2px solid #332C2F;
font-size: 17px;
}
a:hover {
color: #577492;
border-left: 2px solid #577492;
}
a:focus {
color: #577492;
border-left: 2px solid #577492;
}
.active {
color: #577492;
border-left: 2px solid #577492;
background-color: #eee;
}
.content {
width: 80%;
float: left;
top: 10px;
position: absolute;
margin-left: 220px;
height: auto;
}
.underline {
border-bottom: 2px solid #577492;
}
.sidebar {
background-color: #332C2F;
width: 200px;
height: 100%;
top: 0px;
}
Alles anzeigen
Edit:
Musst dein bootstrap link wieder hineinschreiben. Ersetzen diese Zeile durch deinen Pfad:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">