Mit Logo sieht es dann so aus:
Beiträge von Sempervivum
-
-
Wie Du jetzt miflo.de hast, ist genau so wie ich es verstanden hatte und wie ich es auch auf dieser Musterseite gesehen hatte, die Du ganz am Anfang gepostet hattest: #welcome überdeckt das Bild beim Scrollen aber verschwindet hinter der Navigation mit dem Logo links. Da fehlt jetzt nur noch das Logo über #welcome. Es sei denn, das Verhalten beim Scrollen, das Du dir vorstellt, ist ein anderes.
-
Ich vergaß zu erwähnen, dass position:sticky nur greift, wenn man auch top angibt:
Codeheader { position: sticky; top: 0; } -
PS: Jetzt dem Bild ein position:fixed geben und einen negativen z-index, damit es beim Scrollen vom Container #welcome überdeckt wird:
Code.bild { z-index: -1; position: fixed; }Aber damit das Bild vor dem Scrollen sichtbar ist, musst Du dem #welcome noch ein margin-top geben:
Code#welcome { height: 100vh; background-color: #b1d4e0; margin-top: 360px; }Dann funktioniert das schon in etwa. Fehlt nur noch das position:sticky für den Header.
-
Was das Scrollen betrifft, hatte ich in #4 geschrieben, dass es an dem overflow:hidden; liegt:
Codehtml { height: 100vh; /* overflow-y: hidden; */ }Wenn ich das auskommentiere ist die Scrollbar sofort da.
-
Die gängigen Kandidaten:
CSS Layout - The position PropertyW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript,…www.w3schools.comAn dem Beispiel für "sticky" kannst Du sehr gut erkennen, wie es funktioniert.
position: sticky; | CSS-TricksBetter position: sticky; support is on the horizon. WebKit dropped in 2013, Firefox in 2014, and now Blink in (probably) 2016.css-tricks.comIch habe aber auf die Schnelle keine Quelle gefunden, die einen ganz wichtigen Aspekt heraus stellt: Durch "sticky" Positionierung wird ein Element nicht aus dem Fluss genommen, d. h. die Elemente danach verschwinden nicht wie bei "fixed" darunter. Sondern erst beim Scrollen.
Ich meinte, dass Du das Bild aus dem Header löschst und außerhalb darunter anordnest, also so:
Code
Alles anzeigen<body> <header> <nav class="navigation"> <!-- Logo --> <div class="logo"> <!-- <h1>LOGO</h1> --> <img class="navigation-logo" src="images/logo.png" alt="Logo" width="50" height="auto"> </div> <!-- Navigation --> <ul class="menu-list"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li><a href="#">Link4</a></li> <li><a href="#">Link5</a></li> </ul> <div class="humbarger"> <div class="bar"></div> <div class="bar2 bar"></div> <div class="bar"></div> </div> </nav> </header> <div class="bild"> <img src="images/theke2.jpg"> </div> <section id="welcome">Und jetzt den Header sticky und das Bild fixed positionieren.
-
Die Seite lässt sich nicht scrollen weil für html overflow: hidden; gesetzt ist. Ein Überbleibsel aus einem Onepager?
BTW, es fehlt das öffnende <html>.
position: fixed; verwendest Du ja schon für die Nav. Mach dich auch mit postition: sticky; vertraut. Den Header sticky machen und das Bild heraus ziehen und darunter anordnen. Dann das Bild fixed positionieren. Für den Content darunter wirst Du ein margin-top brauchen, damit er sich nicht mit dem Bild überlappt. Und dann das Bild mit einem negativen z-index versehen, so dass es vom Content überdeckt wird.
-
Zitat
Verstehe also, dass "auf-zoomen" an anderer Stelle - mit meinem Ansatz - nicht möglich ist.
Meinst Du mit Hover? Das ist allerdings problematisch. Wenn Du etwas anderes meinst, könnte gelten "geht nicht, gibt's nicht" und ich würde gern gucken ob es so auch möglich ist.
-
Versuche dieses, so explodiert das Bild von der Mitte aus und verschwindet, wenn man drauf klickt:
HTML
Alles anzeigen<!DOCTYPE html> <html> <style> html, body { height: 100%; } body { margin: 0; position: relative; } img.small { display: block; width: 200px; height: auto; transform: translate(0, 0); } figure.ovl { margin: 0; position: absolute; width: 0; height: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 1s linear; display: flex; align-items: center; justify-content: center; } figure.ovl.large { position: absolute; width: 80%; height: 80%; left: 50%; top: 50%; transform: translate(-50%, -50%); } figure.ovl img { width: auto; height: 100%; } figure.ovl img.fitVertically { width: 100%; height: auto; } </style> </head> <body> <img class="small" src="images/dia0.jpg"> <img class="small" src="images/dia1.jpg"> <img class="small" src="images/dia2.jpg"> <figure class="ovl"> <img> </figure> <script> const ovl = document.querySelector('figure.ovl'), largeImg = ovl.querySelector('img'); // Eventlistener für Klick irgend wo auf der Seite registrieren window.addEventListener('click', event => { // Wurde innerhalb eines großes Bildes geklickt? if (event.target.matches('figure.ovl.large img')) { // Bild wieder klein machen indem wir die Klasse "large" löschen: ovl.classList.remove('large'); } else { // Wurde auf ein kleines Bild geklick? if (event.target.matches('img.small')) { // Seitenverhältnisse von Body und Bild ermitteln: const boxBody = document.querySelector('body').getBoundingClientRect(), ratioBody = boxBody.width / boxBody.height, boxImg = event.target.getBoundingClientRect(), ratioImg = boxImg.width / boxImg.height; // Bild entspr. Seitenverhältnis einpassen: if (ratioImg > ratioBody) { largeImg.classList.add('fitVertically'); } // Bild in Overlay eintragen: largeImg.src = event.target.src; // Bild groß machen indem wir die Klasse "large" zum Overlay hinzu fügen: ovl.classList.add('large'); } } }); </script> </body> </html> -
... hier eine einfache Lösung mit Javascript und Klick. Das ist noch stark verbesserungsfähig, denn so verschwindet das Bild an seiner ursprünglichen Position und die anderen verschieben sich.
HTML
Alles anzeigen<!DOCTYPE html> <html> <style> html, body { height: 100%; } body { margin: 0; position: relative; } img { display: block; width: 200px; height: auto; transform: translate(0, 0); } img.large { position: absolute; width: 80%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <img src="images/dia0.jpg"> <img src="images/dia1.jpg"> <img src="images/dia2.jpg"> <script> // Eventlistener für Klick irgend wo auf der Seite registrieren window.addEventListener('click', event => { // Gibt es ein großes Bild und wurde außerhalb geklickt? if (document.querySelector('img.large') && !event.target.matches('img.large')) { // Bild wieder klein machen indem wir die Klasse "large" löschen: const img = document.querySelector('img.large'); img.classList.remove('large'); } else { // Wurde auf ein kleines Bild geklick? if (event.target.matches('img:not(.large)')) { // Bild groß machen indem wir die Klasse "large" hinzu fügen: const img = event.target; img.classList.add('large'); } } }); </script> </body> </html> -
Zitat
es könnte nach "außerhalb des Bildes geklickt wird, z. B." noch etwas fehlen. Oder war das so beabsichtigt?
Nein, war so beabsichtigt. Ich hätte auch schreiben können:
Zitatbis z. B. ein Close-Button gedrückt wird oder außerhalb des Bildes geklickt wird.
Ich zeige dir später, wie das geht mit dem Klick-Event.
-
Das Geflacker wundert mich nicht, es ist so zu erklären:
Wenn das Bild vergrößert wird, bewegt es sich auch in die Mitte und dann liegt die Maus nicht mehr drauf --> :hover trifft nicht mehr zu und das Bild wird wieder kleiner usw.
Ein typisches Problem bei Hover-Effekten. Es gibt noch einen anderen Nachteil beim Hover: Heute ist die Mehrzahl der Benutzer mit Touch-Geräten unterwegs und dabei gibt es kein Hover. Daher empfehle ich, statt des :hover in CSS das Klick-Event in Javascript zu verwenden. Dann wird das Bild stabil an seiner Position stehen bleiben bis ein Close-Button gedrückt wird oder außerhalb des Bildes geklickt wird, z. B.
-
Ein Bild kannst Du so zentrieren:
Code
Alles anzeigenbody, html { height: 100%; } body { position: relative; } .myzoomimg img{ transition: 1s; } .myzoomimg img:hover{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; height: auto; }Ungetestet, aber so habe ich es schon häufig gemacht.
Dies ist zunächst mal eine sehr einfache Lösung. Wenn Du erreichen möchtest, dass das Bild von der alten, kleinen Positon ausgehend an die neue, vergrößerte, explodiert, wird es ein wenig komplizierter.
-
Wenn ich mein JS und CSS in den Codepen aus deinem Eingangsposting übernehme, funktioniert alles:
Wenn bei dir nicht, dann poste die URL des Pen, keinen Screenshot.
-
Den schließenden </body> hatte ich nur mit dazu genommen um deutlich zu machen wo das Skript hin gehört.
Das ist jetzt erst Mal nur ein Screenshot. Funktionierts denn?
-
Zitat
Ich aber weiß überhaupt nicht was das Script macht und wie ich da mit der CSS gegensteuern könnte.
Das ist eine typische Konsequenz, wenn man eine Fundsache aus dem Web einsetzt ohne sie zu verstehen
Ich bin ja nicht unbedingt ein Freund von jQuery und hier bestätigt sich das: Es liegt ein undurchsichtiges Mischmasch von Animation der Höhe und Umschalten von display vor, das es schwer macht, die Dinge zu durchschauen und nach den eigenen Vorstellungen umzuändern.
ZitatWas muss ich in die CSS schreiben?
Wie nextuser schon schrieb, hat der Inlinestyle, den jQuery setzt, eine hohe Priorität. Du kannst jedoch dafür sorgen, dass sich dein CSS dennoch durchsetzt, indem Du "!important" hinzu setzt. Auch davon bin ich kein Freund weil man es i. allg. nur braucht, wenn man sein CSS nicht im Griff hat, aber hier kommt man wohl nicht daran vorbei.
Da kein Freund von jQuery, habe ich mal das Menü aus deinem Codepen hergenommen und mit Vanilla-JS realisiert einschl. Animation.
Das Javascript am Ende des Body:
Code
Alles anzeigen<script> const menu = document.querySelector('ul.menu-list'), hamburger = document.querySelector('div.humbarger'); hamburger.addEventListener('click', event => { // Ist das Menü offen? Das zeigt // die Klasse "open" an: if (menu.classList.contains('open')) { /* Menü verbergen indem wir die Höhe auf 0 setzen: */ menu.style.height = '0'; } else { /* Menü öffnen indem wir die Höhe entsprechend Inhalt setzen; scrollHeight liefert uns diese auch wenn das Menü geschlossen ist: */ menu.style.height = menu.scrollHeight + 'px'; } menu.classList.toggle('open'); }); </script> </body>Ist doch recht kompakt und einfach, nicht wahr?
Am CSS musste ich nicht viel verändern, siehe meine Kommentare:
CSS
Alles anzeigen/* ==================== Responsive Section =======================*/ /* Tablet desktop :768px. */ @media only screen and (min-width: 768px) and (max-width: 991px) { header .navigation .menu-list { width: 60%; /* Hier erzwingen wir mit !important, dass die Höhe auf auto gesetzt wird und das Menü sichtbar ist: */ height: auto !important; } header .navigation .menu-list li a { font-size: 1rem; } } /* Large Mobile :480px. */ @media only screen and (max-width: 767px) { header .navigation .menu-list { position: absolute; top: 12vh; min-width: 100%; background: rgba(15, 20, 35, 0.99); text-align: center; /* Statt durc "display: none;" verbergen wir das Menü durch eine Höhe von 0: */ /* display: none; */ height: 0; overflow: hidden; /* Die Animation erledigen wir durch CSS: */ transition: 0.5s height linear; } header .navigation .menu-list li { display: block; } header .navigation .menu-list li a { display: block; padding: 20px; transition: color 1s ease, padding 1s ease, background-color 1s ease; } header .navigation .menu-list li a:hover { color: #b1d4e0; padding-left: 30px; background: rgba(177, 212, 224, 0.2); } header .navigation .humbarger { display: block; } .intro-section .intro-content h1 { font-size: 2.8rem; } .intro-section .intro-content h6 { font-size: 1.4rem; } .intro-section .intro-content .changing { font-size: 1.5rem; } .intro-section .intro-content .header-btn a { font-size: 1.25rem; } } /* small mobile :320px. */ @media only screen and (max-width: 479px) { .intro-inner .intro-content h1 { font-size: 2rem; letter-spacing: 1px; } .intro-inner .intro-content p { margin-top: 10px; } } -
Ich würde versuchen, das ohne absolute Positionierung zu machen, dann bekommst Du keine Probleme mit Überlappungen.
Code
Alles anzeigen<section id="home" class="slider" data-stellar-background-ratio="0.5"> <div class="row"> <div class="owl-carousel owl-theme"> <div class="item item-first"> <div class="caption"> <a href="pdf/Weih.pdf"> <img src="images/weihn.png" class="img-responsive" alt=""> </a> <div class="container"> <div class="col-md-8 col-sm-12"> <h3>Restaurant</h3> <h1>Unsere Mission: Eine unvergessliche Zeit für Sie!</h1> <p><h6>Jetzt Anrufen!<b class="fa fa-phone smoothScroll"></b> 06162-1442</p></h6> </div> </div> </div> </div> <div class="item item-second">Code.item-first .caption a { /* Damit das Bild nicht zu groß sondern in seiner natürlichen Größe angezeigt wird: */ align-self: center; } -
Das mit dem Farbverlauf wird hier bei Stackoverflow diskutiert:
How do you apply a gradient from outer to inner, only to borders, in CSS?Based on the MDN documentation this doesn't seem to be explicitly supported. So I tried it as follows in the linked code pen below. I know the nested…stackoverflow.comKann man so zusammen fassen, dass es keine richtig gute Lösung gibt. Besser mit SVG machen, wie früher empfohlen oder, wie Du selbst schreibst, mit Canvas.
-
Ja, kannst Du direkt hier posten, am besten mit Codetags: Das Menü rechts von dem kleinen Landschaftssymbol öffnen und dann </>.
-
Willkommen zurück!
Das Problem lässt sich bestimmt lösen aber Du musst dazu das CSS posten, das Du bisher hast.