Beiträge von Sempervivum

Damit auch das CSS funktioniert musst Du noch die Klasse zuweisen:

<figure>
  <img src="img/galerie/dog/dog1.jpg" alt="Gerdtrud" />
  <figcaption class="overlay">Gerdtrud</figcaption>
</figure>

Ja genau, so habe ich mir das vor gestellt.

Die Überlappung liegt daran, dass Du die Höhe einer Seite deines Onepagers auf 100vh begrenzt hast. Die Galerie passt dort nicht hinein und steht oben und unten über.

Ich sehe zwei Möglichkeiten, dass zu beheben:

1. Du machst den Container mit der Galerie scrollbar. Auf dem PC funktioniert das, ist aber verwirrend für den Benutzer wenn zwei Scrollbar da sind. Auf dem Handy wird das Ganze ganz undurchschaubar.
2. Du hebst die Begrenzung der Höhe auf 100vh auf, also min-height statt height.

Wegen der Nachteile von 1. würde ich 2. bevorzugen.

Noch einige Anmerkungen zur Galerie:

Dort werden Listenelemente ul,li verwendet. "Liste" ist ein dehnbarer Begriff, aber IMO ist es wenig angebracht, das für alles und jedes zu benutzen. figure-Tags mit figcaption für das Overlay wären wesentlich passender.

Und was die Lightbox betrifft: Leider geht der Link zur Doku ins Leere, anscheinend wird diese nicht mehr richtig gepflegt. Selber empfehle ich gern Fancybox:

Fancybox | Best JavaScript lightbox alternative

Allerdings sehe ich bei der aktuellen Version einen Menüpunkt "Pricing", da müsste man prüfen, wie es mit der Lizenz aussieht.

Auf dem Smartphone scheint sich etwas zu überlappen, ist das das Problem, das Du meinst?

Ja, was m.scatello dir empfohlen hat ist eine empfehlenswerte und gebräuchliche Methode. Hier wird es genauer beschrieben:

PHP/Tutorials/Templates/Dateien mit include nachladen – SELFHTML-Wiki

Es gibt auch Lösungen mit Javascript aber die sind mit Sicherheit komplizierter.

Ich finde, es lohnt sich schon, einen lokalen Webserver zu installieren. Ist ja schnell gemacht und nicht besonders kompliziert.

In dem Fall handelt es sich nur um Dummies weil der Autor seine Menüs präsentieren will, ohne auf echte Unterseiten zu verweisen.

Aber Obacht, sieh dir mal das Datum an: Das CSS ist vollkommen veraltet, ist noch mit float realisiert. Vergiss diese Demos besser.

Hallo Jürgen,

Zitat

In den Beispielen mit DD-Menus, die im Internet mir angesehen habe, sind die weiterführenden Links "kastriert".

Da steht dann nur sowas wie a href="#nogo", also kein echter Link.

Das wäre dann ein seiteninterner Verweis auf einen Anker und es handelt sich wahrscheinlich um einen so genannten Onepager wo alle Seiten in einer HTML-Datei versammelt sind. (Es sei denn, die Links werden auf irgend eine Weise umgearbeitet.)

Poste doch mal die URL einer solchen Seite, dann kann man genaueres sagen.

Und für die next- und prev-Buttons wolltest Du wahrscheinlich translateY verwenden, damit sie vertikal richtig zentriert sind:

        .container #next,
        .container #prev {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 50px;
            width: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            background-color: #fff;
            color: #333;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 5px 10px #3337;
        }

        .container #next {
            right: -60px;
        }

        .container #prev {
            left: -60px;
        }

Dein Layout für die Slides kannst Du übrigens ein wenig vereinfachen und ganz ohne abs. Positionierung umsetzen:

    <div class="container">
        <div class="slide-container active">
            <div class="user">
                <img src="images/dia0.jpg" alt="">
                <div class="user-info">
                    <h3>John Doe</h3>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
                <i class="fa-solid fa-quote-right icon"></i>
            </div>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab
                ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem
                repudiandae esse officiis ad quaerat harum?
            </p>
        </div>
        <div class="slide-container">

        * {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-transform: capitalize;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 70px;
            background-color: #3498db;
        }

        .container {
            position: relative;
            perspective: 1000px;
        }

        .container .slide-container {
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 5px 10px #333;
            width: 450px;
            padding: 20px;
            margin: 10px;
            transform-style: preserve-3d;
        }

        .container .slide-container .icon {
            margin-left: auto;
            align-self: flex-start;
            font-size: 90px;
            color: #3498db;
        }

        .container .slide-container .user {
            display: flex;
            align-items: center;
        }

        .container .slide-container img {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }

        .container .slide-container .user .user-info h3 {
            color: #333;
            font-size: 20px;
        }

        .container .slide-container .user .user-info .stars i {
            color: #3498db;
            font-size: 15px;
        }

        .container .slide-container .text {
            color: #333;
            font-size: 14px;
            padding-top: 15px;
            font-style: italic;
        }

        .container .slide-container {
            display: none;
        }

        .container .slide-container.active {
            display: block;
        }

        .container #next,
        .container #prev {
            position: absolute;
            top: 50%;
            transform: translateX(-50%);
            height: 50px;
            width: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            background-color: #fff;
            color: #333;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 5px 10px #3337;
        }

        .container #next {
            right: -90px;
        }

        .container #prev {
            left: -60px;
        }

        .container #next:hover,
        .container #prev:hover {
            background-color: #333;
            color: #fff;
        }

Jetzt getestet und Visual-Studio-Code sowie der Seiteninspektor haben es an den Tag gebracht: Für den ersten Container fehlt ein schließendes </div>:

<body>
    <div class="container">
        <div class="slide-container active">
            <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/mann.jpg" alt="">
                    <div class="user-info">
                        <h3>John Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                    </div>
                </div>
                <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab
                    ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem
                    repudiandae esse officiis ad quaerat harum?
                </p>
            </div>
        </div> <!-- dies fehlte -->
        <div class="slide-container">

So hatte ich das nicht gemeint, versuche dies:

index = (index + 1) % slides.length;

Ohne das groß getestet zu haben würde ich sagen, dass hier ein Gleichheitszeichen fehlt:

index (index + 1) % slides.length;

Ebenso in prev.

Ich bin dann aber erst Mal raus, wegen der Sache mit den vielen Köchen. (Wie früher schon Mal).

Viel Erfolg noch und gutes Gelingen!

Anscheinend hast Du mein Posting #17 nicht gelesen.

Ich denke eher nicht.

Bei dem Code in #12 müssen auf jeden Fall Server und Passwort in Hochkommas, da es Strings sind:

//Username to use for SMTP authentication - use full email address for gmail
 $mail->Username = 'kontakt@ristorant-sicilia-reinheim.de';
  //Password to use for SMTP authentication
 $mail->Password = 'xgeheimx';

Ist das PHP noch gleich dem in #12?

Fehler 500 heißt fast immer, dass das Skript in einen Fehler läuft. Schalte die Fehleranzeigen ein, dass siehst Du mehr:

PHP Fehlermeldungen nutzen über error_reporting()

Selfhtml sagt dazu:

Zitat

Die Eigenschaft list-style ist eine Zusammenfassende Eigenschaft der möglichen Einzelangaben zu list-style-type, list-style-position und list-style-image.

HTML/Tutorials/Listen/Gestaltung mit CSS – SELFHTML-Wiki

Anscheinend streikt der Browser wenn Du nur eine Eigenschaft an gibst. Mit list-style-type sollte es funktionieren.

Jetzt haben wir wieder die Situation, dass es eine Fundsache ist, wo wir nicht genau wissen, wie aktuell und zuverlässig das ist. Wohler wäre mir wenn Du das originale Beispiel von Github genommen hättest.

Zitat

Zeilen 15 und 19 $fromName = 'Demo contact form'; Was muss da rein?

Weil eine Emailadresse manchmal etwa kryptisch sein kann, gibt es zusätzlich einen gut lesbaren Namen. Sieht in meinem Emailclient so aus:

email-name.png

Du kannst z. B. "Ristorante Sicilia" dort eintragen.

Zitat

Zeilen 26 damit ist wohl der smtp-server gemeint?

Ja.

Zitat

Zeile 90 Muss da was geändert werden?

Kann ich nicht beantworten. In dem originalen Beispiel auf Github wird der Hostname direkt eingetragen:

PHPMailer/examples/smtp.phps at master · PHPMailer/PHPMailer

The classic email sending library for PHP. Contribute to PHPMailer/PHPMailer development by creating an account on GitHub.

github.com

$mail->Host = 'mail.example.com';

Zitat

Zeilen 93 bis 105 muss ich wohl die Verschlüsselung angeben

Ja, Du musst die Daten angeben, die dein Provider verlangt.

Zitat

Zeile 7 Muss ich deshalb den ganzen Ordner zusätzlich auch noch hochladen?

Hier bin ich mir nicht vollständig sicher. Selber habe ich die Dateien aus dem Verzeichnis "src" hoch geladen und eingebunden:

include 'phpmailer/Exception.php';
include 'phpmailer/DSNConfigurator.php';
include 'phpmailer/OAuthTokenProvider.php';
include 'phpmailer/OAuth.php';
include 'phpmailer/POP3.php';
include 'phpmailer/SMTP.php';
include 'phpmailer/PHPMailer.php';

Ein Kontaktformular ist nicht so ganz ohne und mit ein wenig Copy&Paste oder Dateien einspielen ist es leider nicht getan. Auf der anderen Seite gibt es bei den Beispielen (examples) schon ein Kontaktformular (contactform.phps), was Du als Basis nehmen kannst. Diese Version setzt voraus, dass dein Provider einen lokalen Webserver zur Verfügung stellt. Prüfe, ob das bei deinem der Fall ist.

Zitat

dass ich leider was php angeht null Ahnung habe

Unter dieser Randbedingung ist es wenig empfehlenswert, einfach eine Fundsache aus dem Netz zu nehmen. Besser vorher fragen, was empfehlenswert ist. Die Antwort hast Du ja schon bekommen: Setze PHP-Mailer ein und dann sehen wir weiter.