Guten Morgen Rita und willkommen im Forum!
Du vermutest richtig, mit HTML geht das nicht weil das keine Programmiersprache ist sondern eine Auszeichnungssprache. Du wirst PHP oder Javascript brauchen:
Soll der Status nur ein Mal beim Laden der Seite ausgewertet werden, dann wäre es mit PHP am einfachsten.
Möchtest Du die Anzeige laufend aktualisieren wirst Du Javascript brauchen.
Das Problem hat man relativ häufig. Normaler Weise liegt es daran, dass ein Element mehr Platz einnimmt als in das Browserfenster passt. Der Seiteninspektor zeigt das zwar an aber bei komplexeren Seiten kann das Lokalisieren zeitaufwändig sein, weil man alle Elemente prüfen muss, nicht nur auf der Ebene direkt unter body sondern auch darunter. Ich habe es jetzt so gemacht, dass ich zunächst die erste Ebene geprüft habe, ob der Effekt verschwindet, wenn ich dem Container ein "overflow: hidden;" verpasse. Auf diese Weise habe ich schnell heraus gefunden, dass der Schuldige im div.banner liegt. Jetzt lösche ich das "overflow: hidden;" wieder und prüfe die Elemente darin, dann sehe ich schnell, dass die beiden h-Elemente rechts heraus ragen:
An dieser Stelle offenbaren sich die Nachteile der absoluten Positionierung, Du müsstest die Breite dieser Elemente korrigieren.
Die Lösung liefert dann wieder das bewährte Flexlayout: Die Element untereinander anordnen und zentrieren:
.banner {
background-image: url("../images/banner.png");
background-color: #efefef;
background-repeat: repeat-x;
height: 400px;
width: 100%;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 2em;
}Und die absolute Positionierung entfernen.
Den Abstand links erreicht Du durch das padding-left.
Auch auf die feste Höhe (die hat auch Nachteile) kannst Du verzichten, wenn Du dem div.banner auch oben und unten ein padding gibst.
In dem was Du online hast, kann ich die beiden Änderungen nicht finden. Lade die CSS-Datei am besten hoch.
In welchem Browser tritt denn das Problem auf?
Im Moment kann ich es nicht weiter untersuchen weil ich keine Maus habe. Vielleicht nimmt sich jemand anders dieser Sache an,
Ich haben das jetzt untersucht. Dadurch, dass die Elemente <h> und <a> sich überdecken feuern die Events mouseover und mouseout mehrfach und das kann in Verbindung mit der Transition zu Problemen führen. Versuche folgendes:
Die Elemente <h> sollen nicht auf Mausaktionen reagieren:
li h2 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
transition: transform 0.4s;
/* Den Text nach links verschieben, so dass
er zunächst unsichtbar ist: */
transform: translateX(-100%);
/* Hinzu fügen: Die Elemente sollen nicht
auf Mausaktionen reagieren: */
pointer-events: none;
}Außerdem überdecken sich die Elemente nicht genau weil der Defaultwert für "vertical-align" "baseline" ist. Das kannst Du durch dieses CSS beheben:
li img {
vertical-align: top;
}Was ich beobachte: Wenn man von oben oder unten mit der Maus ganz schnell auf ein Bild fährt, blitzt es links ganz kurz auf aber der Text erscheint nicht dauerhaft. Muss ich genauer untersuchen.
Ich habe deinen neuen Code in eine Testdatei eingetragen und bei mir funktioniert er einwandfrei.
Vermutung: Ich habe in dem Code in deinem ersten Posting einiges an abs. Positionierung gesehen. Gibt es in deinem vollständigen Code noch etwas davon, so dass ein anderes Element die Listenpunkte überdeckt?
Auf jeden Fall wäre es hilfreich, das im vollständigen Zusammenhang zu sehen. Wenn Du es online hast, dann poste bitte die URL.
Macht nichts. Trifft das denn jetzt, was Du dir vorgestellt hast?
Du kannst einfach die URL aufrufen, dann wird dir das Javascript angezeigt und Du kannst es z. B. mit "Seite- - speichern unter" lokal speichern.
Wie ich sehe, gibt es das auch auf Github und als Lizenz wird MIT angegeben. Was hindert dich dann daran, es herunter zu laden und auf deinem eigenen Webspace einzubinden?
PS: Ich habe eine Demo gemacht mit Gridlayout, wie ich es oben erwähnt hatte:
<ul>
<li class="nav-item">
<h2>Der Text</h2>
<img src="images/buttondown.png">
</li> /* Grid anlegen, die Breite soll sich nach dem Inhalt richten: */
li.nav-item {
display: inline-grid;
overflow: hidden;
}
li h2,
li img {
/* Beide Element sollen in der selben Zelle liegen
und sich überdecken: */
grid-column: 1 / 2;
grid-row: 1 / 2;
}
li h2 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
transition: transform 0.5s;
/* Den Text nach links verschieben, so dass
er zunächst unsichtbar ist: */
transform: translateX(-100%);
}
li.nav-item:hover h2 {
/* Beim Hover heben wir die Verschiebung
auf, so dass der Text sichtbar wird: */
transform: translateX(0);
}Hallo elmi und willkommen im Forum!
Ich habe mir das in einer Testdatei angesehen und verstehe nicht ganz, was Du erreichen willst.
Die zwei ul-Elemente sind unabhängig und das zweite untere hat mit deinem Problem nichts zu tun, nicht wahr?
Bei dem ersten Listenelement sehe ich eine Überschrift mit dem Text "Panorama", der ist zunächst unsichtbar wegen "overflow: hidden;". Was soll mit diesem Test passieren?
Dies:
Ich versuche zusätzlich den (hover) so zu gestalten, dass ein Wort über das Bild/Menupunkt erscheint.
verstehe ich so, dass der Text beim Hover genau das Bild überdecken soll, richtig? Das kannst Du auch mit Gridlayout erreichen, wenn Du beides, das Bild und den Text, in die selbe Zelle des Grid legst, ohne die Nachteile von absoluter Positionierung.
Guten Morgen hokafa und frohe Ostern!
Also das "fulpmes1.mp4" habe ich prima hinbekommen.
Super, wenn es mit dem einen Video geklappt hat, sollten die anderen auch kein Problem sein.
Habe jetzt in der Eingabeaufforderung immer C:\>
Das ">" ist erst Mal kein Problem. Allerdings sieht man, dass Du dich im Wurzelverzeichnis von C: befindest. Sicher hast Du die anderen Videodateien wieder in das Verzeichnis C:\ffmpeg\bin gelegt. Dann musst Du wieder mit cd-Anweisungne dort hineien gehen, wie ich es in Posting #14 beschrieben habe:
C:\>cd ffmpeg
C:\ffmpeg>cd binIch denke ich gehe dir jetzt zum letzten Mal auf die Nerven, habe deine Geduld lange genug strapaziert.
Ist mir schon peinlich, oder bin ich wirklich so blöd
Sei unbesorgt, dafür ist das Forum da, Fragen zu beanrworten und Probleme zu lösen.
Du bist kurz davor.
Woran es scheitert:
D:\>c:
C:\>cd ffmpeg
C:\ffmpeg>cd bin
C:\ffmpeg\bin>dir
Volume in Laufwerk C: hat keine Bezeichnung.
Volumeseriennummer: 2AFA-8525
Verzeichnis von C:\ffmpeg\bin
30.03.2026 14:24 <DIR> .
30.03.2026 14:24 <DIR> ..
23.09.2021 14:21 95.651.328 ffmpeg.exe
26.03.2026 20:41 29.978.691 fulpmes1.mp4
2 Datei(en), 125.630.019 Bytes
2 Verzeichnis(se), 115.688.181.760 Bytes frei
C:\ffmpeg\bin>ffmpeg.exe -i fulpmes1.mp4 -vcodec libx264 -acodec aac fulpmes1-h264.mp4Der dir-Befehl zeigt die die Dateien an, die im aktuellen Verzeichnis liegen.
So getestet und funktioniert.
Guten Tag und schönen Sonntag zurück!
ich komme nicht dahin zu vervollständigen.
Markiere den Code bzw. Text mit ffmpeg aus meiner ersten Antwort vollständig (Strg+C), dann mach die Eingabezeile in der Eingabeaufforderung leer mit "Backspace" und füge den Text ein (Strg+V). Dann mit "Enter" abschicken. ffmpeg sollte ein wenig arbeiten und Ausgaben bringen und dann müsste die konvertierte Datei fertig sein.
Viel Erfolg und beste Grüße!
Super, dass Du doch weitermachen willst!
Wenn Du die Eingabeaufforderung hast und ffmpeg.exe, hast Du schon gute Voraussetzungen.
Du musst das fragliche Video fulpmes1.mp4 in das selbe Verzeichnis wie ffmpeg.exe legen und dann den Code bzw. Befehl, den ich oben gepostet habe, in der Eingabeaufforderung eingeben oder hin kopieren und ausführen.
Dann findest Du das konvertierte als fulpmes1-h264.mp4 im selben Verzeichnis und das sollte dann jeder aktuelle Browser abspielen können.
Das ist sehr schade, Aufgeben ist immer schlecht.
Für das Präsentieren von Einzelfotos ist eigentlich auch eine Slideshow eine gute Wahl. Ich habe mal einen Blick darauf geworfen. Wahrscheinlich wird sie von RocketCake bereit gestellt. Leider hat sie einige Mängel:
Der Vorwurf geht natürlich nicht an dich sondern die Entwickler von RocketCake. Anscheinend haben sie versäumt, den Editor auf dem letzten Stand der Technik zu halten.
Generell braucht es ein wenig Beharrlichkeit beim Entwickeln. Wenn man bei der ersten Schwierigkeit aufgibt, kommt man nicht weit.
Das HTML dort ist fehlerhaft:
<video id="video_78bff89b" src=""<video controls autoplay>
<source src="fulpmes1.mp4" type="video/mp4">
</video> controls="controls" >
Your browser does not support the video element.
</video> Korrigiere ich das im Seiteninspektor wird das Video zwar abgespielt aber ohne Inhalt. Offenbar stimmt etwas mit der Codierung nicht.
Wenn ich es mit ffmpeg nach MP4 und H.264 umkodiere, spielt mein Browser (Firefox) es einwandfrei ab. Du musst das selbe tun, entweder in deinem Videoprogramm mit dem Codec H.264 exportieren oder mit ffmpeg umkodieren:
ffmpeg -i fulpmes1.mp4 -vcodec libx264 -acodec aac fulpmes1-h264.mp4Viel Erfolg und einen schönen Abend!
Ich kann in dem Code, den Du gepostet hast, keinen Fehler entdecken. Hast Du das auch online, dass man es sich live ansehen kann?
Shanaya ist dein Problem auf Selfhtml gelöst worden?
Hallo DataPearl
da alle INPUT-Felder zusammen bereits in einem großen FORM liegen. Aus Übersichtsgründen (und auch wegen zwei Hintergrundprozessen) möchte ich aber nicht alle INPUT-Felder auf einmal anzeigen lassen, sondern sie in inhaltlich logische Abschnitte unterteilen.
In dem Fall würde es sich anbieten, fieldset-Tags für die Unterteilung zu benutzen. Ich habe dafür mal eine Demo gemacht:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test Eingabe-Events</title>
<style>
input:invalid {
background-color: red;
}
fieldset:invalid {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<fieldset>
<input id="test1" required oninput="pruefung(this)">Test 1
<input id="test2" required oninput="pruefung(this)">Test 2
<input id="test3" required oninput="pruefung(this)">Test 3
<button type="button">Weiter</button>
</fieldset>
<fieldset>
<input id="test4" required oninput="pruefung(this)">Test 4
<input id="test5" required oninput="pruefung(this)">Test 5
<input id="test6" required oninput="pruefung(this)">Test 6
<button type="button">Weiter</button>
</fieldset>
</form>
<!-- Dieser Button nur zum Testen der Eingabe durch Skript: -->
<button id="btn-for-test" onclick="eingabe('#test3', 'teststring')">Eintragen</button>
<script>
function eingabe(sel, val) {
const elem = document.querySelector(sel);
elem.value = val;
pruefung(elem);
}
function pruefung(elem) {
const
// Wir suchen aufwärts im Baum das Fieldset wo das Input drin liegt:
fldset = elem.closest('fieldset'),
// Ausgehend vom Fieldset suchen wir abwärts den Button innerhalb des Fieldset:
btn = fldset.querySelector('button');
// Jetzt prüfen wir, ob alle Elemente im Fieldset valide bzw.
// in unserem Fall ausgefüllt sind. Das ist der Fall wenn das Fieldset
// die Pseudoklasse ":valid" besitzt:
if (fldset.matches(':valid')) {
console.log('valid, alle Eingabefelder des aktuellen Fieldset gefüllt');
} else {
console.log('invalid');
}
}
</script>
</body>
</html>So geht es mit wenigen Zeilen ganz ohne Klassen, nur die IDs für die Inputs brauchst Du wahrscheinlich, um die Werte auch durch das Skript ändern zu können.
Und, Du hast zwar nicht danach gefragt, aber ich habe ein Feature benutzt was häufig als hilfreich für den Benutzer angesehen wird: Abhängig davon ob ein Element valide oder nicht valide ist, kann man die Anzeige variabel gestalten, hier mit rotem Hintergrund bzw. Rahmen.