Hallo zusammen,
ich bin auf Arbeitssuche und arbeite an einer "Projektseite" für meine Bewerbung. Das ganz große Problem ist, dass ich nichts mit Webdesign am Hut habe. Ich hatte zwei Monate lang einen Basickurs belegt aber nun muss ich diese Seite machen, weil ich sie für Bewerbungsgespräche brauche. (Ich will da meine Blogbeiträge vorstellen, bin Texterin)
Das Problem: Ich arbeite nur mit HTML/CSS also kein Java oder so. Ich mache eine Blogseite (bzw. mehrere Seiten).
In der Mitte der Seite steht (mittig) ein div class= "blog-page-container" dort steht eben mein Blogbeitrag und ich möchte von diesem Beitrag aus, auf der rechten Seite, einen Kasten erstellen, wo dann kurze Zusatzinfos stehen. Dieser Kasten ist aktuell eine div class = "sidebar". Auf dem Foto kann man das sehr schön erkennen.
Meine Frage lautet also: Wie kann dieser Infokasten ganz leicht nach rechts geschoben werden und so mit Abstand zu meinem Blogbeitrag stehen, ohne dass der Kasten komplett rechts klebt? Der Infokasten soll eben rechts sein aber nicht ganz am Rand der Webseite sondern nur etwas weiter vom Blogbeitrag weg. Ich will eben diese Textblöcke hier auf dem Foto voneinander trennen aber so, dass der Textblogbeitrag in genau der gleichen Position bleibt. Der dünne Kasten rechts soll nur verschoben werden aber da ich gerade nicht weiterkomme, wollte ich fragen wie das geht.
Das steht gerade im HTML body, main:
<div class="blog-page-container">
<div class="blog-content">
<h1>Blogtitel: Mein erster Blogeintrag</h1>
<p><strong>Lorem Ipsum Lorem</strong> Lorem ipsum dolor sit amet, copraesent...</p>
</div>
<div class="blog-right-gap"></div>
<div class="blog-info-sidebar">
<h2>Infos & Werbung</h2>
<p>Hier steht was über dich, Werbung, Links, etc.</p>
</div>
</div>
Und das im CSS:
/* Haupttext */
.blog-content {
flex: 3;
padding: 40px;
}
/* Abstand zum Recht */
.blog-right-gap {
width: 20px;
}
/* Weiße Infospalte ganz rechts */
.blog-info-sidebar {
flex: 1;
background-color: white;
padding: 20px;
border-left: 1px solid #ffb6c1;
margin-right: 20px;
}
/* Responsiv auf kleinen Bildschirmen */
@media (max-width: 1024px) {
.blog-page-container {
flex-direction: column;
max-width: 95%;
margin: 20px auto;
}
.blog-right-gap {
display: none;
}
.blog-info-sidebar {
margin-right: 0;
border-left: none;
border-top: 1px solid #ffb6c1;
}
}
.blog-content p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 1.2rem;
max-width: 70ch;
}
.blog-content h2 {
line-height: 1.3;
margin-bottom: 1em;
}
/* Textblock exakt unter das Bild setzen */
.blog-content {
padding-left: 0 !important;
margin-left: 0 !important;
}
Wie gesagt, ich bin nicht vom Fach und habe auch mit KI gearbeitet also würde mich freuen, wenn jemand eine Lösung hat.
Danke im Voraus.
