Verfügbare tag-Namen

[Dieter N.]

Moin,

bisher habe ich für die Aufteilung einer Seite die Begriffe (tags?) main und aside gefunden.

Gibt es weitere erlaubte Begriffe, wenn ich neben main und aside weiter Bereiche benennen will?

Insbesondere wenn ich den Head-Bereich in drei Spalten, den Main-Bereich in 4 Spalten aufteilen möchte.

Dann wären ja schon 7 Namen sinnvoll.

[Matthias Scharwies]

Servus!

Moin,

bisher habe ich für die Aufteilung einer Seite die Begriffe (tags?) main und aside gefunden.

Elemente

Gibt es weitere erlaubte Begriffe, wenn ich neben main und aside weiter Bereiche benennen will?

Ja, siehe hier: HTML/Tutorials/Seitenstrukturierung

Insbesondere wenn ich den Head-Bereich in drei Spalten, den Main-Bereich in 4 Spalten aufteilen möchte.

Dann wären ja schon 5 Namen sinnvoll.

Auch bei schmalen Viewports?

Tipp: Gliedere deine Webseite nach dem Inhalt. HTML zeichnet den Inhalt aus!
Ob der Inhalt dann unter- oder nebeneinander steht, regelt CSS.

Und dort kannst du

1. die Elementnamen ansprechen;
2. gleiche Elemente über Klassen unterscheiden oder
3. mit CSS/Selektoren/first-of-type oder CSS/Selektoren/nth-of-type Elemente nach ihrer Position selektieren.

Herzliche Grüße

Matthias Scharwies

[Dieter N.]

Danke Matthias für die rasche Antwort,

gefunden habe ich aber nur die zusätzlichen Elemente article und section. Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.

Gruß

Diddi

[Matthias Scharwies]

Servus!

Danke Matthias für die rasche Antwort,

gefunden habe ich aber nur die zusätzlichen Elemente article und section.

Du könntest auch ein bedeutungsleeres div verwenden.

Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.

Nur, wenn du alles fest verschraubst, was dem Grundsatz des responsiven Webdesigns wiederspricht.

Schau Dir mal dieses Beispiel hier an:

CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung

Wenn du ein Element in der Mitte einfügst, rutschen die anderen flexibel nach unten. Ist doch gut, oder?

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Servus!

Danke Matthias für die rasche Antwort,

gefunden habe ich aber nur die zusätzlichen Elemente article und section.

section ist doch gut. Wenn ein Buch 20 Kapitel hat, heißen alle Kapitel eben Kapitel und unterscheiden sich nicht durch den Namen, sondern die Nummererierung.

Du könntest auch ein bedeutungsleeres div verwenden.

Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.

Nur, wenn du alles fest verschraubst, was dem Grundsatz des responsiven Webdesigns wiederspricht.

Schau Dir mal dieses Beispiel hier an:

CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung

Wenn du ein Element in der Mitte einfügst, rutschen die anderen flexibel nach unten. Ist doch gut, oder?

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße

Matthias Scharwies

[Dieter N.]

Hi,

Schau Dir mal dieses Beispiel hier an:

CSS/Tutorials/Grid/Implizite_und_explizite_Erzeugung

Wie kann ich das Ergebnis des Beispiels auf der gesamten Seite ansehen (und dann die Seite verkleinern)?

[Dieter N.]

Hi!

Zunächst würde ich mir das Beispiel genauer ansehen. Daher war auch meine obenstehende Frage, wie ich das Ergebnis, das im Beispiel auf der rechten Seite angezeigt wird im Vollbild auf meinem PC ansehen kann.

Gruß

Diddi

[MrMurphy]

Ich würde in einem Editor eine HTML-Grundstruktur erstellen und dann das gezeigte HTMl und CSS dort hineinkopieren. Die Seite kannst du dann in deinem Browser öffnen, aber auch bequem Änderungen vornehmen.

[Dieter N.]

Hallo,

ich habe mir jetzt das Beispiel

angeschaut.

Was mich stört, ist dass beide Zeilen gleich in Spalten unterteilt sind.

Ich denke, die 1. Zeile ist die Kopfzeile/der Titelbereich (header) und in der zweiten Zeile der Inhalt (body). Die Kopfzeilen unterscheiden sich doch i.a. von dem restlichen Teil.
Kennt Ihr zufällig in selhtml ein Beispiel mit dieser Unterscheidung?

[MrMurphy]

Das ist ein einfaches Beispiel um die Möglichkeiten von CSS-Grid überhaupt kennenzulernen.

Wie bereits in einem anderen Beitrag von mir geschrieben könnten wir dir wahrscheinlich konkreter helfen wenn wir wüssten, was du im Endeffekt überhaupt erreichen willst.

Vielleicht hilft dir das Beispiel eines sogenannten Holy-Grail-Layouts weiter. Stör dich nicht an der Bezeichnung. Es geht darum eine flexible grundsätzliche Seitenstruktur nach bestimmten Regeln zu erstellen. Früher waren die Anforderungen nur sehr schwer umzusetzen, CSS-Grid hat das stark vereinfacht.

Nachfolgend meine Umsetzung, die du einfach mal bei verschiedenen Fensterbreiten ausprobieren kannst:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Holy Grail Layout mit CSS-Grid</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>

   /* Basisangaben */
   @media all {
      * {
         box-sizing: border-box; 
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.5;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
   }

   /* Grundlayout */
   @media all {
      body {
         max-width: 100%;
         padding: 0.5rem 0.5rem 0.5rem 0.5rem;
         margin: 0rem auto 0rem auto;
      }
      .pageheader,
      .navigation,
      .content,
      .sidebar,
      .pagefooter {
         padding: 0.5rem 0.5rem 0.5rem 0.5rem;
         border: 2px solid gray;
      }
      .sidebar a {
         display: block;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
   }
   @media only screen and (min-width: 0px) {
   }

   /*Holy Grail Layout*/
   @media all {
      body {
         min-height: 100vh;
         display: grid;
         grid-template-rows: auto 1fr auto;
         gap: 0.5rem;
      }
   }
   @media only screen and (min-width: 600px) {
      body {
         grid-template-columns: 1fr 1fr;
      }
      .pageheader {
         grid-column: 1 / 3;
      }
      .content {
         grid-column: 1 / 3;
      }
      .pagefooter {
         grid-column: 1 / 3;
      }
   }
   @media only screen and (min-width: 900px) {
      body {
         grid-template-columns: 250px 1fr 250px;
      }
      .pageheader {
         grid-column: 1 / 4;
      }
      .content {
         grid-column-start: 2;
         grid-row-start: 2;
      }
      .navigation {
         grid-column-start: 1;
      }
      .pagefooter {
         grid-column: 1 / 4;
      }
   }
   @media only screen and (min-width: 1200px) {
      body {
         grid-template-columns: 300px 1fr 300px;
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Holy Grail Layout - CSS-Grid</h1>
   </header>
   <main id="content" class="content">
      <h2>Beschreibung</h2>
      <p>The Holy Grail Layout is a web page layout that consists of four sections - a header, footer, and a main content area with two sidebars, one on each side. The layout also adheres to the following rules</p> 
      <ul>
         <li>Has a fluid center column width fixed-width sidebars</li>
         <li>The center column should appear first in the markup, before the two sidebars (but after the header)</li>
         <li>All three columns should be the same height, regardless of the content within them</li>
         <li>The footer should always be at the bottom of the browser viewport, even when the content doesn't fill up the height of the viewport (sticky footer)</li>
         <li>The layout should be responsive, all the sections should collapse into one column on smaller viewports</li>
      </ul>
   </main>
   <nav id="navigation" class="navigation">
      <h2>.navigation</h2>
   </nav>
   <aside class="sidebar">
      <h2>Links zum <i>Holy Grail Layout</i></h2>
      <a href="http://alistapart.com/article/holygrail/">A List Apart (2006, noch gar nix mit Flexbox oder CSS-Grid)</a>
      <a href="https://bitsofco.de/holy-grail-layout-css-grid/">bitsofco</a>
      <a href="http://webkrauts.de/artikel/2015/rasterfahndung-auf-der-suche-nach-der-besten-layouttechnik">Webkrauts</a>
      <a href="http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm">Matthew James Taylor</a>
      <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung">SelfHTML - CSS / Tutorials / Einführung / CSS-Grid</a>
   </aside>
   <footer id="pagefooter" class="pagefooter">
      <h2>.pagefooter</h2>
   </footer>
</body>
</html>

[Rolf B]

Hallo Dieter,

wenn Du im head-Bereich 3 Spalten und im main-Bereich 4 Spalten haben willst, geht das mit einem Grid im Allgemeinen nicht, du brauchst 2 Grids.

Es sei denn, du WILLST UNBEDINGT eine Beziehung zwischen den Spaltenaufteilungen von head und main haben. Dann kann das mit einem Grid sinnvoll sein. Ich meine – von der Idee her – so etwas. Man kann das Grid-Item HEAD1 so einstellen, dass es die Spalten 1 und 2 einnimmt.

 +----------------------------------------+--------+--------+
 |               HEAD1                    |  HEAD2 |  HEAD3 |
 +---------+------------------------------+--------+--------+
 |         |                              |        |        |
 |  MAIN1  |              MAIN2           |  MAIN3 |  MAIN4 |
 |         |                              |        |        |
 +---------+------------------------------+--------+--------+

Aber wie MrMurphy schon sagte: das ist Spökenkiekerei. Hast Du ein konkretes Problem, das Du lösen willst, oder beschäftigst Du Dich abstrakt mit dem Thema?

Rolf

[Dieter N.]

Hallo, ich habe viele Internetseiten angeschaut und will jetzt selbst eine erstellen. Es war also bisher eher abstrakt. Aber jetzt bin ich am Suchen, wie sie Seite aussehen soll.

Ich bedanke mich bei allen für ihre Beiträge.

[Matthias Scharwies]

Guten Morgen,

ich habe viele Internetseiten angeschaut und will jetzt selbst eine erstellen.

Sehr gut! Eine eigene Seite ist wie ein eigener Garten. Man kann seine Vorstellungen umsetzen und immer wieder umgestalten.
In einem öffentlichen Park wie Twitter und Facebook gibt es zwar auch die Möglichkeit Inhalte zu präsentieren. Die Gestaltung ist aber engen Grenzen ausgesetzt.

Es war also bisher eher abstrakt. Aber jetzt bin ich am Suchen, wie sie Seite aussehen soll.

Das ist gut - von den Farben (Farbe/Farbkonzept über die Gestaltung.

Hier musst du aber aufpassen: Eine Webseite soll für alle sein, deshalb richtet sich das HTML nach dem Inhalt. Dann kann es vorgelesen werden - aber auch auf Bildschirmen angezeigt werden. Dabei ist mittlerweile die Hälfte mobil unterwegs, die anderen haben immer größere Bildschirme. (Ein Kumpel von mir hat 40'' (102cm) - Diagonale)

Deshalb empfehle ich Dir erst einmal das Studium einiger Tutorials:

• Einstieg in HTML
• Responsiv(es_Webdesign)
• CSS/Tutorials/Grid

Du schriebst:

Was mich stört, ist dass beide Zeilen gleich in Spalten unterteilt sind.

Mr Murphy schrieb:

Das ist ein einfaches Beispiel um die Möglichkeiten von CSS-Grid überhaupt kennenzulernen.

Es ging um Deinen Einwand:

Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.

Genau, deshalb ist es besser ein flexibles Grid zu verwenden und Elemente nicht fest irgendwo zu positionieren.

Das heißt nicht, das völliges Chaoos herrschen muss. Du kannst den header und dann die Navi oben haben.
Inhalte wandern automatisch nach unten, wenn der Bildschirm schmal ist.
Bei breiteren Bildschirmen legst du fest, was nebeneinander platziert werden soll.

Vielleicht hilft dir das Beispiel eines sogenannten Holy-Grail-Layouts weiter. Stör dich nicht an der Bezeichnung. Es geht darum eine flexible grundsätzliche Seitenstruktur nach bestimmten Regeln zu erstellen.

Das wird im 1. Kapitel des Grid-Tutorials gezeigt.

Viel Spaß!

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo,

Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.

mit "Position" meinst du hier die Reihenfolge? Also sowas wie section:nth-of-type?

Das ist in der Tat problematisch, weil sich - wie du schon feststellst - die ganze Numerierung ändert, wenn ein Element dazukommt. Besser ist es, den Elementen eine ID zu geben, die knapp den Inhalt beschreibt, und dann damit zu selektieren. Also sowas wie section#disclaimer.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Dieter N.,

Wenn ich sie nach ihrer Position selektiere, muss ich aber sehr aufpassen, wenn ich ein zusätzliches Element einfüge.

Heißt: Das solltest Du nicht tun, wenn Du gezielt eins mit bestimmtem Inhalt ansprechen willst.

Positionsgesteuert selektiert man dann, wenn die Position und nicht der Inhalt der relevante Kriterium ist (z.B. erstes oder letztes oder jedes ungerade Element oder oder oder)

Wenn deine head- oder main-Spalten für bestimmte Inhalte vorgesehen sind, dann gib ihnen eine id oder eine Klasse und selektiere sie darüber. Dann kannst Du sie beliebig umsortieren oder etwas einfügen oder entfernen.

Edit Verflixt, Martins Antwort übersehen…

Rolf

[MrMurphy]

Gibt es weitere erlaubte Begriffe, wenn ich neben main und aside weiter Bereiche benennen will?

Das ist eine falsche Herangehensweise. Bei HTML geht es nicht darum, was du willst, sondern was HTML ermöglicht.

Bei HTML ist es sinnvoll an konkreten Beispielen zu arbeiten / zu lernen. Grade Anfänger erfinden sonst gerne Probleme, die überhaupt nicht existieren.

So können viele Elemente mehrfach vorkommen und auch ineinander verschachtelt sein. Um das zu verstehen wirst du um das Lernen nicht herumkommen.

HTML in Verbindung mit CSS ist eine künstliche Seitenbeschreibungssprache, die sich aus der Erfahrung oder mit Logik nicht erschließt.

Ich meine zu Verstehen, das du die Vorstellung hast, das für die Grundstruktur einer Webseite viele vollkommen unterschiedliche Elemente erforderlich sind. Das ist falsch. Es sind nur einige wenige erforderlich, die natürlich korrekt verwendet werden sollten.

Warum du für die Grundstruktur einer Webseite überhaupt so viele unterschiedliche Elemente verwenden willst erschließt sich mir überhaupt noch nicht.

Oder meinst du die "innere" Struktur? Dann ist die Verwendung von gleichen Elementen sinnvoll und erlaubt. Dadurch wird die Webseite für Dritte überhaupt lesbar / aufnehmbar.

Aktuell ist deinen Fragen und den bislang darauf erfolgten Antworten zu entnehmen, das dein Problem noch nicht richtig erkannt wurde und deshalb die Antworten eventuell überhaupt nicht dazu passen.

Damit wir verstehen was du im Endeffekt willst und wie wir dir dann auch helfen können wäre deshalb ein konkretes Beispiel sinnvoll, was du überhaupt erreichen willst. Dann können wir dir auch mit Beispielen zum Ausprobieren helfen.