Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

[einsiedler]

Hallo liebe Forumer, habe nun etwas mehr Zeit gehabt und "weiter gebastelt".

Wie gesagt handelt es sich hier immer noch um Fülltexte mit diversen Fotos + Videos um meine Idee einer einfachen Site zu veranschaulichen.

Hier der Link zur Testseite V9a

Ich habe mich jetzt mit dem TAB-SKIP beschäftigt, bitte probiert es mal aus ob es geht, sprachlich-vorgelesen wird im Edge alles genau nach Vorgabe. Eigentlich gefällt es mir so ganz gut, wenn es so korrekt ist, villeicht aber könnte man die TAB-LINKS versteckt links von der Überschrift hervor-erscheinen lassen wie bei diesem Webdesigner: Beispielseite TAB + TAB ... und schon... Nach diesem Vorbild habe ich mich orientiert.

b) Die ganzen Menüsachen haben jetzt doch ein eigenes Row, sorry Rolf... Was mich gestört hat wenn der Hauptnavigations-Button überlagernd rechts auf der Überschrift wäre (wie Dein Vorgabe Beispiel), so ist es eben diese Überlagerung die recht schnell eintritt, wenn das Bildschirmfenster beispielsweise schmaler wird. So kann man dann die Überschrift nicht mehr lesen.

Jetzt wo die beiden Navis in einer eigenen Row sind kann ich mir überlegen ob, wenn das Bildschirmfenster zu schmal wird, nicht eine Navi in eine nächste Zeile rutscht. So wie es schon ist wenn man das Bildschirmfenster ganz verschmälern würde, also dann untereinander steht. Die Reihenfolge kann man ja im html festlegen.

c) Zu den Related - Links, immer am Ende einer SECTION Die habe ich mit einem übergeordneten zusätzlichen div, anscheinend geht es nicht ohne, diese Links stehen nun mittig und haben, wie ich es mir gedacht habe, eine vorgegebene Breite (von 50%).

So sieht es nun aus:

<div class="related-links">
 <details> 
	<summary>
		Weiterführende Links:
	</summary>
	<ul>
		<li><a href="https://thewalkingdead.fandom.com/de/wiki/Negan_Smith">Negan & Lucille</a></li>
		<li><a href="https://www.moviepilot.de/serie/the-walking-dead-dead-city">The Walking Dead: Dead City</a></li>
	</ul>
 </details>
</div>

.related-links {
		display: flex;
		justify-content: center;		
	}
	
	.related-links > details {		
		width: 50%;
		background-color: rgba(219, 219, 219, 0.5);
	}

Details benötige ich noch für andere stylische Angaben, deshalb das übergeordnete div.

Anscheinend funktioniert hier nur eine % - Angabe, ich habe mal 80em eingesetzt, dann schoss alles seitlich rechts hinüber.

Genauso habe ich es oben in der Navi mit dem Skip-To-Section - Menu, gemacht.

Nach dem Muster und es funktioniert. Mittig und 50% breit.

Nur muss ich nochmal sehen, dass Beisielsweise bei einem query - Umbruch (meinetwegen bei 50em) das Skip-To-Section - Menu in die nächste Zeile rutscht und das Hauptmenü darüber steht.

d) Nicht ganz so einfach geht es mit dem vertikalen Sub - Menü.

Hier habe ich header .sub-header mal mit inline-size auf eine Breite von 50% gesetzt, das ist aber nicht die richtige Lösung.

Mein Problem ist hier, das header .sub-header das nächste Kindelement meines Grids ist (brauche ich für die Überschriftendrehung) und ich habe mal bei den darauffolgenden Kindelementen (hgroup und das div) display: flex ausprobiert doch dann zerschoss mir alles.

<header class="sub-header">
 <hgroup>
	<h2>The Walking Dead: <span>Dead City</span></h2>
	 <p><span>Old Acquain&shy;tances</span> - <span>13. Okt. 2023</span></p>
 </hgroup>
	<div>
		<p class="blogpost"><span>Posting vom</span> 08-02-2024 -- 11:25 Uhr -- Admin</p>
		<ul>
			<li class="tags"><a href="https://www.facebook.com/hashtag/TheWalkingDead">#TheWalkingDead</a><a href="https://www.facebook.com/hashtag/DeadCity">#DeadCity</a><a href="https://www.facebook.com/hashtag/Negan">#Negan</a></li>
		</ul>
 </div>						
</header>

Das ist mein Problem. Auch wollte ich fragen ob mein html so richtig ist, ich mein das mit dem header, hgroup und dem div darin. Kann man es so machen?

Eventuell brauche ich sogar direkt nach dem header ein weiteres einrahmende DIV dem ich per flex mittig und auf 50% setzen kann.

<header class="sub-header">
 <div class="irgendwas">
 <hgroup>
	<h2>The Walking Dead: <span>Dead City</span></h2>
	 <p><span>Old Acquain&shy;tances</span> - <span>13. Okt. 2023</span></p>
 </hgroup>
 <div>
		<p class="blogpost"><span>Posting vom</span> 08-02-2024 -- 11:25 Uhr -- Admin</p>
		<ul>
			<li class="tags"><a href="https://www.facebook.com/hashtag/TheWalkingDead">#TheWalkingDead</a><a href="https://www.facebook.com/hashtag/DeadCity">#DeadCity</a><a href="https://www.facebook.com/hashtag/Negan">#Negan</a></li>
		</ul>
 </div>	
</div>					
</header

(JUCHU, ich hab endlich DIVeritis). Ich habe da keine Idee.

e) Wie ich das jetzt mit dem Nach-OBEN Button löse, weiss ich noch nicht, entweder scrollt der innerhalb von article hoch und runter oder bei jededer section, das muss ich noch ausprobieren dann zeige ich es euch nochmal.

Was mich jetzt aber dringend interessiert, weil es ja um die richtige Gesamt-Struktur geht: Ist es richtig wie ich es mit article und der section (innerhalb von article) umgehe.

Es handelt sich ja hier um zweierlei Themen: Einmal um die Serie "The Walking Dead: Dead City" , beim anderen article um die Serie : The Walking Dead: Daryl Dixon. Ich habe es mal extra so ausgewählt.

Ist es so richtig?

Eine letzte Sache (für heute) noch: Der Validator meckert beim Sprung-Botton nach oben, da möchte ich unter dem Fontawesome Button --skip-to-top-- stehen haben, das habe ich mit <br/> in die nächste Zeile rücken lassen. Und da meckert der Validator.

Meine Frage: Wie bringt man die Schrift mit einer besserer Art in die nächste Zeile?

Soviel für heute. gute n8.

Grüße der einsiedler