Der Footer und das entsprechende Hintergrundbild werden mittig ausgerichtet. Hat jemand eine Idee wie ich den Footer da hinbekomme wo er hingehört ?
HTML
<html>
<head>
<title>Lorem ipsum dolor sit amet</title>
<!-- meta -->
<!-- meta -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style_text.css" media="all" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a15587f23f.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div id="kopfnavigation"></div>
<div id="header"></div>
<div id="hauptcontainer">
<div id="container">
<div id="spalte_links">
<div id="nachrichten_box_kopfzeile_1">
<h1>Lorem ipsum dolor sit amet</h1>
<h2><i class="fas fa-user"></i></i> PP <i class="fas fa-calendar-week"></i> 5. April 2018</h2>
</div>
<div class="text" id="nachrichten_box_1">
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. <p>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. </p>
<img src="images/test.png" alt="Nature" class="res">
</div>
<div id="nachrichten_box_kopfzeile_2">
<h1>Updates zur neuen Internetseite</h1>
<h2><i class="fas fa-user"></i> PP <i class="fas fa-calendar-week"></i> 5. April 2018</h2>
</div>
<div class="text" id="nachrichten_box_2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <p>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. </p> 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.
</div>
<div id="nachrichten_box_kopfzeile_2">
<h1>Lorem ipsum dolor sit amet</h1>
<h2><i class="fas fa-user"></i></i> PP <i class="fas fa-calendar-week"></i> 5. April 2018</h2>
</div>
<div class="text" id="nachrichten_box_3">
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.
<br></br>
<img src="images/test.png" alt="Nature" class="res">
<br></br>
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.
</div>
</div>
<div id="spalte_rechts">
<div id="vertikale_navigation_kopfzeile_1"></div>
<div id="vertikale_navigation_1"></div>
<div id="vertikale_navigation_2"></div>
<div id="vertikale_navigation_3"></div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Alles anzeigen
Code
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #000;
background-image: url(images/body_hintergrund.png);
background-repeat: repeat;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #cccccc;
}
#kopfnavigation {
width: 100%;
height: 53px;
background-color: #232323;
}
#hauptcontainer {
max-width: 950px;
margin: 0 auto;
height : 100%;
}
#header {
background-image: url(images/header.png);
background-size: cover;
height : 419px;
}
#container {
display: flex;
flex-direction: row;
}
#spalte_links {
width: 75%;
margin-top: 20px;
margin-right: 20px;
display: flex;
flex-direction: column;
}
#spalte_rechts {
width: 25%;
margin-top: 20px;
display: flex;
flex-direction: column;
}
#nachrichten_box_1 {
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px; /*temporär zur Anschauung*/
}
#nachrichten_box_2 {
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px; /*temporär zur Anschauung*/
}
#nachrichten_box_3 {
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px; /*temporär zur Anschauung*/
}
#nachrichten_box_kopfzeile_1 {
height: 65px;
border-bottom: 1px solid #232323;
background-color: hsla(0, 100%, 100%, 0.09);
padding: 10px;
text-align: left;
}
#nachrichten_box_kopfzeile_2 {
margin-top: 20px;
height: 65px;
border-bottom: 1px solid #232323;
background-color: hsla(0, 100%, 100%, 0.09);
padding: 10px;
text-align: left;
}
#vertikale_navigation_1 {
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px; /*temporär zur Anschauung*/
}
#vertikale_navigation_2 {
margin-top: 20px;
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 200px; /*temporär zur Anschauung*/
}
#vertikale_navigation_3 {
margin-top: 20px;
background-color: hsla(0, 100%, 100%, 0.05);
box-shadow:
/* offset-x | offset-y | blur-radius | spread-radius | color */
0px 1px 1px 0px hsla(0,0%,0%,0.14),
0px 2px 1px -1px hsla(0,0%,0%,0.12),
0px 1px 3px 0px hsla(0,0%,0%,0.2);
border-radius: 1px;
min-height: 300px; /*temporär zur Anschauung*/
}
#vertikale_navigation_kopfzeile_1 {
height: 65px;
border-bottom: 1px solid #232323;
background-color: hsla(0, 100%, 100%, 0.09);
padding: 10px;
text-align: left;
}
#footer {
background-image: url(images/footer_background.png);
background-size: cover;
width: 100%;
height: 419px;
margin-top: 20px;
}
/*Klassen*/
h1 {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: #cccccc;
}
h2 {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #cccccc;
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #cccccc;
font-weight: normal;
margin-top: 5px;
margin-bottom: 5px;
}
h4 {
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: #cccccc;
text-shadow: #000 0 1px 1px;
}
.text {
padding: 15px;
line-height: 1.75em;
}
.res {
width: 100%;
height: auto;
}
p {
margin-top: 20px;
margin-bottom: 20px;
}
/*Klassen*/
/*responsive Elemente*/
@media screen and ( max-width: 767px ) {
#container {
display: flex;
flex-direction: column;
margin-left: 20px;
margin-right: 20px;
}
#spalte_links {
width: 100%;
margin-right: 0px;
}
#spalte_rechts {
width: 100%;
}
#header {
height: 319px;
}
}
/*responsive Elemente*/
Alles anzeigen