• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Meine Einstellungen zur Schriftgrösse werden ignoriert, bzw. Grösse der Textfelder.

A

a.b_om

Neues Mitglied
Hallo Community

Ich hatte schon kleinere Projekt mit HTML und CSS, aber ein solches Problem ist bei mir noch nie eingetreten.
Ich mache eine Webseite, zum sehe, was ein Temperatur und Luftfeuchtigkeit Sensor misst. Leider passen meine Elemente nicht auf eine Seite. Ich möchte es ohne Scroll-bar auf der Seite. Dummerweise ist der Speichern-Button nach unten gerutscht.

5226

Ich habe danach versucht die Textfelder zu verkleinern und das funktionierte nicht über HTML und nicht über CSS.
Später, versuchte ich es mit den Schriftgrössen. Auch das funktionierte nicht. Die Schriftgrösse war vorher bei 30px, aber jetzt sollte es auf 25px schalten, aber die Schriftgrösse änderte sich nicht.

Mein HTML-Code:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Temperatur und Luftfeuchtigkeit</title>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    </head>
    <body>
        <div class="container">
            <h1 id="h1Titel" font="43px">Temperatur und Luftfeuchtigkeit</h1>
            <p id="pTemperatur" font="25px">Temperatur</p>
            <p id="pLuftfeuchtigkeit" font="25px">Luftfeuchtigkeit</p>
            <p id="AusgabeTemp" font="25px">--°C</p>
            <p id="AusgabeLuft" font="25px">--%</p>
            <span class="cbtn" id="e6" font="25px"><button id="buttonStart">Start</button></span>
            <span class="cbtn" id="e7" font="25px"><button id="buttonStop">Stop</button></span>
            <p id="pErklaerung1" font="25px">Grüner Temperaturen Bereich: zwischen</p>
            <textarea id="TempGruenMin" font="25px"></textarea>
            <p id="pUnd1" font="25px">und</p>
            <textarea id="TempGruenMax" font="25px"></textarea>
            <p id="pErklaerung2" font="25px">Grüner Luftfeuchtigkeiten Bereich: zwischen</p>
            <textarea id="LuftGruenMin" font="25px"></textarea>
            <p id="pUnd2" font="25px">und</p>
            <textarea id="LuftGruenMax" font="25px"></textarea>
            <span class="cbtn" id="e8" font="25px"><button id="buttonSpeichern">Speichern</button></span>
        </div>
    </body>
</html>

Mein CSS-Code:
CSS: 
.container
{
    display: grid;
    grid-template-columns: 33.33% 33.3% 33.3%;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
}
.cbtn
{
    display: flex;
    justify-content: center;
    align-items: center;
}
#e6
{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}
#e7
{
    grid-column: 3 / 4;
    grid-row: 4 / 5;
}
#e8
{
    grid-column: 2 / 3;
    grid-row: 9 / 10;
}
#h1Titel
{
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    text-align: center;
    font-size: 43px;
}
#pTemperatur
{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: center;
    font-size: 25px;
}
#pLuftfeuchtigkeit
{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    text-align: center;
    font-size: 25px;
}
#AusgabeTemp
{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    text-align: center;
    font-size: 25px;
}
#AusgabeLuft
{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    text-align: center;
    font-size: 25px;
}
#buttonStart
{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    text-align: center;
    font-size: 25px;
    width: 250px;
    height: 50px;
}
#buttonStop
{
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    text-align: center;
    font-size: 25px;
    width: 250px;
    height: 50px;
}
#pErklaerung1
{
    grid-column: 2 / 3;
    grid-row: 5 / 6;
    text-align: center;
    font-size: 25px;
}
#TempGruenMin
{
    grid-column: 1 / 2;
    grid-row: 6 / 7;
    text-align: center;
    font-size: 25px;
}
#pUnd1
{
    grid-column: 2 / 3;
    grid-row: 6 / 7;
    text-align: center;
    font-size: 25px;
}
#TempGruenMax
{
    grid-column: 3 / 4;
    grid-row: 6 / 7;
    text-align: center;
    font-size: 25px;
}
#pErklaerung2
{
    grid-column: 2 / 3;
    grid-row: 7 / 8;
    text-align: center;
    font-size: 25px;
}
#LuftGruenMin
{
    grid-column: 1 / 2;
    grid-row: 8 / 9;
    text-align: center;
    font-size: 25px;
}
#pUnd2
{
    grid-column: 2 / 3;
    grid-row: 8 / 9;
    text-align: center;
    font-size: 25px;
}
#LuftGruenMax
{
    grid-column: 3 / 4;
    grid-row: 8 / 9;
    text-align: center;
    font-size: 25px;
}
#buttonSpeichern
{
    grid-column: 2 / 3;
    grid-row: 9 / 10;
    text-align: center;
    font-size: 25px;
    width: 250px;
    height: 50px;
}

Ich komme einfach nicht weiter.

Danke schon im voraus für die Hilfe.
 
Wie kommst du darauf, dein Sylesheet so...
Code: 
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
einzubinden? In dieser Form habe ich es noch nie gesehen und ist nach meiner Meinung auch fasch!
Versuche es mal mit der Codezeile...
Code: 
<link rel="stylesheet" href="css/main.css">
Als nächstes ist die von dir verwendete Tagergänzung font="---px" ungültig - nutze also nur das Stylesheet um die font-size zu bestimmen.
 
Lieber Sailor

Ich mache etwas mit Python über Flask. Das HTML- und CSS-file sind nur implementiert. Ich habe das von dort übernommen(abgesehen von path).
Ich werde es ändern. Ich glaube aber, dass es nicht funktionieren wird,
weil meine Struktur vom Ordner so aussieht:
  • SensorModuleWebseite
    • app
      • pycache
      • static
        • main.css
      • templates
        • index.html
      • init.py
      • routes.py
    • pycache
    • venv
    • config.py
    • sensormoduleWebseite.py

Wenn es doch funktionieren soll, bitte melden.
 
Dem Browser, mit dem du deine Seite darstellen willst, ist es egal, wie und womit der Quellcode erzeugt wird - der Browser bekommt den Quellcode vom Server und muss dann damit klar kommen.
Ist dein HTML-Quellcode das, was dir von Plask angezeigt wird... oder ist das die Quellcodeansicht im Browser?
 
Sailor schrieb:
Dem Browser, mit dem du deine Seite darstellen willst, ist es egal, wie und womit der Quellcode erzeugt wird - der Browser bekommt den Quellcode vom Server und muss dann damit klar kommen.
Ist dein HTML-Quellcode das, was dir von Plask angezeigt wird... oder ist das die Quellcodeansicht im Browser?
Zum Vergrößern anklicken....
Ich hätte gedacht vom Flask. Nichts im Browser. Der Browser heisst Google Chrome.
 
Dann starte bitte mal deine Seite im Chrome, mache einen Rechtsklick auf die Seite (an eine Stelle, wo kein sichtbares HTML Element ist) und wähle dann im Kontextmenü den Punkt 'Seitenquelltext anzeigen'.
Das Ergebnis dann mal kopieren und hier einstellen.
Und vorher auch wieder den Ursprungszustand deiner Seite wieder herstellen.. ohne deine letzten Änderungen.
 
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Temperatur und Luftfeuchtigkeit</title>
        <link rel="stylesheet" href="/static/css/main.css">
    </head>
    <body>
        <div class="container">
            <h1 id="h1Titel" font="43px">Temperatur und Luftfeuchtigkeit</h1>
            <p id="pTemperatur" font="25px">Temperatur</p>
            <p id="pLuftfeuchtigkeit" font="25px">Luftfeuchtigkeit</p>
            <p id="AusgabeTemp" font="25px">--°C</p>
            <p id="AusgabeLuft" font="25px">--%</p>
            <span class="cbtn" id="e6" font="25px"><button id="buttonStart">Start</button></span>
            <span class="cbtn" id="e7" font="25px"><button id="buttonStop">Stop</button></span>
            <p id="pErklaerung1" font="25px">Grüner Temperaturen Bereich: zwischen</p>
            <textarea id="TempGruenMin" font="25px"></textarea>
            <p id="pUnd1" font="25px">und</p>
            <textarea id="TempGruenMax" font="25px"></textarea>
            <p id="pErklaerung2" font="25px">Grüner Luftfeuchtigkeiten Bereich: zwischen</p>
            <textarea id="LuftGruenMin" font="25px"></textarea>
            <p id="pUnd2" font="25px">und</p>
            <textarea id="LuftGruenMax" font="25px"></textarea>
            <span class="cbtn" id="e8" font="25px"><button id="buttonSpeichern">Speichern</button></span>
        </div>
    </body>
</html>
 
OK... dann ist diese mir unbekannte Schreibweise des href="..." eine Funktion deines Editors. Den tatsächlich ausgelieferten Pfad/Dateiname sieht du da ja jetzt selbst. Wird also am Ende richtig ausgeliefert.
Bleibt dein Problem mit der Schriftgröße.
Ich kann das leider nur bei mir lokal testen..... und hier kann ich durch Ändern der font-size Wertes im CSS für jedes Element die Schriftgröße problemlos einstellen... hast du dein Browser-Cache schon mal geleert und die Seite aktualisiert?
 
Es sollte auch klappen! Ich sehe zumindest keinen weiteren Fehler, der Das verursachen könnte.
Prüfe doch mal, was von deinen CSS Formaten tatsächlich im Browser ankommt.
Wieder im Chrome die Seite anzeigen lassen und dann mit Rechtsklick auf eines der sichtbaren HTML Elemente klicken und im Kontextmenü dann 'Untersuchen' auswählen.
Dann sollten sich der Inspektor der Webentwicklertools öffnen und in dem kannst du dann sehen, welches CSS für das gewählte Element angewendet wird... steht da die von dir gewählte 'font-size' ... und was passiert, wenn du diesen Wert dann direkt im Inspektor änderst?
 
Ja... sollte es auch. Da aber in dem CSS (noch) die 30px angegeben sind, ist davon auszugehen, dass der Browser deinen alten Stand in Sachen CSS hat!
Wenn du den Cache geleert hast, dann kann das eigentlich nur an deinem Editor liegen, dass von dort die alten Werte ausgeliefert werden.
Prüfe doch bitte mal genau nach, ob dort im Editor alles richtig abgeschlossen und gespeichert ist.
Hab leider keine Erfahrung mit Flask und kann dir da auch keine Hilfe anbieten.
 
Ich habe eine andere Variante zufällig durch einen anderen Post bekommen, der meine Frage falsch verstanden hatte bekommen. Ich habe es ausprobiert, und es klappte...
Ich änderte Font="25px" zu style="font-size:25px"
Link zu der Seite: HTML-Styles
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben