Verwandte Themen

Moni98799
26.06.2024, 03:10
Mit Links
FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung, Visual Studio Code
3 Antworten
Evocati89
22.06.2024, 17:30
Ziel: Eigenes Videomaterial über Webseite dauerhaft Streamen wie Live TV (z.B. WOW Live TV), wie gehe ich vor?

Hallo in die Runde,

ich möchte meine Serien und Filme über meine Webseite streamen. Aber nicht durch anklicken eines einzelnen videos. Sondern ich will eine Sammlung von Filmen und Serien zusammen stellen. Und die in Schleife auf der Webseite laufen lassen. Kein vor oder zurück spulen.
Wie beim Fernsehen halt. Rechtliche Fragen stellen sich nicht, da keine Urheberrechtsverletzungen begangen wurden und der Stream nur für mich ist.
Da ich aber Oft nicht weis, was will ich schauen. Hätte ich gerne wie beim Fernsehen. Das ich meine Webseite Aufrufe. Und dort einfach ein Programm läuft.

Mein Problem: Ich weis nicht, wie ich rangehen soll. Welche Software ich brauche.

Ich bin vollkommen ratlos. Eine Wordpress Webseite Aufzusetzen ist kein Problem. IT Kenntnisse sind vorhanden. Dieses Spezielle Problem hab leider wohl nur ich.

Hat jemand eine Idee oder Gedanken Ansatz wie ich das Bewerkstellige?

Am Liebsten würde ich alle dateien einfach in einen Ordner Packen. Und im Zufallsprinzip laufen die Videos einfach durch. Und wenn ich meine Webseite aufrufe. Dann kann es Serie X in Folge y bei Minute 23 und 45 Sekunden sein und dann will ich das der Stream für mich da gerade auch einfach weiterläuft.

Viel Text. Vielleicht auch missverständlich. Erstmal danke an jeden, der sich die Frage überhaupt durchliest.

Ich hoffe jemand kann helfen.
Liebe Grüße
Evocati89

Internet, Film, Webseite, Streaming
1 Antwort
Mia1307
22.06.2024, 16:42
Mit Links
Wie bei html bei bild so copyright machen?

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>
Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend
2 Antworten
Moni98799
22.06.2024, 01:31
Mit Bildern
HILFE bei der Erstellung eines langsam seitlich einslidernde Menue?

Wie in meiner Überschrift schon beschrieben möchte ich ein Menü bauen, das seitlich von rechts langsam einslidert. Für das Menü möchte ich <details> /<summary> verwenden.

So soll es mal aussehen:

Meine html-Struktur von der Navigation:

<nav id='sitenav' aria-labelledby='sitenav-label'>
    <h2 id='sitenav-label' class='visually-hidden'>Site-Navigation</h2>
    <details>
        <summary>Menü</summary>
            <ul>
                <li aria-current='page'>
                    <details>
                        <summary>Impressum &amp; rechtliches</summary>
                            <ul>
                                <li aria-current='sub-page' tabindex=0>
                                    <details>
                                        <summary>Impressum</summary>
                                            <ul>
                                                <li><a href=''>Kontakt</a></li>
                                                <li><a href=''>Fotodokumentationen</a></li>
                                                <li><a href=''>Links</a></li>
                                            </ul>
                                    </details>
                                </li>
                                <li><a href=''>Nutzungsbedingungen</a></li>
                                <li><a href=''>Datenschutz &amp; Urheberrecht</a></li>
                            </ul>
                    </details>
                </li>
                <li><a href=''>Website Erika Mustermann</a></li>
                <li><a href=''>Blog Max Mustermann</a></li>
                <li><a href=''>VLog Erika Mostermann</a></li>
            </ul>
    </details>
</nav>

Der sichtbare Hamburger Button (mit den Pseudoelementen ::after und ::before bei details / summery) ist position: sticky;

Nun könnte mir jemand bitte zeigen wie ich nun mein <ul> von rechts langsam einslidern lasse. Stoppen soll das Untermenü dann links vom Button.

Es geht mir um das Prinzip wie man es macht. Kann mir dies bitte jemand an einem einfachen Beispiel zeigen?

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Button, Webdesign
1 Antwort
Moni98799
20.06.2024, 02:12
Richtige ARIA - Accessibility Auszeichnungen?

Heute geht es mir um eine korrekte ARIA - Accessibility Auszeichnung:

A) Die (TAB) Skip- Links

<!-- Skip links -->
<nav role="navigation" aria-label="skiplinks" id="skiplinks">
	<a href="#main-content" class="skip-link">Zum Haupt&shy;inhalt springen</a>
	<a href="#totop" class="skip-link">Zum Skip&shy;button springen</a>
	<a href="#foot-global"class="skip-link">Zum Footer springen</a>
</nav>

B) Meine Haupt - Navigation

<!-- HAUPT - Navigation -->
<nav id="main-nav" aria-label="MainNav">
  <details id="site-nav-heading">
	<summary aria-labelledby="site-nav-heading">Haupt-&shy;Navigation</summary>
	  <ul aria-labelledby="site-nav-heading">
		<li><a href="">Website Erika Mustermann</a></li>
		<li><a href="">Blog Max Mustermann</a></li>
	  </ul>
  </details>
</nav>

C) Ein INTERNES SKIPPEN zu einzelnen BLOG-ARTIKELN (geordnet nach Datum & Uhrzeit

<nav id="navigations" class="" aria-labelledby="skiptosection-label">
<h3 id="skiptosection-label" class="visually-hidden">Intern-Site-Navigation</h3>
<div class="skipsection-links">
<details>
	<summary class="site-navigation-header">Inhalt</summary>					
		<ul class="site-nav-skiplinks">
			<li><a href="#blogartikel05">20-02-2024<span>13:00 Uhr</span></a></li>
			<li><a href="#blogartikel04">12-02-2024<span>14:30 Uhr</span></a></li>
		</ul>
</details>
</div>
</nav>

D) Zum Schluss noch der Nach-OBEN (SKIP - to - Top) Button

<!-- SKIP - to TOP LINK -->	
<nav id="skiptop" aria-labelledby="skiptop-label" class="scroll-top-wrapper">
<h2 class="visually-hidden">Skip-to-TOP</h2>
	<div id="skiptop-label" class="scroll-top_link">
		<a href="#skip-to-top"><span>skip to top</span></a>
	</div>
</nav>

Bitte das mal zu korregieren.

HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
1 Antwort
shibuyo
19.06.2024, 23:08
Bashskript Problem?

Ich habe hier ein Bashskript, welches Dateien überwacht (noch nicht vollständig und absolut unoptimiert). Ich weiß, dass es Tools gibt, aber es ist ein Projekt für die Uni und deshalb ist Optimierung und Effizienz nicht wirklich wichtig. Ich möchte damit die Grundlagen des Shellscriptings einfach etwas lernen.

Das ist bisher das Script:

#!/bin/bash


echo "Das Skript wurde gestartet. Der Typ Ihres Betriebssystem ist "\"$OSTYPE\""."


# If-Abfrage, die das Betriebssystem erkennt und den Pfad zum überwachten Ordner oder Datei festlegt # HIER BITTE DIE PFADE ZUM ZU ÜBERWACHENDEN ORDNER EINTRAGEN   
if [[ "$OSTYPE" == "linux-gnu"* ]]; then
    BASE_DIRECTORY=" " # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = Linux
elif [[ "$OSTYPE" == "darwin"* ]]; then
    BASE_DIRECTORY="/Users/name/Library/CloudStorage/GoogleDrive-email@gmail.com/Meine Ablage/Uni/TestOrdner" # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = MacOs
elif [[ "$OSTYPE" == "win32" || "$OSTYPE" == "msys" || "$OSTYPE" == "cygwin" ]]; then
    BASE_DIRECTORY="/g/Meine Ablage/Uni/TestOrdner" # Übergibt dem überwachten Ordner eine Variable, wenn Betriebssystem = Windows
else    
    echo "Das Betriebssystem ist unbekannt." # Wenn das Betriebssystem unbekannt ist, wird eine Fehlermeldung ausgegeben
    exit 1
fi


DIRECTORY="$BASE_DIRECTORY" # Pfad zum Ordner
FILE="$BASE_DIRECTORY/Datei.txt" # Pfad zur Datei   
FILE2="$BASE_DIRECTORY/Datei2.txt" # Pfad zur Datei2 


cd "$BASE_DIRECTORY" || {
    echo "Wechsel zu $BASE_DIRECTORY fehlgeschlagen!" # Wechselt in den TestOrdner oder gibt eine Fehlermeldung aus
    exit 1;
}



# Funktion, um zu überprüfen, ob Dateien gelöscht wurden
checkIfDeleted() {
    if [ ! -f "$FILE" ]; then 
        echo "Die Datei \"$(basename "$FILE")\" wurde gelöscht, umbenannt oder verschoben."
    elif [ ! -f "$FILE2" ]; then
        echo "Die Datei \"$(basename "$FILE2")\" wurde gelöscht, umbenannt oder verschoben."
    elif [ ! -d "$DIRECTORY" ]; then
        echo "Der Ordner \"$(basename "$DIRECTORY")\" wurde gelöscht, umbenannt oder verschoben."
    fi
}


# Speichert den "ursprünglichen" Hash-Wert der Dateien
ORIGINAL_HASH=$(md5 -q "$FILE")
ORIGINAL_HASH2=$(md5 -q "$FILE2")


checkIfEdited() {
    if [ ! -f "$FILE" ]; then # Wenn $FILE nicht existiert, dann wird das Skript hier beendet
    return
    fi


    if [ ! -f "$FILE2" ]; then # Wenn $FILE2 nicht existiert, dann wird das Skript hier beendet
    return
    fi


    if [ ! -d "$DIRECTORY" ]; then # Wenn $DIRECTORY nicht existiert, dann wird das Skript hier beendet
    return
    fi


    # Berechnet den aktuellen Hash-Wert der Dateien
    CURRENT_HASH=$(md5 -q "$FILE")
    CURRENT_HASH2=$(md5 -q "$FILE2")


    # Hash-Werte werden verglichen
    if [ "$CURRENT_HASH" != "$ORIGINAL_HASH" ]; then
        echo "Die Datei \"$(basename "$FILE")\" wurde bearbeitet."
        # Ursprünglicher Hash-Wert wird für zukünftige Überprüfungen aktualisiert
        ORIGINAL_HASH="$CURRENT_HASH"
    elif [ "$CURRENT_HASH2" != "$ORIGINAL_HASH2" ]; then
        echo "Die Datei \"$(basename "$FILE2")\" wurde bearbeitet."
        # Ursprünglicher Hash-Wert wird für zukünftige Überprüfungen aktualisiert
        ORIGINAL_HASH2="$CURRENT_HASH2"
    fi
}


while true; do # Endlosschleife, die die Funktionen "checkIfDeleted" und "checkIfEdited" alle 10 Sekunden ausführt
    checkIfDeleted
    checkIfEdited
    sleep 10
done

Ja, ich weiß, welche Probleme das Skript mit sich bringt, aber ich habe ein anderes Problem:

Wenn jemand das Skript nutzen möchte, muss er die Pfade seiner Dateien einfügen und sogar neue Variablen definieren.

Man könnte das doch so machen, dass das Skript die Liste des Ordners einliest und dann auf alle Dateien direkt zugreifen muss, ohne dass man sie in das Skript einfügen muss.

Also irgendwie mit dem Befehl "ls". Ich weiß aber nicht, wie ich das implementieren soll.

Kann mir wer helfen bitte?

Visual Basic, Linux, HTML, Webseite, VBA, Bash, Batch, cmd, Code, lua, MySQL, PHP, Programmiersprache, Python, Script, Python 3
3 Antworten

Meistgelesene Beiträge zum Thema Webseite
Mehr meistgelesene Fragen zu Webseite