Wie Zeile darstellen?

[Jo]

Moin, wie darf das tag für die Seitenüberschrift im folgenden Beispiel heißen?

[Rolf B]

Hallo Jo,

was würdest Du denn vermuten, wie das Element zu heißen hat (das durch zwei Tags bezeichnet wird)? 😉

Wenn Du das Gebilde doch schon Überschrift nennst.
Und das für die ganze Seite. Ha, eine EINmalige Sache, sozusagen.

Nimm aber den Hamburger nicht versehentlich mit hinein, die beiden sind Geschwister- oder Cousins und haben kein Eltern-Kind Verhältnis.

Rolf

[Jo]

Ich meine nicht, wie das Element innnerhalb con <tag> ..</tag> heißen soll, sondern was anstelle von tag zu verwenden ist.

<section>,<article> z.B. sind meines Wissens nur innerhalb main erlaubt.

Ist z.B. folgendes erlaubt.

 <header>
 ...
 </header>
 <div class=....>
   <nav>
     ....
   </nav>
   <p>
     ....
   </p>
 </div>

wobei für das div ein grid definiert wird.

[Rolf B]

Hallo Jo,

ich bin davon ausgegangen, dass Du das passende Element für den Text "Seitenüberschrift" suchtest. Das war aus deiner Zeichnung nicht so klar. Du suchst also den passenden Elementtyp um nav und Seitenüberschrift herum.

Herzlichen Glückwunsch, jetzt bin ich am Grübeln.

Das nav-Icon dürfte eine Webseiten-Navigation sein, und gehört demnach nicht ins <main> Element hinein.

Die Seitenüberschrift dürfte sich auf das main-Element beziehen, gelle? Dann gehört sie nach <main> hinein. Was das Boxmodell mit seinen rechteckigen Boxen an seine Grenzen bringt.

Semantisch sollte das Markup so aussehen:

<nav>
...
</nav>
<main>
   <h1>Seitenüberschrift</h1>
   ... Inhalt
</main>

Man kann ein Layout machen, so dass dieses Markup zu deiner Darstellung führt. Aber es wird ein Gefummel mit Margins magischen Zahlen und position:absolute. Bah.

Das entsprechende Kapitel der Spec mogelt sich um eine Antwort herum. Die haben h1 im Header und im main ein h2. Und nav vor main. Vom Layout reden sie nicht (warum auch, ist ja die HTML- und nicht die CSS-Spec).

Meine Lösung wäre wohl:

<header>logo text logo</header>
<nav>
...
</nav>
<h1>Seitenüberschrift
</h1>
<main>
   <h2>Inhaltsüberschrift</h2>
   ... Inhalt
   <h2>Inhaltsüberschrift</h2>
   ... Inhalt
</main>

also: gar kein Element um die Zeile zu bündeln. Statt dessen machst Du den Body zum Grid und bringst damit nav und h1 nebeneinander.

Weißt Du, was ich meine?

@Gunnar Bittersmann - ist das so sauber?

Rolf

[Jo]

Hallo Rolf, Deine Frage an Gunnar bringt mich zu der Frage "Warum ist das System "html,CSS" so unflexibel und an anderer Stelle eher "streng"?

[Rolf B]

Hallo Jo,

weil es Dokumente für ein sehr breites Leser- und Hörerspektrum bereitstellen soll. Das geht nur mit klaren Richtlinien.

Rolf

[Jo]

Hallo Rolf,

weil es Dokumente für ein sehr breites Leser- und Hörerspektrum bereitstellen soll. Das geht nur mit klaren Richtlinien.

Aber dann doch Unsicherheiten, ob es den Richtlinien entspricht☺️
Also "Warten auf Godot" bzw. "Gunnar"!

[Jo]

Hallo Rolf,

Meine Lösung wäre wohl:

<header>logo text logo</header>
<nav>
...
</nav>
<h1>Seitenüberschrift
</h1>
<main>
   <h2>Inhaltsüberschrift</h2>
   ... Inhalt
   <h2>Inhaltsüberschrift</h2>
   ... Inhalt
</main>

Jetzt kommt aber noch erschwerend hinzu bei breitem viewport:

Also die Navigation links vom Hauptteil (main?).
Gruß
Jo

[Rolf B]

Hallo Jo,

siehste, GENAU deshalb wollte ich ja auch ein grid für den Body, und nav nicht mit der Seitenüberschrift in ein div packen. Dieses div wäre Dir nämlich jetzt auf die Füße gefallen.

Als Grid-Template nimmst Du:

schmal:

header header
nav    s_ueb
main   main

breit:

header header
nav    s_ueb
nav    main

mit entsprechenden Column-Breiten für's Grid und natürlich musst Du noch irgendwas anderes tun, um die Navi im Breitmodus aus dem Hamburger zu holen.

Das sind jetzt benannte grid-Bereiche, aber das geht natürlich auch mit Zeilen-/Spaltenangaben.

Rolf

[Jo]

Hallo Rolf,
besten Dank
und Bitte um Nachsicht für die nachfolgende Frage.
In der HTML-Datei schreibe ich
<header>....,
<nav>.....,
<main> .....,

aber s_ueb?  

Gruß Jo

[Rolf B]

Hallo Jo,

irgendein Name halt für den Gridbereich mit der Seitenüberschrift.

Du kannst Elemente in ein Grid auf zwei Arten positionieren:

1. Per Zeilen/Spalten Angaben.

Guckst Du im Wiki.

2. Per Name

Um sie per Name zu positionieren, "malst" Du mit der grid-template Eigenschaft sozusagen das Raster auf. So, wie ich das gemacht habe. Guckst Du im Wiki.

Geht grundsätzlich beides. Mit Zeilen/Spalten Angaben musst Du beim @media-Break jedes Grid-Item neu positionieren. Mit Name ist es einfacher, dann brauchst Du nur das grid-template zu ändern und die Gridbereiche passen sich an. Ein Beispiel dafür findest Du beim zweiten Link.

@Matthias Scharwies: Super Grid-Artikel, verlinke ich immer wieder gern 😀

Rolf

[Jo]

Hallo Rolf,
ich hatte an die Angabe im HTML gedacht.
Da würde ich ja die Überschrift in ein h1-tag setzen, also wie in Deinem Vorschlag:

<header>logo text logo</header>
<nav>
...
</nav>
<h1>Seitenüberschrift
</h1>
<main>
   <h2>Inhaltsüberschrift</h2>
   ... Inhalt
   <h2>Inhaltsüberschrift</h2>
   ... Inhalt
</main>

also das, was Du noch Gunnar fragen wolltest.

[Gunnar Bittersmann]

@@Rolf B

<header>logo text logo</header>
<nav>
...
</nav>
<h1>Seitenüberschrift
</h1>
<main>
   <h2>Inhaltsüberschrift</h2>
   ... Inhalt
   <h2>Inhaltsüberschrift</h2>
   ... Inhalt
</main>

… und bringst damit nav und h1 nebeneinander.

@Gunnar Bittersmann - ist das so sauber?

Ich würde sagen: nein.

main ist ja ein landmark, sollte also eine Überschrift haben, nämlich die „Seitenüberschrift“. Das heißt: h1 gehört als erstes Kind in main hinein, s.a. MDN.

😷 LLAP

[Rolf B]

Hallo Gunnar,

okay. Hast Du auch eine Idee, wie man es besser machen kann, um das von Jo gewünschte Aussehen zu erhalten? Die nav nach main hinein? Das wäre doch nur legitim, wenn es eine seiteninterne Navigation wäre.

Den Hamburger strukturell aus der main-Box heraushalten, aber visuell hineinschieben? Argh?!

Rolf

[Jo]

Hallo Gunnar,

Hast Du auch eine Idee, wie man es besser machen kann, um das von Jo gewünschte Aussehen zu erhalten?

Dafür wäre ich sehr dankbar. Eigentlich ist es doch nicht ein so ausgefallener Wunsch, oder?

[Gunnar Bittersmann]

@@Rolf B

Den Hamburger strukturell aus der main-Box heraushalten, aber visuell hineinschieben? Argh?!

Hold my beer.

Da war allerdings IIRC so’n Bug in Chromium, dass bei display: contents die Rolle des Elements verlorengeht …

😷 LLAP

[Rolf B]

Hallo Gunnar,

bäh, was für ein fieser Trick. An display:contents muss man erstmal denken.

Und wenn man von schmalem auf breiteres Layout umschaltet, bringt man das nav-Element in Grid-Row 2 bis Ende, Spalte 1, und lässt den Rest in Spalte 2 autoplacen?

Aber ob das was für Jo ist...

Rolf

[Henry]

Hallo Rolf,

An display:contents muss man erstmal denken.

yep, musste ich mir auch erst mal anschauen. Kulturbanause hats zwar ganz gut beschrieben und ein nettes Beispiel, muss aber gleich erst mal ein wenig experimentieren um es ganz zu verstehen.

Gruss
Henry

[Jo]

@Rolf:

Und wenn man von schmalem auf breiteres Layout umschaltet, bringt man das nav-Element in Grid-Row 2 bis Ende, Spalte 1, und lässt den Rest in Spalte 2 autoplacen?

Aber ob das was für Jo ist...

Ob das für mich geeignet ist, weiß ich nicht, weil ich obiges nicht verstehe.

@Gunnar:
So wenig coding! Und es erstaunt sogar Rolf. Ich werde es daher wohl erst in späterer Zukunft verstehen. Aber ich kann es ja als "Black Box" betrachten und verwenden.

@alle:
Vielen Dank, dass Ihr Euch alle um meinen Wunsch kümmert.

Gruß Jo

[Jo]

Hallo,
obige Frage ist noch offen.
Ich habe inzwischen weiter gemacht. Ergebnis hier
Dazu habe ich noch eine Frage. Woher kommen die beiden Streifen hier: links und rechts der "links"?
Ich habe kein gap angegeben.

[Gunnar Bittersmann]

@@Jo

Woher kommen die beiden Streifen hier: […] Ich habe kein gap angegeben.

Aber padding.

😷 LLAP

[Rolf B]

Hallo Jo,

die werden von den Entwicklerwerkzeugen angezeigt, um irgendwas zu visualisieren.

How To Speak Firefox...

Guck mal hier:

Das findest Du auf dem zweiten Tab, rechts im Element-Inspektor ("Layout"). Das verschafft Dir eine Ahnung, was die Farben bedeuten könnten.

Lila - Padding

Und sowas gelbgrünliches - Margin.

Dummerweise sind die Feuerfüchse nicht auf die Idee gekommen, die Farben 1:1 identisch zu machen, deshalb muss man ein bisschen raten. Aber es ist zumindest eine Andeutung.

Rolf

[Sockenpuppe]

Da war allerdings IIRC so’n Bug in Chromium, dass bei display: contents die Rolle des Elements verlorengeht …

Laut Can I Use … ist das wohl nur noch in Opera- und Chromium-Browsern für Android so.

Dort ist auch ein Artikel von Hidde de Vries verlinkt (Achtung: Englisch!), der die Eigenschaft und deren Probleme genauer beschreibt.

[Henry]

Hallo Jo,

Ich meine nicht, wie das Element innnerhalb con <tag> ..</tag> heißen soll, sondern was anstelle von tag zu verwenden ist.

Bin mir nicht sicher, was du meinst. Aber wenn ich richtig liege, dann solltest du vielleicht mal ganz an der Basis anfangen zu lernen?

<section>,<article> z.B. sind meines Wissens nur innerhalb main erlaubt.

Nein muss nicht und selbst <main> ist kein Pflichelement.

Ist z.B. folgendes erlaubt.

 <header>
 ...
 </header>
 <div class=....>
   <nav>
     ....
   </nav>
   <p>
     ....
   </p>
 </div>

Grob gesagt ja, aber es ist ja auch nicht vollständig hier gezeigt.

wobei für das div ein grid definiert wird.

und du kennst dich mit Grid aus?

Gruss
Henry

[Jo]

Hallo Henry,

Aber wenn ich richtig liege, dann solltest du vielleicht mal ganz an der Basis anfangen zu lernen?

Gerade deshalb frage ich.
Meine Vorstellung find ich dort nicht

und du kennst dich mit Grid aus?

Jein