• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme bei Positionierung nav, main, Slideshow

sunshine*555

Neues Mitglied
Hallo liebe Gemeinde,
ich habe ein Problem mit der Anordnung verschiedener Bereiche. Ich hoffe, jemand kann mir weiterhelfen.

Ich möchte im Hintergrund meiner Seite eine vollflächige Slideshow laufen lassen. Auf dieser Slideshow sollen durchgehend und fest meine Navigation und mein Logo sichtbar sein.
Der Textbereich soll hingegen unter der Slideshow anfangen. Siehe dazu mein Beispielbild.

Ich gestalte das zusätzlich auch responsive. Bitte seht mir den Code nach.. ich hab nicht so sehr viel Erfahrung. Ich bin glücklich, wenn es klappt.

Ich kopiere mal meinen Code rein:


INDEX:
<!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="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i|Work+Sans:400,500,600,700" rel="stylesheet">

<link rel="icon" type="image/png" href="logo/favicon.png">
</head>


<body>


<img class="displayed" src="logo/logo_white.png" height="110px" alt="Logo">

<nav>

<p class="p_nav"> <a href="dassindwir.html">Das sind wir</a> &nbsp; &nbsp; <a href="pakete.html">Pakete</a> &nbsp; &nbsp; <a href="eindruecke.html">Eindrücke</a>&nbsp; &nbsp;<a href="kontakt.html">Kontakt</a>&nbsp; &nbsp;<a href="index_en.html">DE/EN</a>
</p>

</nav>

<div id="gallery">
<img src="images/0X1A5234ASE.jpg" border="0" alt="">
<img src="images/180614_EWA.pdf" border="0" alt="">
<img src="images/EWA-Nathalia&Arnold-38.jpg" border="0" alt="">
<img src="images/EWA-Nathalia&Arnold-225.jpg" border="0" alt="">
<img src="images/EWA-Nathalia&Arnold-194.jpg" border="0" alt="">
</div>


<main class="text_main">
<h2>Herzlich Willkommen!</h2><br>

<br>
<p class="text_p">
Quatem id quaerum et aut ullorro voluptaque dolo qui bersperferem il maioruptatia sundantia dolorum eatent. Solor abor assi ut et molendes apicit volor sequosanis que oditatus que dolore plamendem ide accuscia nus dolenistia pos cum ad que num quiam.
</p>

<div class="text_super_div">
<div>
<img src="images/werkstatt.png">
</div>
</div>
<p class="text_p">K que dolore plamendem ide accuscia nus dolenistia pos cum ad que num quiam.</p>
</main>

<br>
<br>
<br>
<br>
<br>


</body>

</html>



CSS:

/* GENERAL */

body {
padding: 5px;
max-width: 1300px;
margin-left: 5%;
margin-right: 5%;
background-color: black;
}

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}


/* IMAGE SLIDER */

#gallery {
width: 100%;
}

#gallery img {
position: absolute;
width: 100%;
left: 0px;
opacity: 0;
animation-duration: 30s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

#gallery img:nth-of-type(1) {
animation-name: fade1;
}

#gallery img:nth-of-type(2) {
animation-name: fade2;
}

#gallery img:nth-of-type(3) {
animation-name: fade3;
}

#gallery img:nth-of-type(4) {
animation-name: fade4;
}

#gallery img:nth-of-type(5) {
animation-name: fade5;
}

@keyframes fade1 {
0% {
opacity: 1;
}
10% {
opacity: 1;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes fade2 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 1;
}
30% {
opacity: 1;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}

@keyframes fade3 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 1;
}
50% {
opacity: 1;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}

@keyframes fade4 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 1;
}
70% {
opacity: 1;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}

@keyframes fade5 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes fade1 {
0%,
10%,
100% {
opacity: 1;
}
20%,
90% {
opacity: 0;
}
}

@keyframes fade2 {
0%,
10%,
40%,
100% {
opacity: 0;
}
20%,
30% {
opacity: 1;
}
}

@keyframes fade3 {
0%,
30%,
60%,
100% {
opacity: 0;
}
40%,
50% {
opacity: 1;
}
}

@keyframes fade4 {
0%,
50%,
80%,
100% {
opacity: 0;
}
60%,
70% {
opacity: 1;
}
}

@keyframes fade5 {
0%,
70%,
100% {
opacity: 0;
}
80%,
90% {
opacity: 1;
}
}

@media screen and (max-width: 360px) {
h1 img {
height: 42px;
margin: 0px;
float: left;
}
}

nav {
float: left;
}

.p_nav {
margin: 0px;
}

.p_nav a {
margin: 0px;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 12px;
color: white;
}

@media screen and (max-width: 800px) {
nav {
position: absolute;
}
}

h2 {
color: white;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 1.1;
margin: 0px;
float: left;
}

h3 {
color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 1.1;
margin: 0px;
float: left;
}

div_box {
height: 100px;
}

a {
color: white;
text-decoration: none;
}

main {
width: 500px;
padding-top: 15px;
margin-top: 115px;
margin-left: 10%;
margin-right: 10%;
}

@media screen and (max-width: 800px) {
main {
width: 100%;
margin-top: 150px;
margin-left: 0px;
}
}

footer {
bottom: 0px;
}

.p_footer {
color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12.5px;
}


/* TEXTSECTION */

.text_super_div {
max-width: 500px;
overflow: hidden;
}

.text_super_div div {
width: 100%;
padding: 1%;
float: left;
box-sizing: border-box;
}

.text_super_div img {
width: 100%;
display: block;
margin-bottom: 2%;
}

.text_p {
font-family: 'Roboto', sans-serif;
font-weight: 400i;
font-size: 13px;
text-align: justify;
color: white;
line-height: 2.3;
}

.text_p_b {
font-family: 'Roboto', sans-serif;
font-weight: 400i;
font-size: 14.5px;
text-align: justify;
color: white;
line-height: 1.7;
}

.bildunterschrift_p {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 10.5px;
text-align: justify;
color: white;
line-height: 1;
}

ul {
margin-left: 20px;
margin-bottom: 0px;
padding-left: 0;
}
 
Werbung:
Sorry, der Anhang ging nicht. Hier ist er aber jetzt:
 

Anhänge

  • Bildschirmfoto 2018-06-15 um 15.20.49 Kopie.jpg
    Bildschirmfoto 2018-06-15 um 15.20.49 Kopie.jpg
    616,6 KB · Aufrufe: 8
Werbung:
Zurück
Oben