Float box design + script fehler suche.

Sempervivum

Erfahrenes Mitglied
Wenn ich eine ruhige Minute habe, teste ich es selber mal.
Das Smartphone-Problem habe ich jetzt übrigens lösen können. Es war wie so oft: Feste Abmessungen sind der Feind des resp. Layouts und da gab es noch einige. Poste ich dann ebenfalls, wenn ruhige Minute ...
 

Sempervivum

Erfahrenes Mitglied
Zum Kontaktformular: Da hatte ich das Problem, dass die beiden Variablen nicht definiert sind, wenn kein Submit vorliegt. Lösung, indem man sie ganz am Anfang, vor dem if für das submit, definiert:
Code:
<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
// PHP-Mailer hinzufügen
use PHPMailer\PHPMailer\PHPMailer;
require_once 'contactform/Exception.php';
require_once 'contactform/PHPMailer.php';

const RECEIVER = 'ulr.ba@gmx.net'; //<---
const HTML_ERROR_START = '<div class="alert alert-danger" role="alert"><p class="m-0">';
const HTML_ERROR_END = '</p></div>';
const HTML_SUCCESS_START = '<div class="alert alert-success" role="alert"><p class="m-0">';
const HTML_SUCCESS_END = '</p></div>';
$errors = [];
$success = false;
/**
 *  1. Überprüfung, ob das Formular abgesendet wurde, denn wir erhalten die Daten erst, wenn das Formular abgesendet wurde.
 */
if (isset($_POST['submit'])) {
    /**
     *  2. Alle Eingangsdaten filtern
     *  - Dazu verwenden wir die Funktion htmlspecialchars()
     *  - die Funktion trim() wird genutzt, um alle Leerzeichen am Anfang und Ende des Strings (Zeichenkette) zu entfernen
     */
    $name = htmlspecialchars(trim($_POST['name']));
    $email = htmlspecialchars(trim($_POST['email']));
    $subject = htmlspecialchars(trim($_POST['subject']));
    $message = htmlspecialchars(trim($_POST['message']));
    // Empfänger, nur zum Testen
    //$receiver = htmlspecialchars(trim($_POST['receiver'])); <---
    /**
     *  3. Kriterienprüfung
     *  - Kriterien, wie z.B., wie viele Zeichen müssen mindestens eingegeben werden, ...
     *
     *  Was brauchen wir dafür?
     *  1. Array, welches die ganzen Fehler zugeordnet bekommt
     *
     *  Beachte:
     *  Alle Daten, welche durch das Formular abgesendet werden, sind erstmal Strings, dies heißt, dass man diese zuerst in deren gewünschten Typ umwandeln muss
     */
    /**
     *  input textfeld | name="name"
     *  Typ: string
     *  Kriterien: mindestens 3 Zeichen lang
     */
    if (empty($name)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihren Namen an!' . HTML_ERROR_END;
    } else if (strlen($name) < 3) {
        $errors[] = HTML_ERROR_START . 'Der Name muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
    }
    /**
     *  input emailfeld | name="email"
     *  Typ: string
     *  Kriterien: mindestens 7 Zeichen lang
     */
    if (empty($email)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie Ihre E-Mail-Adresse an!' . HTML_ERROR_END;
    } else if (strlen($email) < 7) {
        $errors[] = HTML_ERROR_START . 'Die E-Mail-Adresse muss mindestens 7 Zeichen lang sein!' . HTML_ERROR_END;
    } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie eine gültige E-Mail-Adresse an!' . HTML_ERROR_END;
    }
    /**
     *  input textfeld | name="subject"
     *  Typ: string
     *  Kriterien: mindestens 3 Zeichen lang, maximal 50 Zeichen lang
     */
    if (empty($subject)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie einen Betreff an!' . HTML_ERROR_END;
    } else if (strlen($subject) < 3) {
        $errors[] = HTML_ERROR_START . 'Der Betreff muss mindestens 3 Zeichen lang sein!' . HTML_ERROR_END;
    } else if (strlen($subject) > 50) {
        $errors[] = HTML_ERROR_START . 'Der Betreff darf maximal 50 Zeichen lang sein!' . HTML_ERROR_END;
    }
    /**
     *  textarea | name="message"
     *  Typ: string
     *  Kriterien: mindestens 10 Zeichen lang (man kann erwarten, dass eine Nachricht länger als 10 Zeichen lang ist)
     */
    if (empty($message)) {
        $errors[] = HTML_ERROR_START . 'Bitte geben Sie eine Nachricht an!' . HTML_ERROR_END;
    } else if (strlen($message) < 10) {
        $errors[] = HTML_ERROR_START . 'Die Nachricht muss mindestens 10 Zeichen lang sein!' . HTML_ERROR_END;
    }

    // nur zum Testen
    // if (empty($receiver)) { <---
    //     $errors[] = HTML_ERROR_START . 'Bitte geben Sie die E-Mail des Empfängers an!' . HTML_ERROR_END;
    // }
    /**
     *  4. Überprüfung, ob Fehler vorhanden sind, wenn nicht, dann Mailversand ausführen
     *  - für den Mailversand verwenden wir den PHPMailer
     */
    if (count($errors) === 0) {

        $mailer = new PHPMailer();
        $mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
        $mailer->setFrom($email, $name); // Absenderemail und -name setzen
        $mailer->addAddress(RECEIVER); // Empfängeradresse <---
        $mailer->isHTML(true);
        $mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
        $mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
               <h4>E-Mail-Adresse: ' . $email . '</h4>
               <h2>Betreff: ' . $subject . '</h2>
               <p>' . nl2br($message) . '</p>'; // Inhalt der Email
        /**
         * Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
         */
        if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
    }
    if (count($errors) === 0) {
        $mailer = new PHPMailer();
        $mailer->CharSet = 'UTF-8'; // Charset setzen (für richtige Darstellung von Sonderzeichen/Umlauten)
        $mailer->setFrom($email, $name); // Absenderemail und -name setzen
        $mailer->addAddress(RECEIVER); // Empfängeradresse <---
        $mailer->isHTML(true);
        $mailer->Subject = 'Neue Nachricht vom Kontaktformular'; // Betreff der Email
        $mailer->Body = '<h3>Neue Nachricht von: ' . $name . '</h3>
               <h4>E-Mail-Adresse: ' . $email . '</h4>
               <h2>Betreff: ' . $subject . '</h2>
               <p>' . nl2br($message) . '</p>'; // Inhalt der Email
        /**
         * Überprüfung, ob Mail abgesendet wurde, wenn nicht: Fehlermeldung ausgeben, wenn ja: Erfolgsmeldung ausgeben
         */
        if (!$mailer->send()) {
            $errors[] = HTML_ERROR_START . 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es in ein paar Minuten nochmal!' . HTML_ERROR_END;
        } else {
            $success = HTML_SUCCESS_START . 'Ihre Nachricht wurde erfolgreich abgesendet!' . HTML_SUCCESS_END;
        }
    }
}
 

Sempervivum

Erfahrenes Mitglied
So, mit der Smartphone-Darstellung bin ich jetzt fertig. Hier ist meine Testseite, dort kannst Du das HTML und CSS einsehen und herunter laden:
https://webentwicklung.ulrichbangert.de/andrin.spitzer/index-4.phpDamit es übersichtlicher wird, habe ich das CSS in zwei Dateien aufgeteilt, eine für die Nav und die andere für den Rest.
Beim Testen bin ich mit einem Nachteil der Lösung, dass man nur den main-Container scrollt, konfrontiert worden: Beim Neuladen scrollt der Browser nicht an die alte Stelle. Vor allem nach dem Abschicken des Formulars ist das ärgerlich. Da müsste man vielleicht etwas mit Javascript machen oder das Formular mit Ajax abschicken.
Das mit dem Button ist kein Problem, ich sehe es mir später an.
 

Andrin.Spitzer

Erfahrenes Mitglied
So, mit der Smartphone-Darstellung bin ich jetzt fertig. Hier ist meine Testseite, dort kannst Du das HTML und CSS einsehen und herunter laden:
https://webentwicklung.ulrichbangert.de/andrin.spitzer/index-4.phpDamit es übersichtlicher wird, habe ich das CSS in zwei Dateien aufgeteilt, eine für die Nav und die andere für den Rest.
Beim Testen bin ich mit einem Nachteil der Lösung, dass man nur den main-Container scrollt, konfrontiert worden: Beim Neuladen scrollt der Browser nicht an die alte Stelle. Vor allem nach dem Abschicken des Formulars ist das ärgerlich. Da müsste man vielleicht etwas mit Javascript machen oder das Formular mit Ajax abschicken.
Das mit dem Button ist kein Problem, ich sehe es mir später an.

Hay.

Habs mir angesehen und mir ist aufgefallen das einige elemente komplett anderst dargestellt werden.

ist das extra so?

Was war den genau der fehler?
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
Nein, das ist nicht extra so. Ich musste intensiv daran arbeiten, das Ganze responsiv zu bekommen und musste das HTML und CSS ziemlich stark umstellen. Dabei kann es passiert sein, dass einiges ein wenig anders aussieht als zuvor. Ich hatte mich aber sehr bemüht, alles wieder so einzurichten, wie vorher.
Beschreibe am besten, was nicht hinhaut, dann werde ich versuchen, es anzupassen.
 

Andrin.Spitzer

Erfahrenes Mitglied
Nein, das ist nicht extra so. Ich musste intensiv daran arbeiten, das Ganze responsiv zu bekommen und musste das HTML und CSS ziemlich stark umstellen. Dabei kann es passiert sein, dass einiges ein wenig anders aussieht als zuvor. Ich hatte mich aber sehr bemüht, alles wieder so einzurichten, wie vorher.
Beschreibe am besten, was nicht hinhaut, dann werde ich versuchen, es anzupassen.

Hay ich schätze deine Bemühung sehr.

eigentlich sind es nur die Logos die zu gross und nicht neben einander sind. :D
 

Sempervivum

Erfahrenes Mitglied
Waren die vorher nebeneinander? Das hatte ich dann übersehen.
...
Ich habe einen Blick auf deine Version online geworden und gesehen, dass immer zwei Bilder nebeneinander sind. Das werde ich noch anpassen. Außerdem habe ich selber bemerkt, dass der Platz zwischen den Containern kleiner ist als vorher. Werde ich auch noch ändern.
 

Andrin.Spitzer

Erfahrenes Mitglied
Hast du villeicht eine coole style idee wie ich folgendes umsetzten könnte.

Ich möchte bei den logos beim rwiter team einen hover effect bei dem wen ich über ein logo fahre dises irgendwie durch eine kurtz info über dieses team ersetzt wird. Vlt weisst du was ich meine.

Vlt sowasCube
 
Zuletzt bearbeitet: