HTML: Wie kann ich die Titelbox verschieben?
Hey,
ich verzweifle mittlerweile an meinen eigenen Sinnen und hab schon manches probiert. Das Einbinden von KI (ChatGPT) hat mir dann den Rest gegeben, da alles was davon kam einfach keinen Sinn ergab.
Ich habe zwei Container, also left-colum und right-colum.
Wie man in dem Code sehen kann, wird die Klasse "whatis-titlebox" im ersten Teil korrekt angezeigt. Es wird das Szenario eintreten, dass die linke Spalte leer beiben wird und nur die rechte mit Text gefüllt wird.
Dazu dachte ich mir, kopiere ich den Standardteil und spreche die Kopie dann mit "rightinput" um eben "whatis-titlebox" aus dem 2. Teil, also "rightinput whatis-titlebox" über die rechte colum zu legen, sodass der Text darin linksbündig mit dem Text sichtbar wird. Fehlanzeige, ich habe es nicht geschafft. Vielleicht ist mein Code auch einfach nur falsch geschrieben.
Ich blicke da nicht mehr durch und hoffe, dass ich hier Hilfe erhalte.
HTML:
<div class="leidfadenmain-input">
<div class="whatis">
<div class="whatis-titlebox">
<h2 class="whatis-title-txt">Über</h2>
</div>
<div class="container">
<div class="left-column">
<!-- Linker Text -->
<p class="whatis-txt"></p>
<p class="whatis-txt"></p>
</div>
<div class="divider"></div>
<div class="right-column">
<!-- Rechter Text bei Bedarf -->
<p class="whatis-txt"></p>
</div>
</div>
</div>
<div class="whatis">
<div class="rightinput whatis-titlebox">
<h2 class="whatis-title-txt">Über</h2>
</div>
<div class="container">
<div class="left-column">
<!-- Linker Text -->
</div>
<div class="divider"></div>
<div class="right-column">
<!-- Rechter Text bei Bedarf -->
<p class="whatis-txt"></p>
</div>
</div>
</div>
</div>
CSS:
.leidfadenmain-input {
padding-top: 100px;
display: flex;
flex-direction: column;
}
.whatis {
display: flex;
flex-direction: column; /* Ändert die Ausrichtung auf vertikal */
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.whatis-txt {
padding-bottom: 15px;
}
.whatis .whatis-titlebox {
position: relative;
margin-bottom: 20px;
top: 0;
}
.rightinput .whatis-titlebox {
margin-bottom: 20px;
top: 0;
left: 50%; /* Zentriert die Überschrift horizontal */
transform: translateX(-50%); /* Zentriert die Überschrift horizontal */
}
.whatis .whatis-title-txt {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
.whatis .left-column,
.whatis .right-column {
width: 45%;
}
.whatis .divider {
width: 1px;
height: auto;
background-color: black; /* Ändere die Farbe bei Bedarf */
margin: 0 10px;
}
.whatis .container {
display: flex;
align-items: stretch;
width: 100%;
}
Einfach erklärt.: ".rightinput .whatis-titlebox" soll, sofern gebraucht, über right-colum platziert werden.
Sofern ihr mir weiterhelfen könntet, wäre ich euch dankbar!
Vielen Dank!
Liebe Grüße
1 Antwort
Wenn die linke Spalte nicht gebraucht wird, sollte sie auch nicht herausgerendert werden. Das heißt, der Browser sollte in diesem Fall nur so ein Markup für den Container erhalten:
<div class="container">
<div class="right-column">
<!-- ... -->
</div>
</div>
Da du das HTML offensichtlich selbst definierst, sollte das kein Problem darstellen.
Im Notfall könnte man auch die linke Spalte mitsamt Trenner via CSS ausblenden, vorausgesetzt, das Element ist tatsächlich leer (keinerlei Kindelemente oder Text, inklusive Leerzeichen):
.whatis .left-column:empty,
.whatis .left-column:empty + .divider {
display: none
}
Die linke Spalte hingegen leer, aber sichtbar mitsamt Trenner herauszurendern und die Überschrift über die rechte Spalte zu verschieben, erscheint für mich unlogisch. Zum einen zeigst du dann überflüssige Inhalte an (die von einem Seitenbesucher vermutlich als unästhetisch und fehlerhaft gewertet werden) und zum anderen unterbricht es den Lesefluss.
Wenn du es aber unbedingt erzwingen möchtest, wäre es besser, der Titelbox (.whatis-titlebox) eine zusätzliche Modifikatorklasse zuzuweisen, mit der sie verschoben wird.
Beispiel:
<div class="whatis-titlebox whatis-titlebox-right">
<h2 class="whatis-title-txt">Über</h2>
</div>
CSS:
.whatis-titlebox-right {
margin-left: calc(45% + 1px);
}
Elemente zu duplizieren und dann übereinanderzuschieben ist keine gute Idee.