In dem Beispiel seht Ihr jedoch mehrere Miniaturbilder, ich möchte nur eines.
Das ist eine etwas ungewöhnliche Anforderung an eine Galerie aber sie ist mir früher schon mal begegnet und es ist kein Problem, es so zu realisieren. In der Doku für die API der Fancybox:
https://fancyapps.com/fancybox/3/docs/#api_usage
wird beschrieben, wie man eine Galerie durch Javascript, ohne HTML und Vorschaubilder anlegen kann. Versuche, ob das dem entspricht, was Du dir vorstellst.
Mit den Beiträgen unseres m.scatello bin ich nicht immer einverstanden, aber in diesem Fall teile ich seine Auffassung: Durchaus fragwürdig, wenn ein Fragesteller durchblicken lässt, dass er die Webentwicklung professionell betreibt (und dafür seinen Kunden einen u. U. vierstelligen Betrag in Rechnung stellt) und sich dann im Forum kostenlosen Support holt. In einem solchen Fall wäre es angemessen, einen Supporter oder Partner zu suchen und diesen anständig zu bezahlen. Dieser Thread ist nicht das einzige Beispiel und i. allg. halte ich mich dann heraus, wenn so etwas offensichtlich ist.
Ich empfehle, zunächst das Beispiel aus der Doku zu nehmen:
https://getbootstrap.com/docs/4.0/components/navs/
unter "Javascript Behaviour" und dann schrittweise zu verändern.
Durch Probieren habe ich heraus gefunden, dass das Sichtbar-/Unsichtbarmachen der Inhalte funktioniert, wenn ich die data-target-Attribute in der Navigation lösche. Das Hervorheben der Menüpunkte funktioniert jedoch nur, wenn ich sie zu Tabs mache wie in der Doku beschrieben.
PS: Oder ist das, was in .nav-content drin ist, der Hauptinhalt?
Leider konnte ich das eigentliche Problem nicht testen, weil es keinen Inhalt gab, zu dem hätte gesprungen werden können. Auf jeden Fall wird jQuery gebraucht, denn ohne geht bei schmalem Fenster das Menü nicht auf, wenn ich auf das Hamburger-Icon klicke. Ich versuche mal, etwas Inhalt mit Sprungmarken hinzu zu fügen ...
Binde mal zusätzlich jQuery ein, dann sollte es besser funktionieren.
also wenn das etwas mit der rosa Farbe beim mit der Maus drübergehen zu tun haben sollte, müssten da doch eigentlich ganz andere Zahlen stehen die erstmal einen rosa Hexacode ergeben
Das trifft vollkommen zu, als ich das heraus kopiert habe, stand da auch eine andere Farbe drin, ich habe die Werte nur mit Nullen überschrieben, um es zu testen und sicher zu gehen, dass es auch funktioniert. Wenn Du direkt ab Zeile 2959 nachsiehst, wird Du einen anderen Code finden für das Rosa.
Ich benötige zusätzlich Untertitel im SRT-Format, weshalb eigentlich kein eigener Player möglich ist.
Geht nicht, gibt's nicht, siehe hier:
https://stackoverflow.com/questions/2696…t-srt-texttrack
HTML5-Video unterstützt zwar SRT nicht aber Konvertierung scheint kein Problem zu sein und es gibt Libraries, die das können.
Ich sehe bloß ein anderes Problem bei einem eigenen Player: Profi-Websites wie Youtube machen die Qualität und Auflösung von der Download-Geschwindigkeit des Benutzers abhängig, wodurch das Ganze dann recht komplex werden kann.
Auf dem Screenshot erkennt man, dass dein data ein Objekt ist, das unter dem Key persons ein Array enthält. Das bedeutet, dass Du dieses Array so ansprechen musst:
const persons = data.persons;
for(let i = 0; i < persons.length; i++){
let person = persons[i];(ungetestet)
BTW: Für diese Aufgabe, eine Tabelle aus einem JSON zu erzeugen, läuft das Rad bereits 
Die letzte Anforderung mit der Spaltenanzahl spricht dafür, ein Grid zu verwenden, weil Du dann die Anzahl der Spalten explizit festlegen kannst. Während dies bei Flex mehr implizit durch die Umbrüche geschieht und komplizierter zu steuern ist. Das würde zwar einige Mediaqueries erfordern aber eine Zahl von 4 wäre noch vertretbar. Ich habe es jetzt nicht ausgearbeitet, versuche es selbst.
Guten Morgen, das ist auch ein wenig verzwickt: Das Menü-Icon ist jeweils eine Inline-SVG-Grafik für das Pseudoelement ::before bzw. ::after.
:: before für das :hover. Ab Zeile 2959 in main.css
Dort findet man aber relativ leicht die Farbe als Hex-Wert und kann sie umändern:
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cstyle%3Eline %7B stroke-width: 8px%3B stroke: %23000000%3B %7D%3C/style%3E%3Cline x1='0' y1='25' x2='100' y2='25' /%3E%3Cline x1='0' y1='50' x2='100' y2='50' /%3E%3Cline x1='0' y1='75' x2='100' y2='75' /%3E%3C/svg%3E"); Die vier Nullen hinter dem stroke: damit habe ich zum Test die Farbe auf schwarz geändert und es hat funktioniert.
Um den Text des SVG lesbar zu machen, kann man ihn z. B. hier decodieren:
https://www.urldecoder.org
Das scheint mir einfach zu sein: Das Menü wird durch transform: translate() aus dem sichtbaren Bereich verschoben. Damit das nach links passiert musst Du nur einen negativen Wert verwenden:
#menu {
-moz-transform: translateX(-22em);
-webkit-transform: translateX(-22em);
-ms-transform: translateX(-22em);
transform: translateX(-22em);
-moz-transition: -moz-transform 0.45s ease, visibility 0.45s;
-webkit-transition: -webkit-transform 0.45s ease, visibility 0.45s;
-ms-transition: -ms-transform 0.45s ease, visibility 0.45s;
/* usw. das vorhandene CSS */Dies kommt mir zweifelhaft vor:
array_push($list('list_trips'), $list_element);
Da $list keine Funktion ist sondern ein Array müsstest Du eckige Klammern verwenden:
$list['list_trips']
Vermutlich a) kein Syntaxfehler und b) wird der Text wahrscheinlich schon in den Paragraphen geschrieben, aber durch Klick auf Submit wird das Formular abgeschickt und die Seite neu geladen, so dass der Text gleich wieder verschwindet.
Selbstverständlich ist das auch bei der zweiten Variante tstrow.html möglich. Du hast es dir nur verbaut, indem Du schon im HTML die Bilder in Sechsergruppen gruppiert hast. Ordne einfach die Bilder hintereinander an, ohne das span.gallery-column, lasse für Flex das Wrapping zu und ordne den figure-Containern ein min-width zu, dann wird Flex die Zeilen automatisch passend umbrechen.
Edit: Statt mit min-width kannst Du die Breite auch mit Flex festlegen:
flex-basis: 300px;
flex-grow: 1;
flex-shrink: 0;Aber auch mit Gridlayout geht das sehr gut. Versuche dieses CSS:
span.gallery-fotos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}Ein Unterschied bei beiden Varianten besteht darin, dass bei Grid bei einer unvollständigen Zeile die restlichen Bilder links angeordnet sind, während man sie bei Flex auch zentrieren kann.
Bei beiden Varianten funktioniert das responsive Verhalten schon ohne eine Mediaquery.
So funktioniert es:
.boxtwo:hover p {
opacity: 0
}Wenn Du dem .boxtwo p eine Transition zuweist, wird der Text auch sanft ein- und ausgeblendet.
Dieses Video habe ich leider nicht. Poste am besten den fraglichen Code und benutze dabei Codetags, das </> rechts oben in der Werkzeugleiste.
In deinem Text steht "verbinden", in dem Code, den Du gepostet hast, heißt die Funktion jedoch connect. Ein Schreibfehler im Text?
Das geht mit folgendem Javascript:
const headline = document.querySelector('h2').textContent;Damit findest Du den Text im ersten h2-Tag. Solltest Du mehrere davon haben, gibt es verschiedene Möglichkeiten, das richtige anzusprechen, z. B. in dem Du ihm eine Klasse gibst:
<h2 class="the-h2">Eis am Stiel</h2>
<script>
const headline = document.querySelector('h2.the-h2').textContent;
</script>