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
