Bei mir (Opera auf PC) funktioniert es einwandfrei: Bei breitem Fenster ist die Nav sichtbar, bei schmalem nur das Burger-Symbol und die Nav öffnet sich, wenn man darauf klickt.
Auf Samsung S4 funktioniert es auch: Touch auf Burger-Symbol öffnet die Nav, sowohl im Android-Browser als auch in Opera.
hast du vieleicht mal einen Link oder so ?
Ich sehe immer noch keine Möglichkeit, den Code einzusehen, oder übersehe ich etwas?
Der erste Codeabschnitt sieht gut aus, so sollte es funtionieren. Du hast uns jedoch immer noch nicht gezeigt, wie Du die Texte in diesem Javascript-Objekt zur Anzeige bringst.
Am besten gleich hier das Tutorial durcharbeiten:
Hiernach:
https://www.html-seminar.de/html-texte-formatieren-2.htm
ist das sup-Tag der richtige Weg. Dein Code zeigt jedoch ein Javascript-Objekt. Gib uns den Code, wie Du dideses Tag anwendest und wie Du die Texte auf deine Seite bringst
Ja, wegen der Semantik. Google ist ein gutes Beispiel, weil es dann eine präzise Zuordnung zwischen Text und Bild gibt. Wenn ich nach Bildern suche, stehe ich häufig vor dem Problem, dass ein gefundenes Bild nicht dem Suchbegriff entspricht und ich erwarte, dass das figure-Tag solche Fehler ausschließt.
Auch wenn Lupus sie als "Cards" bezeichnet, werbe ich immer dafür, für diesen Zweck, ein Bild mit einer Beschreibung dazu, das figure-Tag zu verwenden.
Merkwürdig, da liegt so ein Popup über dem Codepen: "Email needs verification"?
Ja, jetzt habe ich es verstanden.
Da fällt mir leider keine Lösung mir reinem CSS ein. Mit Javascript und transition jedoch kein Problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Scrolling Text</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.textBox {
height: 30px;
overflow: hidden;
line-height: 30px;
padding: 0px;
display: inline-block;
width: 300px;
}
.textBox span {
display: inline-block;
white-space: nowrap;
transition: 1.5s linear;
}
</style>
</head>
<body>
<p class="textBox">
<span id="mySpan">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</span>
</p>
<script>
function doScroll() {
var innerEle = document.querySelector(".textBox span");
var outerEle = document.querySelector(".textBox");
var innerWidth = innerEle.offsetWidth;
var outerWidth = outerEle.offsetWidth;
var diff = outerWidth - innerWidth;
if (diff < 0) {
innerEle.addEventListener("mouseover", function () {
this.style.transform = 'translate(' + diff + 'px)';
});
innerEle.addEventListener("mouseout", function () {
this.style.transform = 'translate(0px)';
});
}
}
doScroll();
</script>
</body>
</html>(Begonnen habe ich mit Webanimation, daher die querySelector. Sollte man noch umstellen.)
Hallo Draku,
mit Prozentwerten für die Verschiebung bist Du schon auf dem richtigen Weg. Jedoch: Wenn Du transform:translate für die Verschiebung benutzt, brauchst Du gar keine absolute Positionierung. Dieses funktioniert genau so gut:
<p class="textBox">
<span id="mySpan">The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog</span>
</p>
<style>
.textBox {
height: 30px;
overflow: hidden;
line-height: 30px;
padding: 0px;
display: inline-block;
}
.textBox span {
display: inline-block;
white-space: nowrap;
transform: translateX(0);
transition: 1.5s;
}
.textBox:hover span {
transform: translateX(-100%);
}
</style>Ist das gewollt, dass der Text nur zum Teil nach links gleitet? In meinem Beispiel habe ich -100% verwendet, so dass er ganz verschwindet.
... dieses ist das, woran ich mich erinnere:
Muss man prüfen, ob das Sortieren leicht zu integrieren ist, oder ob man nur das Drag&Drop benutzen kann und den Rest behält, wie es schon ist.
ein Array zu erzeugen und dann in PHP die Dateien erst zu löschen
Das ist natürlich das einfachste, hat aber den Nachteil, dass die gelöschte(n) Datei(en) erst Mal hochgeladen werden müssen.
Was das Drag&Drop betrifft, so kenne ich zwar keine Erklärung oder ein Tutorial aber ich habe da ein Beispiel. Muss es nur heraussuchen ...
Das wird hier diskutiert:
https://stackoverflow.com/questions/1694…utfile/16943684
Scheint machbar zu sein mit dem Objekt DataTransfer. Wenn Du nicht zum Ziel kommst, melde dich wieder.
Man kann die Animationen auch kombinieren und auf das selbe Element anwenden:
Du brauchst zwei Animationen: Einmal die stufenweise, die Du schon hast und dann eine kontinuierliche um den Vogel horizontal zu bewegen. Dazu musst Du dem Element die Eigenschaft position:absolute; geben und die Eigenschaft left statt background-position animieren. Gibt auch noch andere Möglichkeiten, z. B. Bewegung durch Animation von transform:translate();
Da Du das CSS ausgelagert hast, vermute ich, dass es am Cache liegt. Mit Strg+F5 kannst Du die Seite einschl. externer CSS und Javascript-Dateien neu laden.
Siehe meine Kommentare
body img{
width:18%;
height: auto;
}
@media only screen and (max-width: 800px) {
body img {
width: 18%; /* dies ist wirkungslos, weil es die selbe Breite
definiert wie oben. Besser 30% */
}
}
@media only screen and (max-width: 450px) {
body img {
width: 30%; /* und hier 45% */
}
}Ich hatte die Mediaqueries getestet und es hatte funktioniert: Abhängig von der Fensterbreite wurden 5, 3 oder 2 Bilder in einer Reihe angezeigt. Poste am besten noch Mal dein CSS.
Da Du das mit den Mediaqueries nicht verstehst, gebe ich dir hier mal einen Beispielcode:
@media only screen and (max-width: 800px) {
body img {
width: 30%;
}
}
@media only screen and (max-width: 450px) {
body img {
width: 45%;
}
}Die Umschaltpunkte (max-width) kannst Du so anpassen, dass das Verhalten deinen Vorstellungen entspricht.
Dann vermute ich, dass Du meinen Hinweis auf Mediaqueries überlesen hast 