nicht angemeldet
Rolf BHallo Sven,
Du hast zunächst mal etwas Unordnung in deinem HTML und CSS. Aber keine Sorge, ich schimpfe nicht nur, nachher kommt auch was zu deinem Anliegen. Aber die Kritikpunkte solltest Du trotzdem abarbeiten.
- Validiere dein HTML beim W3C - https://validator.w3.org/. Dann fallen Dir viele der Fehler, die ich im Folgenden aufliste, selbst auf.
- Ein <header> um das <title> Element ist unzulässig, er führt dazu, dass der Browser glaubt, dass schon der <body> Bereich angefangen hätte. Daraufhin hängt der Browser alles, was in den head gehört, in den body. Nicht gut. Schau Dir in den Entwicklerwerkzeugen die Elemente-Hierarchie an, total kaputt.
- title, meta viewport und link icon hast Du doppelt.
- ein
<top>Element gibt es nicht. Das möchte ein<header>sein. Bitte erfinde keine eigenen HTML Elemente, das ist was für Fortgeschrittene und hat eine Menge weiterer Voraussetzungen. Ob Du überhaupt ein header-Element brauchst, ist allerdings fraglich. Das h1 kann das, was Du da tust, auch ganz allein. - Ein
<div class="topnav">im header ist unnötig. Falls Du das bei Selfhtml gesehen hast - wo? Das müssten wir dann überarbeiten. - Dein
<div class="content">möchte dann ein<main>Element sein. - Ein
<display>Element gibt es nicht. Du könntest hier<section>verwenden. Entsprechendes gilt für<log>. - Das
<br>hinter einer textarea ist für deinen Anwendungsfall unnötig. Das Einschließen einer textarea in <p></p> ebenfalls. - Die textarea ist für's Logging nicht das richtige Element. Das ist ein Eingabeelement, kein Ausgabeelement. Du kannst entweder ein einfaches div nehmen und dessen innerHTML für jede Logausgabe um "<br>" + message erweitern, oder Du machst eine Liste (<ul>) und fügst neue li-Elemente an. Nicht über's innerHTML, sondern über document.createElement("li") und einen appendChild an die Liste. (Beispiel im Wiki)
- Musst Du überhaupt in die Webseite loggen? Reicht nicht der output von console.log()? Wenn Du den Controller auf dem Smartphone laufen lässt und dort ein Problem hast, das Du auf dem Desktop nicht nachstellen kannst (wo Du die Entwicklerkonsole hast), kannst Du - zumindest bei Chrome auf Android - das Smartphone auch mit dem Desktop verbinden und remote debuggen.
- -webkit-touch-callout:none für Buttons - ist das nötig? Das ist eine Eigenschaft, die ausschließlich für den iSafari relevant ist. Zeigt der iSafari bei Buttons einen Callout an (was auch immer das ist, ich bin Androide...)?
- Die Klasse
buttonbrauchst Du nicht. Im CSS kannst Du Elemente über ihren Tagnamen ansprechen - wie Du es bei body oder top machst. Wenn Du nur die Buttons im Tastaturbereich ansprechen willst, dann gibt diesem Bereich eine Klasse (z.B. class="keypad") und sprich die Buttons darin über den Selektor.keypad buttonan. Sowas hast Du in deinem CSS noch nicht drin, die Leerstelle zwischen .keypad und button ist ein sogenannter Kombinator und bedeutet: Nachfahrenelement. Es meint also buttons, die direkt oder mit Zwischenstufen in einem Elternelement mit Klasse keypad liegen. (Hier im Wiki)
Jetzt mal ein bisschen mehr zu deinen Anliegen.
- Um die Buttons nebeneinander zu bekommen, würde es im einfachsten Fall genügen, sie nicht einzeln in <p> Elemente zu setzen. Buttons sind Inline-Elemente, d.h. sie landen automatisch nebeneinander. <p> ist dagegen ein Blockelement, und Blockelemente werden untereinandergesetzt (solange Du nicht mit Grid was anderes festlegst).
- Dein Einsatz von grid funktioniert so nicht. Ein Grid besteht aus Grid-Container (bei Dir der Body) und Grid-Items. Die Grid-Items müssen direkte Kind-Elemente des Containers sein, das ist bei Dir nicht der Fall. Man kann solche Dinge zwar mit Subgrid (nur im Firefox) oder display:contents (gut unterstützt) lösen, aber solange das nicht nötig ist... Du kannst Grid auch mehrfach einsetzen: Eins im body für's Seitenlayout, und je eins in den Cards für deren inneres Layout. Dein Buttonfeld könntest Du z.B. in ein Grid mit 2 Zeilen und 3 Spalten setzen.
- Du kannst Grid-Items entweder über Zeilen- und Spaltenangaben positionieren, oder Du kannst benannte Gridbereiche verwenden. Das findest Du bei uns im Wiki, z.B. hier.
Sortier das erstmal aus, und dann schauen wir nochmal für die weiteren Sachen drauf.
Rolf
--
sumpsi - posui - obstruxi
sumpsi - posui - obstruxi
Auge
Matthias Scharwies
Der Martin