Misanthrop
Mitglied
Hallo liebe Forumer,
folgende Ausgangssituation:
Ich habe einer SECTION folgendes GRID - Raster mitgegeben.
Rechts, eine vertikale Sub-Überschrift die beim querie min-width 60 em in die Horizontale ganz nach oben wandert.
Daneben eine Contentbox und darunter ein Sub-Footer.
Soweit so gut. Mein Problem beginnt mit dem was im header ist:
Momentan ist es ja so, das die Elemente im header die komplette HÖHE der GRID - AREA einnehmen. Das möchte ich nicht so haben.
Die im header befindliche Überschrift darin und auch alle anderen Elemente, sollen eine entsprechende vertikale HÖHE von 70% erhalten UND diese dann auch vertikal mittig stehen.
Wie und womit kann ich das bewerkstelligen.
Jetzt habe ich header mal mit inline-size 70% mitgegeben, aber damit bin ich auf dem Holzweg.
Geht das aber nun mit flexbox, wenn ich einem nachfolgenden div, das ich da zusätzlich angelegt habe:
.irgendwas { display: flex; justify-content: center; }
.irgendwas > * { width: 70%; background-color: rgba(219, 219, 219, 0.5); }
mitgebe.
Habe dies ausprobiert, doch irgendwie ist es nicht die Lösung.
Also was ist da falsch daran?
Folgefrage: Kann man alle Elemente die ich im header habe, so schreiben? Darf ich da div´s nehmen...
Grüße der Misanthrop
folgende Ausgangssituation:
Code:
+---+-----------------+-----------------+
--S--------------------------------------
--U--------------------------------------
--B--------------------------------------
+-H-+-----------------------------------+
--E--------------------------------------
--A--------------------------------------
--D--------------------------------------
+---+-----------------------------------+
---S--U--B--F--O--O--T--E--R-------------
+---------------------+-----------------+Ich habe einer SECTION folgendes GRID - Raster mitgegeben.
Rechts, eine vertikale Sub-Überschrift die beim querie min-width 60 em in die Horizontale ganz nach oben wandert.
Daneben eine Contentbox und darunter ein Sub-Footer.
Soweit so gut. Mein Problem beginnt mit dem was im header ist:
HTML:
<header class="sub-header">
<div class="irgendwas">
<hgroup>
<h2>The Walking Dead: <span>Dead City</span></h2>
<p><span>Old Acquain­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>Momentan ist es ja so, das die Elemente im header die komplette HÖHE der GRID - AREA einnehmen. Das möchte ich nicht so haben.
Die im header befindliche Überschrift darin und auch alle anderen Elemente, sollen eine entsprechende vertikale HÖHE von 70% erhalten UND diese dann auch vertikal mittig stehen.
Wie und womit kann ich das bewerkstelligen.
Jetzt habe ich header mal mit inline-size 70% mitgegeben, aber damit bin ich auf dem Holzweg.
Geht das aber nun mit flexbox, wenn ich einem nachfolgenden div, das ich da zusätzlich angelegt habe:
.irgendwas { display: flex; justify-content: center; }
.irgendwas > * { width: 70%; background-color: rgba(219, 219, 219, 0.5); }
mitgebe.
Habe dies ausprobiert, doch irgendwie ist es nicht die Lösung.
Also was ist da falsch daran?
Folgefrage: Kann man alle Elemente die ich im header habe, so schreiben? Darf ich da div´s nehmen...
Grüße der Misanthrop
Zuletzt bearbeitet:
