Beiträge von MrMurphy

MrMurphy

Durch das "margin-top: -170%;" ist die Navigation überhaupt nicht sichtbar.

Und wo willst du einen neuen Absatz (den meinst du wohl mit paragraphen) überhaupt einfügen? In das divstart?

Bei meiner Lösung kannst du problemlos zusätzliche Absätze hinzufügen. Warum verwendest du die die nicht? Wie sollen wir dir helfen wenn du die Hilfen offensichtlich ignorierst?

Du hast das Grid halt zeilenweise aufgebaut. Der Text befindet sich in einer Zeile mit dem Logo. Bei mehr Text wird die Zeilenhöhe größer und alles in der nächsten Zeile wird weiter "runtergedrückt".

Und fr ist nicht immer die sinnvollste Einheit. Die Höhe von Containern sollte sich nach deren Inhalt richten und nur in notwendigen Ausnahmefällen vorgegeben werden.

Du kannst mal im #divstart

Code

grid-row: 1;

durch

Code

grid-row: 1 / span 2;

ersetzen. Die "-170%" natürlich löschen.

MrMurphy

Tipp ist schwierig. Zum einen wissen wir nicht was dir genau vorschwebt. Das Logo-Bild liegt uns nicht vor. Und einige Angaben deines CSS kollidieren mit den notwendigen Anweisungen für deine vermeintlichen Vorstellungen. Zu Beginn kannst du dein CSS mal komplett löschen und durch das folgende ersetzen:

Code

body {
   margin: 0;
}
#testing {
   background-color: tomato;
   height: 100%;
}
#divlogo {
   padding: 20px;
}
#div1 {
   padding: 0px 50px;
}
#divNav {
   color: teal;
   border-style: solid;
}
img {
}
ul {
   background-color: #D0D8D0;
   padding: 0;
   margin: 0;
}
li {
   list-style-type: none;
}
li a {
   display: block;
   color: black;
   padding: 10px 0px 10px 15px;
   text-decoration: none;
}
li a.aktiv {
   background-color: #500000;
   color: white;
}
li a:hover:not(.aktiv) {
   background-color: #777;
   color: white;
}
/* CSS-Grid */
#testing {
   display: grid;
   grid-template-columns: 200px 1fr;
   grid-template-rows: auto 1fr;
   grid-template-areas:
      "logo text"
      "navi text"
   ;
}
#divlogo {
   grid-area: logo;
}
#divNav {
   grid-area: navi;
}
#div1 {
   grid-area: text;
}

Alles anzeigen

Wenn die Anordnung grundsätzlich stimmt kannst du anfangen Größen, Abstände, Farben und so weiter anzupassen.

Das ist aber nur ein Versuch dir bei der Lösung deines Problems zu helfen. Korrektes HTML sieht noch etwas anders aus und beim CSS wären teilweise andere Einheiten außer px sinnvoller.

MrMurphy

Egal was behauptet wird: Viel Frust und Ärger werden vermieden, wenn für Ordner- und Dateinamen nur die Kleinbuchstaben des englischen Alphabetes, Zahlen und der Unterstrich verwendet werden. Wobei Zahlen nicht als erstes Zeichen stehen sollten. Kein Leerzeichen, keine Umlaute, keine Sonderzeichen, keine anderen Striche als der Unterstrich.

Ansonsten kann es zum Beispiel auch passieren, dass die Seite bei einem selbst komplett und korrekt angezeigt wird, bei Besuchern mit anderen Providern, anderer Hard- und Software, anderen Betriebssystemen aber nicht.

MrMurphy

Tut mir leid, aber Pixel für Break-Points sind richtig und zulässig. Das heißt nicht, das die Einheit "em" nicht funktioniert oder gar falsch ist. Beide Einheiten können gleichwertig verwendet werden.

Zudem habe ich nur ein Beispiel für eine Lösung gegeben, die funktioniert. Damit habe ich andere Lösungen keineswegs ausgeschlossen. Wie zum Beispiel auch aus der Überschrift "Lösung 1:" hervorgeht. Wenn du eine Grid-Lösung hast die genau so funktioniert - gerne her damit. Einfach nur andere Lösungen ohne sachlichen Hintergrund schlecht zu machen finde ich jedenfalls nicht in Ordnung.

MrMurphy

dstar9091: Deine Informationen sind leider mager.

Ich habe mal ein Beispiel erstellt. Je nach Bildschirmbreite 1, 2, 4, 5 oder 10 Spalten. Oder ist die Webseite nur für eine Seite mit einer bestimmten Bildschirmgröße gedacht? Wenn die 10 Spalten nebeneinander feststehen können die Buttons natürlich auch in der Höhe angepasst werden um das gesamte Fenster auszufüllen.

Dann müssten aber auch die Beschriftungen der Buttons bekannt sein. Wenn die unterschiedlich lang sind und damit unterschiedlich umbrechen müsste der Quelltext geändert und das CSS angepasst werden.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Buttonanordnung</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   @media all {
      * {
         box-sizing: border-box;
      }
      body {
         margin: 0rem 0rem 0rem 0rem;
      }
      .pageheader,
      .pagefooter {
         padding: 20px;
      }
      .matrix10 div {
         padding: 5px;
      }
      .matrix10 button,
      .matrix10 button:link,
      .matrix10 button:visited {
         background-color: #eeeeee;
         color: #333;
         font-size: 14px;
         font-weight: bold;
         text-align: center;
         text-decoration: none;
         box-shadow: 3px 3px grey;
         outline: none;
         display: block;
         width: 100%;
         padding: 10px 0px 10px 0px;
         border: 1px solid black;
         border-radius: 10px;
         margin: 10px 0px 10px 0px;
      }
      .matrix10 button:hover,
      .matrix10 button:focus,
      .matrix10 button:active {
         background-color: #d3d3d3;
         box-shadow: -2px -2px black;
      }
   }
   @media only screen and (min-width: 550px) {
      .matrix10 {
         display: flex;
         flex-wrap: wrap;
      }
      .matrix10 div {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 50%;
      }
   }
   @media only screen and (min-width: 850px) {
      .matrix10 div {
         flex-basis: 25%;
      }
   }
   @media only screen and (min-width: 1000px) {
      .matrix10 div {
         flex-basis: 20%;
      }
   }
   @media only screen and (min-width: 1400px) {
      .matrix10 div {
         flex-basis: 10%;
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Buttonanordnung</h1>
      <p>Lösung 1: mit Flexbox</p>
   </header>
   <main id="content" class="content">
      <section class="matrix10">
         <div>
            <button href="#Link1">1-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">2-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">3-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">4-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">5-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">6-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">7-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">8-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">9-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
         <div>
            <button href="#Link1">10-Text</button>
            <button href="#Link2">Button-Text</button>
            <button href="#Link3">Button-Text</button>
            <button href="#Link4">Button-Text</button>
            <button href="#Link5">Button-Text</button>
            <button href="#Link6">Button-Text</button>
            <button href="#Link7">Button-Text</button>
            <button href="#Link8">Button-Text</button>
         </div>
      </section>
   </main>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/9648-buttons-in-matrixanordnung-mit-relativer-gr%C3%B6%C3%9Fe-zum-brwoserfenster/">https://www.html-seminar.de/</a></p>
   </footer>
</body>
</html>

Alles anzeigen

MrMurphy

Die Frage ist nicht eindeutig: "Mittig" oder "Mittung und Linksbündig"? Wahrscheinlich innerhalb der Mitte linksbündig.

In jedem Fall muss das umgebende Element die Höhe der Seite bekommen. Die horizontale und vertikale Zentrierung erfolgt dann mittels Flexbox.

Im aktuellen HTML soll der Quelltext zudem so schlank wie möglich gehalten werden. Jedem Element eine Klasse zu vergeben ist somit schlechter Stil.

Das br-Element hat zudem eine semantische Bedeutung, die hier nicht gegeben ist.

Nach deinen knappen Informationen sehe ich zu folgendem Quelltext

Code

<div class="titletext">
   <div>
      <a> Das ist der obere Satz.</a>
      <a> Das soll direkt darunter stehen</a>
   </div>
</div>

dieses CSS

Code

.titletext {
         background-color: navajowhite;
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      .titletext a {
         display: block;
      }

Die Hintergrundfarbe zeigt die Größe des div.titletext.

MrMurphy

Optisch erkennen kann man die hinterlegten Elemente nicht.

Mit einem Handy lassen sich Seiten auch nur schwer untersuchen.

Browser von Desktoprechnern bieten in der Regel die Möglichkeit den Quelltext direkt anzuschauen. Wobei der recht umfangreich und / oder unübersichtlich sein kann.

Für den Firefox (aber wohl auch andere Browser) gibt es AddOns, mit denen man eine Webseite "untersuchen" kann. Zum Beispiel Überschriften, Container, Listen, ... in der Webseite markieren.

MrMurphy

Ohne deinen Quelltext mit HTML und CSS ist keine konkrete Hilfe möglich. Wir wissen ja nicht mal was du mit Tabellen meinst. HTML-Tabellen sind nur für Tabellendaten gedacht und verhalten sich entsprechend. Ohne Abstände sind (in der Regel) Zahlen nun mal schlechter zu lesen. Für Bilder, zudem geteilte, sind die nicht gedacht.

Allgemein musst du halt die Rahmen und Abstände auf Null setzen.

MrMurphy

Das Beispiel habe ich nach der Frage von wakeme eingefügt, da habe ich seine Frage nicht gesehen.

Die Flexanwendung in deinem Beispiel ist sinnfrei, da Blockelemente sowieso untereinander stehen. Bei CSS gilt das gleiche wie beim HTML: Unnötige Angaben sind nach den aktuellen HTML5- und CSS3-Regeln zu vermeiden.

MrMurphy

Zitat

scheinen bei diesem Aufbau nicht zu funktionieren

Der Aufbau ist auch kein korrektes HTML. Das ist veraltet und zusätzlich auch nach den alten Regeln nicht regelgerecht.

Da du offensichtlich aktuelles CSS verwenden willst solltest du auch das dazu passende aktuelle HTML verwenden. Der Quelltext könnte dann so aussehen:

Code

   <main>
      <aside class="news">
         <section>
            <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a href="#">---</a>
         </section>
         <section>
            <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a href="#">---</a>
         </section>
         <section>
            <h1>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a href="#">---</a>
         </section>
      </aside>
   </main>

Alles anzeigen

MrMurphy

Das ist keine "entweder - oder" Frage. Für bestimmte Elemente gibt es entsprechende Möglichkeiten im CSS.

Texte werden mit text-align: center; zentriert.

justify-content ist halt für bestimmte Container gedacht und grade nicht für Texte. Deine Beispiele ohne Inhalt helfen nicht weiter um dir zu helfen. So kann ich nur vermuten dass dir die Grundlagen für ein korrektes HTML fehlen, die aber für die richtige Anwendung vom CSS Voraussetzung sind.

MrMurphy

Es gibt keine funktionierende Möglichkeit bestimmte Browser zu erkennen.

Bestimmte Anwender wegen ihres Browsers auszuschließen und die gar aufzufordern, eine bestimmte Version zu installieren, geht gar nicht und wird als total unhöflich empfunden.

Wie tk1234 schrieb ist es sinnvoller (und einfacher) ein Fallback zu erstellen. Webseiten müssen nicht auf allen Browsern gleich aussehen, hauptsache die Information kommt rüber.

Schreib gerne mal genauer um welche Techniken es sich überhaupt handelt.

MrMurphy

Den hover-Effekt kann man nicht ersetzen. Also bleibt nur anklicken oder antippen.

MrMurphy

Ein Vorteil von display: flex ist grade, dass es nicht vererbt wird.

MrMurphy

Es hat sich bewährt zunächst eine Lösung zu erstellen, die für schmale Bildschirme gedacht ist und danach die für breitere. Zudem werden dabei in der Regel viele vorhandene CSS-Vorgaben ausgenutzt. Nennt sich mobile-first.

Ich habe den HTML-Quelltext noch mal überarbeitet, der sieht jetzt so aus:

Code

<main>
   <article class="card">
      <h1>Über uns</h1>
      <div>
         <section>
            <h2>Was ist <i>Einsatzfahrten Baden-Württemberg</i>?</h2>
            <p><i>Einsatzfahrten Baden-Württemberg</i> ist eine Instagram&shy;seite, welche in Zusammenarbeit mit einigen ehren&shy;amtlichen Reportern Bilder und Videos von Einsatz&shy;fahrzeugen sowie deren Einsatzfahrten in Baden-Württemberg veröffentlicht.</p>
         </section>
         <section>
            <h2>Wie entstand <i>Einsatzfahrten Baden-Württemberg?</i></h2>
            <p><i>Einsatzfahrten Baden-Württemberg</i> entstand im September 2016 durch unseren Projektleiter und Gründer Max XXX. Nach und nach traten uns mehrere Reporter bei, welche uns seitdem regelmäßig mit Bild- und Video&shy;material versorgen.</p>
         </section>
         <section>
            <h2>Wie kann man bei uns mitmachen?</h2>
            <p>Mitmachen kann man bei uns, indem man sich über unser <a href="">Bewerbungs&shy;formular</a> mit einer aussage&shy;kräftigen Bewerbung und einem Beispielfoto bewirbt. Unsere Projektleiter werden sich diese dann anschauen und gemeinsam über eine Aufnahme in das Reporterteam entscheiden.</p>
         </section>
      </div>
   </article>
</main>

Alles anzeigen

Das responsive CSS dazu dann

Code

@media all {
   .card {
   }
   .card div {
   }
   .card h1 {
      padding: 10px 15px 10px 15px;
   }
   .card h2 {
   }
   .card p {
   }
   .card a {
      color: blue;
      text-decoration: underline dotted;
      outline: none;
   }
   .card a::after {
      content: " ➚";
   }
   .card section {
      box-shadow: 1px 1px grey;
      padding: 10px;
      border: 1px solid lightgrey;
      border-radius: 10px;
      margin: 10px;
   }
}
@media only screen and (min-width: 800px) {
   .card div {
      display: flex;
   }
}

Alles anzeigen

Du musst natürlich dafür sorgen, dass keine anderen CSS-Angaben das Ergebnis falsch beeinflussen. Die leeren CSS-Angaben sind Platzhalter um zu zeigen, wie die Elemente beeinflusst werden können. Die Werte musst du noch deinen Vorstellungen anpassen.

MrMurphy

Nach den aktuellen HTML- und CSS-Regeln sehe ich zum Beispiel so eine Lösung:

CSS:

Code

.card {
   padding: 15px;
   display: flex;
}
.main h1 {
}
.card h2 {
}
.card p {
}
.card a {
}
.card section {
   box-shadow: 1px 1px grey;
   padding-left: 5px;
   padding-right: 5px;
   border: 1px solid lightgrey;
   border-radius: 5px;
   margin: 5px;
}

Alles anzeigen

HTML:

Code

<main>
   <h1>Über uns</h1>
   <article class="card">
      <section>
         <h2>Wer ist Einsatzfahrten Baden-Württemberg?</h2>
         <p>Einsatzfahrten Baden-Württemberg ist eine Instagram Seite, welche in Zusammenarbeit mit einigen ehrenamtlichen Reportern Bilder und Videos von Einsatzfahrzeuge, und auch deren Einsatzfahrten in Baden-Württemberg veröffentlicht.</p>
      </section>
      <section>
         <h2>Wie entstand Einsatzfahrten Baden-Württemberg</h2>
         <p>Einsatzfahrten Baden-Württemberg entsdand im Sebtember 2016 durch unseren Projektleiter und Gründer Max XXX. Nach und nach traten uns mehrere Reporter bei, welche uns seit daher regelmäßig mit Bild- und Videomaterial versorgen.</p>
      </section>
      <section>
         <h2>Wie kann man bei uns mitmachen?</h2>
         <p>Mitmachen kann man bei uns, in dem man sich über unser <a href="#">Bewerbungsformular</a> mit einer Aussagekräftigen Bewerbung und einem Beispielfoto bewirbt. Unsere Projektleiter werden sich diese dann anschauen und gemeinsam über eine Aufnahme in das Reporterteam entscheiden.</p>
      </section>
   </article>
</main>

Alles anzeigen

Die leeren CSS-Einträge zeigen, wie innerhalb der Klasse .card weitere HTML-Elemente angesprochen werden können, um unnötige Klassenangaben innerhalb des HTML-Quellcodes zu vermeiden. Dadurch wird der HTML-Quellcode zudem übersichtlicher.

Falls andere CSS-Angaben mit reinspielen müssen die CSS-Angaben natürlich noch angepasst werden.

Die Rechtschreibung und Grammatik habe ich mal so stehen gelassen, da die für die Frage keine Rolle spielen.

MrMurphy

Warum so kompliziert. In den eingelesenen Dateien steht doch 'eh html-Quelltext. Du kannst

Code

<div class="article">
...
</div>

doch direkt in die thema1.html schreiben,als erste und letzte Zeile. Wobei das div-Element wohl gerne ein article-Element wäre.

Oder das öffnende div (article) als letzte Zeile in die navigtion.html und das schließende div (article) als erste Zeile in die sidebox.

MrMurphy

nori999: Du hast offensichtlich deinen Eröffnungsbeitrag und Teile deiner anderen Beiträge gelöscht. Oder hatte ein Moderator lange Weile?

Sowas wird in keinem Forum gerne gesehen, da die Antworten zu deinen Fragen teilweise sinnfrei in der Luft hängen, zum Beispiel Sempervivum mit "Im CSS aus Posting #33 steht:".

Nachträglich solltest du deshalb nur Rechtschreibfehler korrigieren, aber keine Informationen löschen.

MrMurphy

In Wikipedia sind die Formeln als Bild eingefügt.

Das liegt wohl auch daran, das laut Wikipedia

Zitat

Unter Mathematikern und anderen interessierten Benutzern gilt MathML für die manuelle Editierung als unhandlich, sodass nur Programme zur Generierung zum Einsatz kommen. Durch die Syntax lässt es sich nur schwer bzw. gar nicht durch CSS formatieren.

Für Webseiten ist MathML damit eher nicht geeignet.

Falls du dich damit beschäftigen willst findest du zum Einstieg ein paar Beispiele unter

http://elsenaju.info/mathml/MathML-Beispiele.htm

Mit der Browserunterstützung sieht es ganz mies aus:

https://www.caniuse.com/?search=mathml

MathML wird offensichtlich nur vom Firefox und vom Safari unterstützt. Von daher kann ich MathML nicht empfehlen.

MrMurphy

Dein Ansatz ist schon mal falsch. Die Bildschirmgröße hat nichts mit der Größe des Browserfensters zu tun. Außerdem ist das Browserfenster nicht unbedingt mittig auf dem Bildschirm plaziert.

Wie Sempervivum bereits schrieb ist das Zentrieren mit CSS (Flexbox oder CSS-Grid) zudem deutlich einfacher und erfordert keine Berechnungen.

Beiträge von MrMurphy

Anfänger Frage zu Floating

Anfänger Frage zu Floating

Warum bekomme ich manche Grafiken nicht in meine Webseite geladen?

Buttons in Matrixanordnung mit Relativer Größe zum Brwoserfenster.

Buttons in Matrixanordnung mit Relativer Größe zum Brwoserfenster.

Einfaches Div mit zwei Sätzen immer mittig auf der Seite anzeigen lassen?

Webseiten Aufbau/Strukturen erkennen

Absätze zwischen Tabell-Reihen ?..

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

flex:boxen automatisch umbrechen + mittig ausrichten mit justify-content

Nicht unterstützte Browser abfangen

hover Ersatz am Touchscreen

display:flex; als Universalselektor

3 Divs mit responsiver Breite nebeneinander

3 Divs mit responsiver Breite nebeneinander

Universeller Seitenaufbau zum Importieren in alle Seiten?

Bilder - Texte überschneiden sich

Mathematische Formeln in html schreiben

eine Spielkarte in Bildschirm Mitte plazieren