Beiträge von check

Hallo zusammen, ich habe folgendes Problem:

Ich möchte ein Bild zu Beginn einer Seite einfügen, das sich automatisch der Fenstergröße (vertikal und horizontal) anpasst. Das habe ich hinbekommen.
Das Problem ist, dass der folgende Content, der durch scrollen nach dem Bild ersichtlich sein soll, nicht nach dem Bild erscheint, sondern an einer fixen Stelle. Wie kann ich in dem Code einen Befehl einfügen, dass alle folgenden Elemente erst nach dem Bild erscheinen sollen.

Hier mein Code:

<style>{
box-sizing: border-box;
}
.image {
color: #000000;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
height: 100vh;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
<img class="image"<img src="{!-ASSETSPATH-!}Images/paris.jpg" alt="Paris"></img>

Das ganze soll ähnlich aussehen wie bei der Webseite https://www.hungrybirds.nl nur ohne Parallaxeffekt.

Für jede Hilfe bin ich dankbar.

Danke für den Hinweis mit dem Head. Kleiner Fehler, große Wirkung. Nachdem ich den <style>-Bereich in den Head gesetzt habe, funktioniert es reibungslos. Vielen Dank.

Hallo zusammen,

ich habe auf meiner Seite zwei Elemente (Navileiste und Textslider). Ich bekomme es nicht hin, dass die CSS nur für das jeweilige Element gilt und nicht für die ganze Seite bzw. für das andere Element. Kann mir bitte jemand weiterhelfen?
Jedes Element soll jeweils unterschiedliche CSS Angaben haben und auch nur für das eine Element gelten. Ich finde leider keine Lösung.

Hier mein Code1:

<div id="navi"><ul> <nav> <a href="/text.html">START</a> <span></span> </nav> <nav> <a href="/text2.html">LEISTUNGEN</a> <span></span> </nav> <nav> <a href="/test3.html">REFERENZEN</a> <span></span> </nav> <nav> <a href="/test4.html">PREISE</a> <span></span> </nav><nav> <a href="/test5.html">KONTAKT</a> <span></span> </nav></ul></div>

<style>@import "compass/css3";#navi { list-style:none; font-family:opensanscondensed-bold; font-size:14px; text-align:right; margin-top:0px;letter-spacing:2px;}nav { position:relative; display:inline;}nav a { text-decoration:none; color:#FFFFFF; display:inline-block; padding:10px;}span { display:block; width:calc(100% - 23px); height:2px; background:transparent; position:absolute; left:10px; bottom:-10px;}nav a:hover { color:#0B468A;}nav a:hover ~ span { animation:ul 0.3s ease-out; background:#0B468A;}@keyframes ul { 0% { width:0;}100% { width:calc(100% - 23px);}}</style>

Code 2:

<div id="myPageContent" class="container-fluid"><section id="home"><div id="textSlider" class="row"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-4 iamCol"> <p>On</p> <p>Design</p> </div> <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8 slideCol"> <div class="scroller"> <div class="inner"> <p>Text1</p> <p>Text2</p> <p>Text3</p> <p>Text4</p> </div> </div> </div> </div> </section></div>

<style>@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.…p.min.css);body { background: transparent; }
slider {font-family: opensanscondensed-bold;transition-duration: 0.4s; }
slider { font-family:opensanscondensed-bold !important; font-size: 13pt !important; font-weight: 300 !important;}
.container-fluid { padding-right: 0px !important; padding-left: 0px !important;}#myPageContent, section { height:100% !important; width:100% !important; }

/* Slider */#textSlider.row { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100% !important;}#textSlider div { color: #FFF; font-family: opensanscondensed-bold; text-transform: uppercase;}
.iamCol { text-align: right; float: left; font-weight: 300; font-size:30pt;}.iamCol p:nth-child(2) { margin-top: -20pt !important; }.slideCol { text-align: left; overflow: hidden; font-weight: 900; font-size:70pt; display: block; white-space: nowrap;}.slideCol p { margin: 0px !important; }
.scroller { height: 70pt; line-height: 70pt; overflow: hidden;}.scroller .inner { animation: 10s normal infinite running scroll; }@keyframes scroll { 0% {margin-top: 0px;} 15% {margin-top: 0px;}
25% {margin-top: -70pt;} 40% {margin-top: -70pt;} 50% {margin-top: -140pt;} 65% {margin-top: -140pt;}
75% {margin-top: -210pt;} 90% {margin-top: -210pt;}
100% {margin-top: 0px;}}

/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */ @media only screen and (min-width : 320px) and (max-width : 479px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:20pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 25pt; text-align: center; margin-top: -20px; }}
/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) and (max-width : 765px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:25pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 38pt; text-align: center; margin-top: -20px; }}
/* Small Devices, Tablets */@media only screen and (min-width : 768px) and (max-width : 992px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:30pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 50pt; text-align: center; margin-top: 5px; }}
/* Medium Devices, Desktops */@media only screen and (min-width : 992px) and (max-width : 1200px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: right; font-size:30pt; } .slideCol { font-size: 55pt; text-align: left; }}</style>