sunshine*555
Neues Mitglied
Hallo liebe Community,
ich habe mal wieder eine Frage. Ich probiere schon die ganze Zeit rum, aber ich komme zu keiner Lösung. Wenn ich die Seite größer/kleiner ziehe, verschwindet mein Fließtext und mein Bild hinter dem rosanen Footer. Ich verstehe nicht warum, bzw. was ich falsch gemacht habe. Ich schätze es ist recht banal.. Kann mir jemand auf die Sprünge helfen?
Hier der Link zur Seite: https://bit.ly/2loPgfO
Und hier der Code:
ich habe mal wieder eine Frage. Ich probiere schon die ganze Zeit rum, aber ich komme zu keiner Lösung. Wenn ich die Seite größer/kleiner ziehe, verschwindet mein Fließtext und mein Bild hinter dem rosanen Footer. Ich verstehe nicht warum, bzw. was ich falsch gemacht habe. Ich schätze es ist recht banal.. Kann mir jemand auf die Sprünge helfen?
Hier der Link zur Seite: https://bit.ly/2loPgfO
Und hier der Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ewaweddings</title>
<link rel="stylesheet" href="css/ueber_uns_style.css" />
</head>
<body>
<img class="logo" src="logo/logo_black.png">
<!-- Header -->
<div class="header">
<div>
<nav>
<a href="dassindwir.html">Das sind wir</a> <a href="pakete.html">Pakete</a> <a href="eindruecke.html">Eindrücke</a> <a href="kontakt.html">Kontakt</a> <a href="index_en.html">DE/EN</a>
</nav>
</div>
</div>
<div class="background">
<div class="body_narrow">
<img src="images/ueber_uns/EWA-Wedding-Planner-Bavaria-Germany-Wedding-Design-Wir-34.png">
<h1>Katharina und Michele</h1>
<p> Wir lieben die Berge, Natur, Abenteuer, Reisen, Wildblumen und unsere Heimat, Bayern. Hier sind wir aufgewachsen. Hier kennen wir uns aus. <br><br> Wir sind studierte Kommunikations-Designer und somit spezialisiert auf visuell starke Konzepte. Kathi hat zuvor Psychologie studiert und sich im Zweitstudium auf konzeptstarke Gestaltung fokussiert. Michele arbeitet bereits seit einiger Zeit in der Hochzeitsbranche als Fotografin und ist durch das Studium im Event-Design ausgebildet. Uns vereint die Liebe zum guten Design und die Leidenschaft zu atemberaubenden Events. Zusammen möchten wir unvergessliche Hochzeiten an unvergesslichen Orten realisieren: ewa Weddings - inspired by the spirit of Bavaria.</p>
</div>
</div>
<div class="footer">
<div class="body_narrow">
<a href="impressum.html">Impressum</a> <a href="datenschutz.html">Datenschutz</a>
<nobr> <a href="eindruecke.html">Get in touch</a>
<a href="eindruecke.html"><img src="images/social_media/facebook.png"> </a>
<a href="eindruecke.html"><img src="images/social_media/instagram.png"> </a>
<a href="eindruecke.html"><img src="images/social_media/mail.png"> </a>
</nobr>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Work Sans', sans-serif;
}
.body_narrow {
margin-left: 5%;
margin-right: 5%;
padding: 0;
font-family: 'Work Sans', sans-serif;
}
.header {
text-align: center;
padding: 45px;
}
.logo {
margin: 25px auto 0px auto;
display: block;
width: 120px;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: black;
-webkit-transition: color 0.2s ease-in-out;
text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}
p {
font-family: 'Work Sans', sans-serif;
font-weight: 400;
text-align: center;
font-size: 12px;
line-height: 2;
}
/* navigation */
nav {
position: absolute;
left: 5%;
top: 30px;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 12px;
}
@media screen and (max-width: 600px) {
nav {
position: absolute;
left: 5%;
right: 5%;
top: 135px;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 12px;
text-align: center;
}
}
@media screen and (max-width: 900px) {
nav {
position: absolute;
left: 5%;
top: 135px;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 12px;
}
}
/* main */
background {
background-color: #F7F7F7;
width: 100%;
height: 900px;
overflow: hidden;
}
background_main {
margin: 25% auto 8% auto;
max-width: 70%;
box-sizing: border-box;
}
background img {
float: right;
width: 100%;
display: block;
max-width: 200px;
}
background p {
float: left;
margin: -23% 45% 10% auto;
font-size: 12px;
line-height: 2;
}
/* main */
.background {
background-color: #F7F7F7;
width: 100%;
height: 100%;
overflow: hidden;
}
background_main {
margin: 25% auto 8% auto;
max-width: 70%;
box-sizing: border-box;
}
.background img {
max-width: 60%;
position: relative;
top: 100px;
float: right;
}
.background p {
position: relative;
color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 12px;
text-decoration: none;
max-width: 30%;
float: left;
text-align: left;
top: 100px;
}
h1 {
position: relative;
color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 500;
font-size: 13.5px;
text-decoration: none;
text-align: left;
top: 100px;
}
/* F O O T E R */
.footer {
background-color: #E5CCC5;
height: 150px;
overflow: hidden;
}
.footer a {
position: relative;
top: 10px;
color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 12px;
text-decoration: none;
}
.footer img {
max-width: 28px;
position: relative;
top: 10px;
}
@media screen and (max-width: 790px) {
.background img {
max-width: 80%;
position: relative;
top: 100px;
float: left;
margin: 0 10% 5% 10%;
padding-bottom: 8%;
}
@media screen and (max-width: 790px) {
.background p {
position: relative;
color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 12px;
text-decoration: none;
max-width: 60%;
float: left;
text-align: left;
margin: 0 15% 5% 15%;
}
@media screen and (max-width: 790px) {
.background h1 {
position: relative;
color: black;
font-family: 'Work Sans', sans-serif;
font-weight: 500;
font-size: 13.5px;
text-decoration: none;
text-align: left;
max-width: 60%;
float: left;
text-align: left;
margin: 0 15% 5% 15%;
}