[GELOEST] Neuling benötigt Hilfe bei Element ausrichtungen

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

Richi

Neues Mitglied
26 September 2020
20
0
1
37
Hallo,
ich stell mich mal kurz vor, ich heisse Ricardo bin 37j und komme eigentlich aus der Arduino Scene.
Aktuell sitze ich an einem Projekt mit einem ESP12E, kurz ESP genannt, dieser verfügt ja bekanntlich über WLAN, was ich auch nutze. Nun zum eigentlich Problem, ich habe für den ESP eines Sketch (Code) geschieben in dem ebenfalls zwei Internet Protokolle genutzt werden. index.html.cpp und main.js.cpp
Diese werden vom ESP geladen und mit Kontent gefüllt. Allerdings habe ich diese Seiten nicht selber erstellt, sondern aus einem anderen Code entnommen. Ich konnte zwar 2-3 kleine Änderungen an der Seite realisieren, aber bin dort schon am verzweifeln gewesen. Allein die Überschrift anzupassen hat mich glaube 2 Stunden gekostet und Sie ist immernoch nicht wie ich es wollte. Nun versuche ich seid Stunden einen neuen Abschnitt hinzuzufügen, aber ich komme einfach nicht mit der Aufteilung bzw. dem Aufbau klar. Ich sehe die fertige Seite ja immer erst nach dem hochladen auf den ESP wenn er Sie an den Browser sendet. Aktuell habe ich versucht mir wie folgt zu helfen.
1. Code auf den ESP geladen und Browser aktualisiert
2. angezeigte Internetseite gespeichert
3. den Quelltext mit Expression Web editiert wie gewollt (Grafisch meine ich)
4. Quellcode wieder in meinen Programmer Quellcode eingefügt und wieder auf den ESP geladen

Allerdings zeigt er teile der Seite ganz anders an als der Expression Web und ich hab keine Ahnung wieso, vermute aber es liegt mit dem CSS zusammen. Wovon ich gleich noch weniger Ahnung habe.
Da ich nun die Arduino/ESP Programmierung auch erst seid 2 1/2 Jahren mache und dort auch noch am lernen bin, komme ich an HTML und CSS aktuell nicht ran.

Somit suche ich hier nach jemandem der mehr Ahnung hat und mich hier etwas unterstützen würde.
Er soll mir keine neue Seite erstellen, lediglich was Editieren oder besser noch mir erklären wieso/weshalb/warum das dann so sein muss.

Ich hänge mal ein Bild der Seite und ein link zum Quelltext dran

CODE von index.html.cpp

Es handelt sich in dem code um die Zeilen 141-146 und der CSS Teil ist auf Zeile 83-91.
 

Anhänge

  • seite.JPG
    seite.JPG
    75,8 KB · Aufrufe: 8
Zuletzt bearbeitet:

Richi

Neues Mitglied
26 September 2020
20
0
1
37
Bei der richtigen Editierung geht es mir jetzt unten um den Teil mit der "Zeitschaltuhr"
Wie Ihr seht, wird alles hintereinander angereit, was aber laut meinem Code so nicht sein sollte.
Ich hätte diesen Bereich lieber so (Bild)
 

Anhänge

  • schaltuhr.jpg
    schaltuhr.jpg
    18,6 KB · Aufrufe: 7

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.105
408
83
67
Dein Wunsch lässt sich sehr leicht umsetzen, indem Du flex-direction auf column änderst:
CSS:
        ul.timer {
            display: flex;
            flex-direction: column;
            border: 2px solid #404040;
            border-radius: 4px;
            justify-content: flex-end;
            align-items: center;
            padding: 2px;
        }
 

Richi

Neues Mitglied
26 September 2020
20
0
1
37
:eek: ou man... Danke dir für diese Wunderbare Anleitung... :wink:
ich sag ja NULL PEIL hab ich, sieht schon gleich besser aus
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.105
408
83
67
Freut mich, dass es funktioniert.
Allerdings zeigt er teile der Seite ganz anders an als der Expression Web und ich hab keine Ahnung wieso
Expression Web ist stark veraltet, sehr wahrscheinlich ist das der Grund dafür, dass dort die Seite nicht so angezeigt wird, wie von einem aktuellen Browser. Besser darauf verzichten. Mache dich lieber mit den Entwicklerwerkzeugen deines Browsers vertraut, damit kannst Du im HTML-Inspektor das CSS probeweise leicht ändern und siehst sofort das Ergebnis.
 

Richi

Neues Mitglied
26 September 2020
20
0
1
37
Auch ne Gute Idee, ich versuchs grad schon, allerdings übernimmt er nicht alle Werte.
Da haperts wieder an meiner Unwissenheitob das so alles richtigFormatiert ist, dem ESP ist das nähmlich schnurzegal, da er nur C und C++ Code verarbeitet.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.105
408
83
67
allerdings übernimmt er nicht alle Werte.
Das kann mehrere Gründe haben:
  • Die CSS-Eigenschaft bewirkt nicht das, was Du beabsichtigst.
  • Ein Syntaxfehler liegt vor, das sollte der Browser aber anzeigen.
  • Eine andere Regel mit höherer Priorität liegt vor, auch das sollte aber der Browser anzeigen, meiner (Opera) indem die Regel durchgestrichen wird.
 

Richi

Neues Mitglied
26 September 2020
20
0
1
37
ich hab zu den Eingabefelder jetzt "maxlength="30"" hinzugefügt, allerdings wird es nicht übernommen, die Felder werden mit 177px angezeigt. Eine änderung des Wertes bewirkt garnichts. Wie kann ich das einstellen? Da mir die Textfelder viel zu lang sind.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.105
408
83
67
Da musste ich jetzt auch etwas nachlesen und des Rätsels Lösung ist: maxlength ist für die Validierung vorgesehen und gibt an, wie viele Zeichen der Benutzer eingeben darf. Um die Breite des Eingabefeldes zu ändern musst Du das Attribute size verwenden.
 

Richi

Neues Mitglied
26 September 2020
20
0
1
37
Ahhh OK, dann war das in dem wo ich als Hilfe nutze etwas schlecht beschrieben (edv-lehrgang.de) Ja das erklärt dann einiges. Habs mit "size" getestet und siehe da... OU man, echt schlimm. Is schon fast echt Peinlich bei solchen "Basics" zu versagen. Ich Danke euch vielmals. Hab es endlich so einigermaßen hinbekommen.
 
Zuletzt bearbeitet: