Verwandte Themen

Frage
von Paddy364
16.05.2024, 18:33
HTML: Wie kann ich die Titelbox verschieben?

Hey,

ich verzweifle mittlerweile an meinen eigenen Sinnen und hab schon manches probiert. Das Einbinden von KI (ChatGPT) hat mir dann den Rest gegeben, da alles was davon kam einfach keinen Sinn ergab.

Ich habe zwei Container, also left-colum und right-colum.

Wie man in dem Code sehen kann, wird die Klasse "whatis-titlebox" im ersten Teil korrekt angezeigt. Es wird das Szenario eintreten, dass die linke Spalte leer beiben wird und nur die rechte mit Text gefüllt wird.

Dazu dachte ich mir, kopiere ich den Standardteil und spreche die Kopie dann mit "rightinput" um eben "whatis-titlebox" aus dem 2. Teil, also "rightinput whatis-titlebox" über die rechte colum zu legen, sodass der Text darin linksbündig mit dem Text sichtbar wird. Fehlanzeige, ich habe es nicht geschafft. Vielleicht ist mein Code auch einfach nur falsch geschrieben.

Ich blicke da nicht mehr durch und hoffe, dass ich hier Hilfe erhalte.

HTML:

<div class="leidfadenmain-input">
    <div class="whatis">
        <div class="whatis-titlebox">
            <h2 class="whatis-title-txt">Über</h2>
        </div>
        <div class="container">
            <div class="left-column">
                <!-- Linker Text -->
                <p class="whatis-txt"></p>
                <p class="whatis-txt"></p>
            </div>
            <div class="divider"></div>
            <div class="right-column">
                <!-- Rechter Text bei Bedarf -->
                <p class="whatis-txt"></p>
            </div>
        </div>
    </div>

    <div class="whatis">
        <div class="rightinput whatis-titlebox">
            <h2 class="whatis-title-txt">Über</h2>
        </div>
        <div class="container">
            <div class="left-column">
                <!-- Linker Text -->
            </div>
            <div class="divider"></div>
            <div class="right-column">
                <!-- Rechter Text bei Bedarf -->
                <p class="whatis-txt"></p>
            </div>
        </div>
    </div>
</div>

CSS:

.leidfadenmain-input {
    padding-top: 100px;
    display: flex;
    flex-direction: column;
}

.whatis {
    display: flex;
    flex-direction: column; /* Ändert die Ausrichtung auf vertikal */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.whatis-txt {
    padding-bottom: 15px;
}

.whatis .whatis-titlebox {
    position: relative;
    margin-bottom: 20px;
    top: 0;
}

.rightinput .whatis-titlebox {
    margin-bottom: 20px;
    top: 0;
    left: 50%; /* Zentriert die Überschrift horizontal */
    transform: translateX(-50%); /* Zentriert die Überschrift horizontal */
}

.whatis .whatis-title-txt {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.whatis .left-column,
.whatis .right-column {
    width: 45%;
}

.whatis .divider {
    width: 1px;
    height: auto;
    background-color: black; /* Ändere die Farbe bei Bedarf */
    margin: 0 10px;
}

.whatis .container {
    display: flex;
    align-items: stretch;
    width: 100%;
}

Einfach erklärt.: ".rightinput .whatis-titlebox" soll, sofern gebraucht, über right-colum platziert werden.

Sofern ihr mir weiterhelfen könntet, wäre ich euch dankbar!

Vielen Dank!

Liebe Grüße

HTML, Webseite, CSS, Code, Webdesign, Webentwicklung
1 Antwort
Frage
von SalatAufemBrot
14.05.2024, 19:59
Frage wurde 1 Mal erneut gestellt
Mit Bildern
Mit Umfrage
Wünscht ihr euch auch dieses Buttonformat zurück?

Mir geht es sehr gegen den Strich, dass viele Anwendungen (wie auch gutefrage.net) die Buttons neuerdings 100% abrunden ... das sieht nicht nur klobig aus (da die runden Buttons breiter sind und so durch die größeren Rundungen Platz verloren geht), sondern wirkt auch unnatürlich: Genauso wie in der Natur nichts 100% eckig ist, ist dort auch wenig 100% abgerundet.
Die Änderung zerstört auch einen bestehenden Konsens über Web-Designsprache, die im Netz bisher eigentlich übereinstimmend verwendet wurde:

Tags waren diesem Konsens nach abgerundete Vierecke. Tags sind oft in Rastern angeordnet, bestehend aus >10 Einheiten; durch die Abrundung werden diese Raster etwas aufgelockert und wirken "luftiger". Hier ist es daher sogar wünschenswert, wenn die verfügbare Fläche nicht 100% genutzt wird.

Buttons hingegen waren nur ca. 20% abgerundet, wodurch sie massiver wirken und in Menüs hervorstehen. Anders als Tags existieren Buttons meistens nur einzeln oder paarweise, weshalb bei ihnen nicht die Aufklockerung des Gesamtgefüges, sondern die Betonung des einzelnen Elements im Vordergrund stehen sollte.

Webseiten wie gutefrage.net weichen diesen Konsens zunehmend auf, YouTube ist sogar soweit gegangen ihn mit der Implementierung von Material UI 3 vollständig umzukehren.

Bild zu Frage
Könnte mir nicht egaler sein 76%
Ja 18%
Dieser Post ist m.E.nur ein Versuch, Nostalgie zu rationalisieren 6%
Nein 0%
Internet, App, Kunst, Google, Designer, HTML, IT, Webseite, Design, CSS, Update, Webdesign
5 Antworten
Frage
von DeinWaifuu
14.05.2024, 22:23
Mit Links
PHP: Login-System funktioniert nicht?

Hey, ich bin als Schüler gerade mit einem Partner dabei, an einem Projekt für den Informatikunterricht zu arbeiten. Aktuell arbeiten wir daran, dass man sich als Benutzer auf der Webseite anmelden kann.

Das Registrieren funktioniert bereits und als Vorlage diente uns dazu dieses Video:

https://www.youtube.com/watch?v=bNwT7pqVzDc

Nun sind in der Datenbank sowohl Benutzername als auch Passwort eingetragen. Als Benutzer soll man sich nun anmelden können und dann auf home.php weitergeleitet werden. Als Vorlage zum Anmelden verwendeten wir dieses Video:

https://www.youtube.com/watch?v=HrLucaAHLm8

Das Problem:

Wenn man versucht, sich auf der Webseite anzumelden, erscheint die Meldung "Passwort stimmt nicht ueberein", obwohl es übereinstimmen sollte. Hier ist der Quelltext:

<?php

 require("connection.php");

 if(isset($_POST["submit"])){

   $Benutzername = $_POST["Benutzername"];

   $Passwort = $_POST["Passwort"];

   $stmt = $con->prepare("SELECT * FROM Angestellten_Benutzer WHERE Benutzername=:Benutzername");

   $stmt->bindParam(":Benutzername", $Benutzername);

   $stmt->execute();

   $userExists = $stmt->fetchAll();

   $passwordHashed = $userExists[0]["Passwort"];

   $checkPassword = password_verify($Passwort, $passwordHashed);

   if($checkPassword === false){

     echo "Passwort stimmt nicht ueberein";

   }

   if($checkPassword === true){

     session_start();

     $_SESSION["Benutzername"] = $userExists[0]["Benutzername"];

     header("Location: home.php");

   }

 }

?>

<html lang="de">

<head>

   <meta charset="UTF-8">

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Anmelden</title>

   <link rel="stylesheet" href="style.css">

</head>

<body>

   <form action="pp.php" method="POST">

       <h1>Anmelden</h1>

       <div class="inputs_container">

           <input type="text" placeholder="Benutzername" name="Benutzername" autocomplete="off">

           <input type="password" placeholder="Passwort" name="Passwort" autocomplete="off">

       </div>

       <button name="submit">Anmelden</button>

   </form>

</body>

</html>

Ich würde mich sehr über eine Korrektur dieses Codes freuen. Der Validator sowie die KI scheinen keine Lösung für das Problem zu haben und keine Probleme zu erkennen. Danke!

SQL, Webseite, programmieren, Datenbank, PHP
3 Antworten
Frage
von webdevgf
14.05.2024, 19:18
Mit eigener Domain kostenlose Email Server möglich?

Ich versteh nicht ganz wie Email funktioniert im Hintergrund.

ich habe normalerweise ein Webhosting Paket wo alles schon mit einer Inklusiv Domain Verknüpft ist.

Man kann mit Oberfläche seine Postfächer anlegen, die Webmail Anwendung nutzen oder über die imap smtp ein/ausgangsserver die Mails in seiner Eigenen Email Anwendung anzeigen / verschicken usw.

Wenn ich einen VPS von Ionos für 1€ miete müsste ich das selber machen ?

dann gehen die keine ahnung 5gb nicht nur für Apache/Nginx das ich installieren muss drauf und die Website an sich sondern

das muss ich auch teilen mit irgendeiner email software.

Und würde es auch so gehen das ich mir eine Domain miete für 0.5ct 12 Monate bei Strato.

Meine NextJs Webapp bei Vercel Deploy mit dieser Domain kann man ja einrichten wenn man irgendwas an den Dns einstellungen macht, sollte nicht schwer sein.
Und dann als extra irgendwo kostenlos mit

dieser domain irgendwo postfächer erstellt auch wenn es nur 1gb sind.

zb info@mustermann.de , und dann bei web.de umsonst gehostet.

Website umsonst bei vercel

Und die cents strato Domain zeigt auf vercel.

Ich will versuchen die kosten zu minimieren da normale Pakete Overkill für mich sind und ich so Freunden/Bekannten auch helfen kann einzusteigen.

Es ist auch attraktiv wenn ich Kunden habe die selber neu selbstständig sind und wenig geld haben.

Besser einen armen Kunden die Seite erstellen ohne Monatliche Kosten bis auf Domain 1 cent / 1 jahr danach 1€ statt garkeinen kunden weil er nicht 6€ pro monat ausgeben will für hosting domain ssl email.

Wenn es mit Wordpress sein soll kommt man nicht drumherum dann kommen auch noch 15€ für Plugins und Page Builder dazu.

Schon sind wir bei 250€ Im Jahr

Server, Homepage, Linux, E-Mail, HTML, IT, Webseite, WordPress, JavaScript, Informatik, PHP, Webentwicklung, Webhosting, React, github, Angular
2 Antworten
Frage
von webdevgf
08.05.2024, 16:59
NextJS-Backend/Datenbank?

Ich habe eine Anwendung, wo sich ein Nutzer mit Auth0 registrieren kann.

Es zeigt den Namen und die E-Mail ganz normal an und mit

/api/auth/login
/api/auth/logout

kann man sich anmelden/abmelden.

Nun sollen alle Nutzer XP-Punkte haben (bei 0 starten) und durch Fragen beantworten im Level aufsteigen können. Bzw. ich möchte ganz simpel erst einmal mit einem Buttonklick 25 XP-Punkte dazu verdienen.

Das Ganze kriege ich normalerweise mit PHP und einer normalen SQL-Datenbank, die ich in phpMyAdmin einrichte, hin, aber da ich in NextJS neu bin, wollte ich wissen, wie das da abläuft.

Vercel liefert soweit ich weiß keine Datenbank, wo ich Nutzerdaten hinschicken kann und Auth0 kann auch nicht mehr, als nur ein sicheres Loginsystem bieten.
Also müsste ich die SQL-Datenbank wie immer anlegen und mit dem user-Objekt von Auth0 arbeiten und die "sid" benutzen, um die Punkte dem richtigen User zuzuschreiben?

Ich weiß, dass MongoDB beliebt ist, aber das ist doch auch wieder extern irgendwo und kostet Geld und ist nicht auf einem "Standard" Webhosting inklusive, wie PHP/SQL-Datenbank.

Wie benutzt man MongoDB und ist das sinnvoll?

Für Next brauche ich kein VPS, was praktisch ist. Keine zusätzlichen Kosten und lange Einrichtung. Dafür SSR.

NextJS ist auch selber das Backend soweit ich weiß, also ich kann direkt in der Serverkomponente eine Datenbankabfrage machen und mit Node etwas zu der Datenbank hinzufügen, wie das mit dem Klick +25 XP.

Von Firebase habe ich gehört, dass es beides kann: Sowohl sichere Authentication als auch Datenbank für Nutzerdaten.

Aber ob das bei wenigen Nutzern Geld kostet weiß ich nicht.

Server, App, Linux, SQL, HTML, Webseite, JavaScript, Datenbank, Informatik, MySQL, Programmiersprache, Webentwicklung, MongoDB
2 Antworten

Meistgelesene Fragen zum Thema Webseite
Mehr meistgelesene Fragen zu Webseite