Webseite – die neusten Beiträge

Dropdown auf iMac funktioniert nicht, wasmuss ich ändern?

Ich habe ein Dropdown-Menü erstellt, welches auch auf allen von mir getesteten Browsern funktioniert ( Firefox, Chrome, Edge, Opera, Vivaldi, Tor). Nun bekam ich die Rückmeldung: Funzt NICHT auf Safari. Habe mir die URALT Version von Safari für Windows heruntergeladen; Das Ergebnis ist katastrophal null Reaktion auf Auswahl!

Habe den Quelltext aus dem Internet und nur meinen Bedürfnissen angepasst.

css

#menu,#menu ul{list-style:none;padding:0;}
#menu li{margin:5px 10px;}
#menu a{text-decoration:none;outline:none;display:block;color:#777;padding:5px 14px}
#menu a:hover,#menu a:focus{color:black; background:orange;}
#menu .hider{overflow:hidden}
#menu .sub ul{margin-top:-200%;transition:.5s;-webkit-transition:.5s}
#menu .sub a:focus ~ .hider > ul,#menu ul:hover{margin-top:0;}

ul {
   max-width: 12em;
}

ul ul {
   max-width: 12em;
   border: 2px solid orange;
}

ul ul ul{
   max-width: 12em;
   border: 2px solid green;
}
//ul ul ul:hover {background-color:white;}

ul ul li {
   background-color: Gainsboro;
   margin: 2px;
   z-index:1;
} 

php

<ul id="menu">
   <li class="sub"><a href="#">Select Order by</a>
      <div class="hider">
         <ul>
            <li><a href="image_1.php";>Listing</a></li>
            <li><a href="image_self.php";>Own Selection</a></li>
            <li class="sub"><a href="#">Inventory No.</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php";>Numerical</a></li>
                     <li><a href="image_from.php">from - to</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Title</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Title">Alphabetical</a></li>
                     <li><a href="title_from.php">Letter Selection</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Art Typ</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=ArtTyp">Alphabetical</a></li>
                     <li><a href="art_from.php">Selected</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Art Series</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Category">Alphabetical</a></li>
                     <li><a href="cat_from.php">Selected<br>Search in all Entries</a></li>
                     <li><a href="series_from.php">  Selected<br>Search in Art Series Menu<a><li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Media</a>
               <div class="hider">
                  <ul>
                     <li><a href="image_2.php?order=Medium">Alphabetical</a></li>
                     <li><a href="media_from.php">Selected</a></li>                           
                  </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Dimension</a>
               <div class="hider">
                  <ul>
                     <li><a href="dim_from.php?dim=height">height<br>from - to</a></li>
                     <li><a href="dim_from.php?dim=width">width<br>from - to</a></li>                           
                 </ul>
               </div>
            </li>
            <li class="sub"><a href="#">Exhibition</a>
               <div class="hider">
                  <ul>
                     <li><a href="exhibition.php?Time=now">Currently on Display</a></li>
                     <li><a href="exhibition.php?Time=all">All Artworks<br>Order by Exhibitors</a></li>
                     <li><a href="aussteller.php">Selected<br>by Exhibitor</a></li>                           
                  </ul>
               </div>
            </li>
         </ul>
      </div>
   </li>
   <li class="sub"><a href="#">Image Info</a>
      <div class="hider">
         <ul>
            <li><a href="image_info.php">all</a></li>
            <li><a href="image_infrom.php">from - to</a></li>                  
         </ul>
      </div>
   </li>
</ul>

Was muss ich wie ändern oder ergänzen damit es auch auf dem iMac / Safari läuft? Wie oben gesagt alle anderen Browser einwandfrei!

HTML, Webseite, CSS

Problem mit PHP-Composer: Was ist schief gelaufen?

Versuche hier grade auf meinem Server 2 verschiedene Librarys mithilfe von Composer zu installieren.

Leider ist wohl irgendwas bei der Installation von Composer gehörig schief gelaufen: Ich konnte zwar zunächst eine Library erfolgreich installieren aber es fing damit an, dass ich alle Composerdateien im /root Verzeichnis hatte. Diese wollte ich dann via Terminal nach /var/www/html verschieben (dabei muss aus irgendwelchen Gründen eine dazugehörige autoload.php verloren gegangen sein) also den kompletten Composerordner gelöscht und alles versucht neu zu installieren und aus der noch vorhandenen composer.phar versucht die Dateien neu zu extrahieren und dabei laut Terminal sogar auf die neueste Composer Version upgegradet: Dies hat zum Teil geklappt, nur eine extrem wichtige "composer.json" wurde dabei nicht erstellt. Also zunächst mal mit mehreren verschiedenen Anleitungen versucht diese manuell zu erstellen (was ja anscheinend in 5 Minuten problemlos möglich ist).

Naja das Problem ist nun, dass ich irgendwo festsitze. Ich habe die Anleitungen im Netz befolgt, aber bisher hab ich weder genau kapiert wieso diese extrem wichtige Datei nach erneuter Installation fehlt, noch was genau in diese Datei reingeschrieben werden muss oder per Script reingeschrieben wird (Name des Projekts? die Pfade (Namespaces?) der Packages, die ich installieren möchte?), noch wie ich folgenden Fehler beheben kann:

In ArrayLoader.php line 44:

Unknown package has no name defined ([]).

Diesen Fehler bekomme ich nun seit Stunden, egal was ich mit Composer versuche, auch wenn ich einfach versuche zu debuggen oder eine erneute Installation probiere...

Irgendwelche Ideen oder Ahnungen was hier falsch gelaufen ist?

Internet, Linux, IT, Webseite, programmieren, PHP, Putty, Script, ssh, Terminal, Composer, Kommandozeile, Debian 10

Wieso wird diese Webseite in React ohne Header und Footer gerendert?

Zur Aufgabe: Man soll drei Komponenten haben: Header, Main und Footer. Diese drei Komponenten müssen dann in die MainView und die MainView in die App.

Wenn ich die Webseite lade, ist zwar alles gut soweit, aber wenn ich über die Navigation auf Kontaktseite z.B. klicke, werden weder Footer noch Header angezeigt. Kann mir jemand bitte helfen?

import React from 'react';
import { Link } from 'react-router-dom';
import '../App.css';

const Header = () => (
  <header>
    <div id="logo">
      <Link to="/startseite">
        <img src="/img/Chicolio_Logo_trs_thumbnail.png" alt="Logo" />
      </Link>
    </div>
    <h1>Startseite</h1>
    <nav>
      <Link id="homepage" to="/startseite">Startseite</Link>
      <span>|</span> {/* Vertikaler Strich als visuelle Trennung */}
      <Link id="contactpage" to="/kontakt">Kontakt</Link>
      <span>|</span>
      <Link id="impressum" to="/impressum">Impressum</Link>
      <Link id="shoppingcart" to="/warenkorb">Warenkorb</Link>
    </nav>
  </header>
);

export default Header;

import React from 'react';
import '../App.css';

const Footer = () => (
  <footer className= "footer">
    <div>
      <p>&copy; Unsere Namen - 2024</p>
    </div>
  </footer>
);

export default Footer;

import React from 'react';
import Startseite from './Startseite';

const Main = () => {
  return (
    <div>
      <Startseite />
    </div>
  );
};

export default Main;

import React from 'react';
import Header from './Components/Header';
import Footer from './Components/Footer';
import Main from './Components/Main';
import './App.css';

const MainView = () => {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
};

export default MainView;

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import MainView from './MainView';
import Warenkorb from './Components/Warenkorb';
import Impressum from './Components/Impressum';
import Produkt from './Components/Produkt';
import Startseite from './Components/Startseite';
import Kontakt from './Components/Kontakt';
import './App.css';

// Wurzel-Appkomponente
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<MainView />} />
        <Route path="/warenkorb" element={<Warenkorb />} />
        <Route path="/impressum" element={<Impressum />} />
        <Route path="/produkt/:id" element={<Produkt />} />
        <Route path="/startseite" element={<Startseite />} />
        <Route path="/kontakt" element={<Kontakt />} />
      </Routes>
    </Router>
  );
}

export default App;

Das ist, wenn man nach dem Browsen in der Navigation auf Startseite klickt.

Und das wird direkt beim Öffnen angezeigt:

Bild zum Beitrag
HTML, Webseite, JavaScript, Webentwicklung, React, node.js

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

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

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

Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?

Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.

Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:

details summary::-webkit-details-marker {
        background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }    

    details[open] summary::-webkit-details-marker,
    details[open] summary::marker {
      background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }

Oder geht dies NUR mit einem ::after pseudo.element.

Könnt ihr mir es bitte mal zeigen?

<summary>Menü</summary>
   <ul>
       <li><a href="">Impressum &amp; rechtliches</a></li>
       <li><a href="">Website Erika Mustermann</a></li>
       <li><a href="">Blog Max Mustermann</a></li>
       <li><a href="">Blog Erika Mustermann</a></li>
   </ul>
</details>

Zusätzlich zu diesem Sandwich-Button würde ich in kleiner 
Schrift unter dem Botton dann noch Menü stehen haben.

Könnt ihr mir bitte helfen?

Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema Webseite