Beiträge von Sempervivum

Sempervivum

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.

Sempervivum

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

Code

        .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;
        }

Alles anzeigen

Sempervivum

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

Code

    <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">

Alles anzeigen

Code

        * {
            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;
        }

Alles anzeigen

Sempervivum

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>:

Code

<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">

Alles anzeigen

Sempervivum

So hatte ich das nicht gemeint, versuche dies:

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

Sempervivum

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

index (index + 1) % slides.length;

Ebenso in prev.

Sempervivum

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!

Sempervivum

Anscheinend hast Du mein Posting #17 nicht gelesen.

Sempervivum

Ich denke eher nicht.

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

Code

//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?

Sempervivum

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()

Sempervivum

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.

Sempervivum

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

Code

$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:

Code

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';

Sempervivum

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.

Sempervivum

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.

Sempervivum

Neuer Versuch, ich habe aspect-ratio und object-fit verwendet:

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Dynamic Images</title>
    <style>
        .wrapper {
            display: flex;
        }

        .wrapper figure {
            flex-basis: 88px;
            flex-grow: 0;
            flex-shrink: 1;
            aspect-ratio: 88/64;
            margin: 0;
            border: 2px solid darkgray;
        }

        .wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            vertical-align: top;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <figure>
            <img src="images/88x64.jpg">
        </figure>
        <figure>
            <img src="images/64x64.jpg">
        </figure>
        <figure>
            <img src="images/88x64.jpg">
        </figure>
        <figure>
            <img src="images/64x64.jpg">
        </figure>
        <figure>
            <img src="images/88x64.jpg">
        </figure>
    </div>
</body>

</html>

Alles anzeigen

Sempervivum

PS: Nachdem ich deine Frage genauer gelesen habe, habe ich bemerkt, dass ich deine Absicht doch nicht richtig verstanden habe: Du möchtest auch für die schmaleren Bilder eine Breite von 88px erzwingen, d. h. die selbe wie die der breiteren, nicht wahr?

Sempervivum

Versuche ob das CSS in dieser Demo dein Problem löst (wobei ich hoffe, dass ich dein Absicht richtig verstanden habe):

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Dynamic Images</title>
    <style>
        .wrapper {
            display: flex;
        }

        .wrapper img {
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 1;
            /* Die Bilder haben per Default ein min-width und min-height
            von auto was sie daran hindert, zu schrumpfen.
            Wir müssen deshalb beides reduzieren. */
            min-width: 0;
            min-height: 0;
            border: 2px solid lightblue;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <img src="images/88x64.jpg">
        <img src="images/64x64.jpg">
        <img src="images/88x64.jpg">
        <img src="images/64x64.jpg">
        <img src="images/88x64.jpg">
    </div>
</body>

</html>

Alles anzeigen

Sempervivum

OK, sieh dir noch mal mein Posting #2 an, das CSS. Und hier werden die Zusammenhänge erklärt:

CSS/Tutorials/Selektoren/Kombinator – SELFHTML-Wiki

Und so funktioniert es dann:

modal1.png

Sempervivum

Dann versuche es noch Mal mit meinem Code und stell es online.

Ich habe schon gemerkt, dass in meinem Code einige schließende Divs fehlten. So sollte es besser sein:

Code

    <!-- The 1st Modal -->
    <div class="modal fade" id="myModal1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title">Modal 1</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
            </div>
        </div>
    </div>
    <!-- The 2nd Modal -->
    <div class="modal fade" id="myModal2">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title">Modal 1</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
            </div>
        </div>
    </div>

Alles anzeigen

Sempervivum

Das ist erst Mal nur ein Modal und funktioniert einwandfrei?

Beiträge von Sempervivum

Ein Drop Down Menu für mehrere Seiten eines Webs

Testimonial-Slider

Testimonial-Slider

Testimonial-Slider

Testimonial-Slider

Testimonial-Slider

Kontaktformular will nicht

Kontaktformular will nicht

Kontaktformular will nicht

Kontaktformular will nicht

Listenpunkte durch Fontawesome Symbole erstzen

Kontaktformular will nicht

Kontaktformular will nicht

Kontaktformular will nicht

Wie kann man erzwingen, dass die Höhe eines Flex-Elements im gleichen Verhältnis wie seine Breite schrumpft?

Wie kann man erzwingen, dass die Höhe eines Flex-Elements im gleichen Verhältnis wie seine Breite schrumpft?

Wie kann man erzwingen, dass die Höhe eines Flex-Elements im gleichen Verhältnis wie seine Breite schrumpft?

Zweites unterschiedlich aussehende Modale

Zweites unterschiedlich aussehende Modale

Zweites unterschiedlich aussehende Modale