Verwandte Themen

MrOsmo
25.10.2023, 01:20
Beitrag wurde 1 Mal erneut eingestellt
Mit Bildern
HTML und CSS Frage?

Hallo,

ich möchte die Grüne und gelbe Kärtchen im zweiten <section> nach oben in die MITTE schieben. Jedoch hakt es bisschen bei mir. Zudem müssen wir nur Flexbox benutzen das heisst kein margin oder position etc....

HTML_CODE:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <title>Flexbox</title>

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

</head>

<body>

  <header>

    <div class="layout2">

 <nav>

    <div class="container">

      <ul>

        <li>

          <a class="item1" href="#">LOGO</a>

          <a class="item" href="#">Menu 1</a>

          <a class="item" href="#">Menu 2</a>

          <a class="item" href="#">Menu 3</a>

          <a class="item2" href="#">Button</a>

        </li>

      </ul>

    </div>

  </nav>

 

</div>

</header>

<main>

  <div class="layout4">

  <section>

   

 

    <div class="laayout2">

     

      <div class="brownhelp"><div class="brownbox"></div></div>

      <div class="sectionone">

        <div class="content1">

          <div class="border"></div>

    <div class="border1"></div>

    <div class="border2"></div>

    <div class="border3"></div>

    <div class="border4"></div>

        </div>

  </div>

</div>

</section>

<section>

    <div class="laayout3">

  <div class="sectiontwo">

      <div class="content2">

        <div class="box"></div>

        <div class="box2"></div>

        <div class="box3"></div>

        <div class="box4"></div>

       

      </div>

    </div>

    </div>

</section>

</div>

</main>

</body>

</html>

CSS_CODE:

*{

  margin: 0;

  box-sizing: border-box;

}

header {

  background-color: #cae1fc;;

}

.layout2 {

  display: flex;

  align-items: center;

  justify-content: space-around;

  flex-direction: column;

}

.container {

  height: 150px;

  width: 1425px;

  background-color:rgb(80, 98, 104);

  display: flex;

  justify-content: space-around;

  align-items: center;

}

div ul {

  width: 100%;

}

div li {

  display: flex;

   justify-content: space-around;

   align-items:center;

  list-style: none;

}

.item {

  background-color: rgb(39, 185, 171);

  width: 120px;

  height: 50px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: large;

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  text-decoration: none;

 

}

.item1 {

  background-color: rgb(193, 67, 67);

  width: 115px;

  height: 50px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: large;

  display: flex;

  justify-content: center;

  flex-direction: column;

  text-align: center;

  text-decoration: none;

}

.item2 {

  background-color: rgb(112, 29, 189);

  width: 80px;

  height: 90px;

  color: #fff;

  font-weight: bold;

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

  font-size: small;

  display: flex;

  text-align: center;

  justify-content: center;

  flex-direction: column;

  text-decoration: none;

}

.layout2 > nav {

  height: 100vh;

}

nav {

  display: flex;

  align-items: flex-end;

  max-height: 170px;

}

/**/

.layout4 {

  background-color: #cae1fc;

}

.laayout2 {

  height: 1000px;

  display: flex;

  justify-content:space-around;

}

.sectionone {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  max-height: 345px;

  width: 270px;

 

}

.content1 {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 20px;

  background-color: #cae1fc;;

}

.border {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border1 {

  background-color: #fff;

  width: 225px;

  height: 45px;

}

.border2 {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border3 {

  background-color: #fff;

  width: 225px;

  height: 45px;

 

}

.border4 {

  background-color: #fff;

  width: 225px;

  height: 45px;

}

.brownhelp {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  max-height: 345px;

  width: 1200px;

}

.brownbox {

  background-color: burlywood;

  width: 1150px;

  height: 305px;

 

}

/*YELLOW*/

.laayout3 {

  display: flex;

  justify-content: space-around;

  align-items: flex-start;

  height: auto;

 

}

.sectiontwo {

  display: flex;

  width: 800px;

  justify-content: space-around;

  align-items: center;

}

.content2 {

  display: flex;

  justify-content: space-around;

  gap: 200px;

}

.box {

  background-color: yellow;

  width: 200px;

  height: 190px;

}

.box2 {

  background-color: green;

  width: 200px;

  height: 190px;

}

.box3 {

  background-color: yellow;

  width: 200px;

  height: 190px;

}

.box4 {

  background-color: green;

  width: 200px;

  height: 190px;

}

Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, PHP, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
sdeiss1977
25.10.2023, 07:49
Website-Analyse: Wie können "CVE"-Fehler behoben werden?

Ich habe eine Website und es wurde eine Analyse durchgeführt. Hier sind die Ergebnisse, die ich nicht interpretieren kann ("meine-website" in mail.meine-website.net habe ich als Platzhalter eingefügt):

- Problem: 

-- Finding: Detected CVEs for ISC BIND 9.11.4 with CVSS above 7.0 

-- Asset: mail.meine-website.net 

-- Description: The detected technology has CVEs with a CVSS score higher than 7.0. It should be prioritized for patching, and addressed as part of the evaluation of Vulnerabilities and Risk Management policies.

- Problem: 

-- Finding: Detected CVEs for OpenSSH 7.4 with CVSS above 7.0

-- Asset: mail.meine-website.net 

-- Description: The detected technology has CVEs with a CVSS score higher than 7.0. It should be prioritized for patching, and addressed as part of the evaluation of Vulnerabilities and Risk Management policies.

- Problem: 

-- Finding: Detected CVEs for Exim 4.95 with CVSS above 7.0

-- Asset: mail.meine-website.net 

-- Description: The detected technology has CVEs with a CVSS score higher than 7.0. It should be prioritized for patching, and addressed as part of the evaluation of Vulnerabilities and Risk Management policies.

- Problem: 

-- Finding: Detected CVEs for MySQL 5.7.23 with CVSS above 7.0

-- Asset: mail.meine-website.net 

-- Description: The detected technology has CVEs with a CVSS score higher than 7.0. It should be prioritized for patching, and addressed as part of the evaluation of Vulnerabilities and Risk Management policies.

Was muss ich konkret tun, um die Probleme zu beheben?

Webseite, Domain, Hosting, IT-Sicherheit, Mailserver
2 Antworten
MrOsmo
24.10.2023, 17:22
HTML/CSS?

Hallo,

ich möchte das container (das graue Box) ganz nach unten schieben. Aber es funktioniert nicht. ich habe schon align-items ausprobiert, justify-content aber es geht nicht(((((((. Vielleicht findet ihr einen Fehler in meinem Code. Bitte helft mir.

P.S Wir dürfen nicht margin, position etc. benutzen da diese Hausaufgaben nur mit Flexbox gemacht werden sollen (Unser aktuelles Thema).

CSS-CODE:

* {
    margin: 0;
    box-sizing: border-box;
}


.layout2 {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
}


.container {
    height: 150px;
    width: 1425px;
    background-color: rgb(80, 98, 104);
}


.item {
    background-color: rgb(39, 185, 171);
    width: 120px;
    height: 50px;
    color: #fff;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


.item1 {
    background-color: rgb(193, 67, 67);
    width: 115px;
    height: 50px;
    color: #fff;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


.item2 {
    background-color: rgb(112, 29, 189);
    width: 80px;
    height: 90px;
    color: #fff;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: small;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}


.item3 {
    background-color: rgba(112, 29, 189, 0);
    width: 80px;
    height: 110px;
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}


.box1 {
    background-color: burlywood;
    height: 150px;
    width: 900px;
    display: flex;
    justify-content: flex-start;
}

HTML-CODE:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox</title>
    <link rel="stylesheet" href="../CSS/style.css">
  </head>
  <body>
    <header>
      <div class="layout2">
        <nav>
          <div class="container">
            <ul>
              <li>
                <a class="item1" href="#">LOGO</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
  </body>
</html>

DAnkeschön LG

HTML, Webseite, CSS, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
1 Antwort
MrOsmo
24.10.2023, 15:52
Mit Bildern
HTML/CSS?

Hallo,

ich möchte Abstand nach unten, rechts, links beim header, aber ich darf nicht margin, position, gap etc. benutzen also nur flexbox (das ist ja auch unser aktuelles thema).

P.S. Es sollte am Ende wie auf Bild 2 aussehen

CSS-Code:

*{
 margin: 0;
 box-sizing: border-box;
}
.main {
 display: flex;
 justify-content: center;
}
.layout {
 display: flex;
 justify-content: center;
}
.container {
 height: 130px;
 width: 100%;
 background-color:rgb(80, 98, 104);
 display: flex;
 justify-content: space-around;
 align-items: center;
}
.item {
 background-color: rgb(39, 185, 171);
 width: 120px;
 height: 50px;
 color: #fff;
 font-weight: bold;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 font-size: large;
 display: flex;
 justify-content: center;
 flex-direction: column;
 text-align: center;
}
.item1 {
 background-color: rgb(193, 67, 67);
 width: 115px;
 height: 50px;
 color: #fff;
 font-weight: bold;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 font-size: large;
 display: flex;
 justify-content: center;
 flex-direction: column;
 text-align: center;
}
.item2 {
 background-color: rgb(112, 29, 189);
 width: 80px;
 height: 90px;
 color: #fff;
 font-weight: bold;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 font-size: small;
 display: flex;
 text-align: center;
 justify-content: center;
 flex-direction: column;
}
.item3 {
 background-color: rgba(112, 29, 189, 0);
 width: 80px;
 height: 110px;
 display: flex;
 text-align: center;
 justify-content: center;
 flex-direction: column;
}
.box1 {
 background-color: burlywood;
 height: 150px;
 width: 900px;
 display: inline;
 justify-content: flex-start;
 align-items: center;
 flex-direction: column;
 
}

Würde mich für schnelle Antworten freuen. Danke im Voraus!
LG

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
1 Antwort
Paddy364
22.10.2023, 21:54
flask: jinja2.exceptions.TemplateNotFound: index.html | Wie fixen?

Hallo zusammen,

nachdem ich jetzt Stunden, und zwar wirklich Stunden an nur einem, meiner Meinung nach unnötigem Problem gesessen habe, bitte ich nun um Hilfe.

Folgendes vorab: Nachdem ich die Datenbankkonfiguration ausgelagert habe, fing das Problem wieder an. Zuvor habe ich in die flask_app.py einfach folgendes eingetragen, was das Problem löste:

data = "Daten aus Python-Skript"

Ich persönlich arbeite mich ja in die Programmierung ein, habe aber das Gefühl, dass Flask irgendwie unnötig kompliziert ist. Aber das ist ja nicht wichtig.

Ich habe just for fun OpenAI mal über den Code laufen lassen: Zugegeben, ist das nicht die schlauste Option, aber nach 5 Stunden nur für diesen Code verzweifelt man doch etwas xD

Ich möchte Daten aus der Datenbank abrufen und auf der Webseite anzeigen lassen. Dazu existiert folgender Code:

Hauptverzeichnis/main.py:

from web.flask_app import app
from systm import main

if __name__ == '__main__':
    app.run(debug=True, host="0.0.0.0", port=5000)  # 5000 Standard

Hauptverzeichnis/systm/main.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__)


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Hier können Sie Daten aus Ihrem Python-Skript abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben
    return render_template('index.html', product_info=product_info)


# Route, um Produktinformationen anzuzeigen
@app.route('/products')
def display_products():
    # Informationen aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Informationen an das HTML-Template übergeben und anzeigen
    return render_template('products.html', product_info=product_info)


if __name__ == '__main__':
    app.run(debug=True)

Hauptverzeichnis/systm/d.py:

import mysql.connector

def create_db_connection():
    db = mysql.connector.connect(
        host="",
        user="",
        password="",
        database=""
    )
    return db

Hauptverzeichnis/web/flask_app.py:

from flask import Flask, render_template
from systm.d import create_db_connection

app = Flask(__name__, template_folder='web/templates', static_folder='web/static')


# Deaktivieren des Template-Caching
app.jinja_env.auto_reload = True
app.config['TEMPLATES_AUTO_RELOAD'] = True
app.config['STATIC_AUTO_RELOAD'] = True


# Datenbankverbindung initialisieren
db = create_db_connection()
cursor = db.cursor()


@app.route('/')
def display_data():
    # Daten aus der Datenbank abrufen
    cursor.execute("SELECT * FROM products")
    product_info = cursor.fetchall()

    # Diese Daten werden an die HTML-Datei übergeben und angezeigt
    return render_template('index.html', product_info=product_info)

Hauptverzeichnis/web/templates/index.html :

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="style/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Produktinformationen</h1>
    <table>
        <tr>
            <th>Produktname</th>
            <th>Verschlüsselungstyp</th>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% for product in product_info %}
        <tr>
            <td>{{ product[0] }}</td>
            <td>{{ product[1] }}</td>
            <!-- Weitere Spalten hinzufügen -->
        </tr>
        {% endfor %}
    </table>
</body>
</html>
HTML, Webseite, HTML5, Programmiersprache, Python, Webentwicklung, Python 3, Flask
1 Antwort
Laurin686
21.10.2023, 22:25
Schülerzeitung allgemeine Fragen (Das Fragezeichen nach dieser Klammer bekomme ich nicht weg…)?

Hallo,

ich bin Schüler in einer 10. Klasse und spiele mit den Gedanken, eine Schülerzeitung ins Leben zu rufen. Dazu habe ich ein paar Fragen;

  1. Ich würde die Seite gerne online zu Verfügung stellen. Auf den Schulserver wäre für mich aber keine Option, da ich vermute, dass diese dann ein Mitspracherecht haben möchte, was meinen Ziel einer unabhängige Zeitung nicht entspricht. Was wäre die beste Lösung? Wenn es mit kosten verbunden ist, wo bekomme ich das Geld her?
  2. Wie viel Zeitaufwand liegt beim erstellen einer monatlichen/wöchentlichen Ausgabe? Ich weiß, dass es davon abhängt wie viel man macht, ich würde aber gerne einen Mittelwert haben…
  3. In welchen Textformat sollte die Zeitung sein, sprich welches Format (PDF, doc, docx, odf, etc.) hat die beste Kompatibilität. Was Microsoft Programme wie Word angeht gibt es keine Probleme, da wir Office 365 von der Schule her haben. MacOS/iPadOS Formate werden nicht funktionieren, da nicht jeder in der Schule ein Mac/iPad hat. Wir haben keines von beiden gestellt, was aus meiner Sicht her auch nicht in absehbarer Zeit geschieht.
  4. was gibt es sonst noch zu beachten? Meine Idee war, auch eine Schnittstelle für Lehrer zu machen (es soll weiterhin unabhängig sein), wo täglich der vertretungsplan rein kommt; wie schwierig ist das?

Ich bin offen für konstruktive Kritik was die Fragestellung angeht, für meine Rechtschreibung entschuldige ich mich jetzt schon.

Ich würde gerne diese Fragen abklären, bevor ich meine Idee der Verwaltung meiner Schule vorstelle. Dann wirke ich auch gut organisiert…

vielen Dank

Schule, Webseite, Schüler, Schülerzeitung, Zeitung
1 Antwort
ErstelleProfil1
21.10.2023, 05:19
Beitrag wurde 1 Mal erneut eingestellt
Mit Links
Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

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


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>
Browser, Linux, HTML, IT, Webseite, JavaScript, Ubuntu, HTML5, Informatik, Programmiersprache, Webentwicklung, Frontend, React, node.js, React Native
1 Antwort

Meistgelesene Beiträge zum Thema Webseite
Mehr meistgelesene Fragen zu Webseite