Anordnung von 2 Themenblöcke

[shangli]

Hallo Zusammen,
ich schreibe gerade einen "Block". Den würde ich auch gerne etwas "designen". Da ich echt noch im HTML und CSS Game bin hätte ich eine Frage.

Ich würde gerne die Zeile "Mein Trainingsplan sah wie folgt aus" und "Wiederholungen/Sätze" neben einander machen (so wie ein Linken Block und einen Rechten Block).
Das geschrieben würde ich dann unter die zwei Headlines machen.
Folgendes habe ich im html code geschrieben.
Hab ich irgendwas "falsches" geschrieben oder kenn ich die css begriffe nicht ?


Das ist der CSS Code.
Vielen Dank für eure Hilfe.
LG

 

[shangli]

Hallo Zusammen,
ich hab es geschafft das Problem zu lösen mit noch einem div Container. Meine Frage ist jetzt. Wie schaffe ich es einen Abstand zwischen den beiden herzustellen. Bzw den rechten Container ein Stück nach rechts zu schieben, damit sicher der Linke Container "vergrößern" kann ?

Danke

 

[Sempervivum]

Guten Morgen!

ich hab es geschafft das Problem zu lösen

Das liest man immer gern!

Wie schaffe ich es einen Abstand zwischen den beiden herzustellen. Bzw den rechten Container ein Stück nach rechts zu schieben, damit sicher der Linke Container "vergrößern" kann ?

Das sind jetzt eigentlich zwei Fragen.

• Einen Abstand kannst Du mit "gap" erzeugen.
• Und mit flex: 1; für ein Flex-Item kannst Du einstellen, in welchem Verhältnis sich die Breite einstellt. Bei flex: 1; für beide ist die Breite gleich. Und wenn Du z. B. dem linken flex: 2; geben würdest, wäre dieser doppelt so breit.

Und übrigens: Code besser als Text in Code-Tags und nicht als Screenshot posten:

 

[shangli]

Hallo nochmal,
ich hab mir das mit dem flex mal genauer angeschaut und so. Ich hätte mal dazu eine Frage. Egal was ich zum "flex" schreibe, der Container bewegt sich nicht.
Ich habe zb
justify-content: flex-end; was den container nach rechts (so habe ich es verstanden) schieben müsste.
Leider tut sich nichts sondern er bleibt wie sonst immer




Der Css Code sieht bis jetzt so aus

.flex-container {
            background-color: white;
            display: flex;
            justify-content: flex-end;
            border: solid black;
        }
        .flex-item{
            border: solid black;           
            
        }

und das geschrieben also Text sieht so aus

<div class="flex-container">
        <div class="flex-item">
        <h4 > <strong>Mein Trainingsplan sah wie folgt aus</strong></h4>
        
            <b>Push:</b>
            Bankdrücken, Brustpresse, Butterfly Maschine, Cable Fly (oben), Schulterdrücken (Kurzhantel), Dips,
            Trizepsdrücken (am Seil)
            <br><b>Pull:</b>
            Latzug (breiter Griff), Rudern (am Kabelturm), Latzug (enger Griff), Rudermaschine, Umgekehrtes Seitheben(an
            der Maschine), Hammer Curl (am Seil), Bizeps Curl (Kurzhantel)
            <br><b>Leg:</b>
            Beinpresse, Hacksquats, Beinstrecker, Beinbeuger, Rückenstrecker, Sit Ups, Seitlicher Bauch
            <br> Insgesamt waren es ca 7 Übungen pro Tag die ca 1:30 Stunden in Anspruch genommen haben.
        </div>
        <div class="flex-item">
            <h3  style="color: yellow;"> Wiederholungen/Sätze </h3>
            <strong>Wiederholungen:</strong> In dem Trainingsplan habe ich auf ca. 10 bis 12 Wiederholungen trainiert.
            Warum 10 bis 12 Wiederholungen ? Laut Studien und "Experten" soll diese Wiederholungsanzahl
            die beste Anzahl für den Muskelaufbau sein. Dies hab ich natürlich nicht am Anfang gewusst und hab einfach
            ohne viel hinterfragen einfach trainiert. Am Anfang ist es auch nicht
            relevant, da man erst anfängt sich damit zu beschäftigen und am Ende probiert zu verstehen warum man es
            genau so macht.
            <br><strong>Sätze:</strong> Meine Sätze beliefen sich auf 3 bis 4 Sätze. Bei den Übungen die mir mehr
            gefallen haben, habe ich auch mehr Sätze gemacht (Training sollte immer noch Spaß machen)
        </div>
        
    </div>

Könnt ihr mir weiterhelfen ?
Vielen Dank

 

[Sempervivum]

justify-content und Co. kann nur funktionieren, wenn freier Raum da ist, der zu verteilen ist. Bei deinem Beispiel ist das nicht der Fall. Versuche es mit gap und flex. Schau hier und versuche, für diese beiden die Werte zu verändern:
https://jsfiddle.net/Sempervivum/r5qfmuba/

 

[Lupus]

Ich frage mich warum der Textbereich keinen <p>-Tag hat. Darüber kann man doch mit CSS auch Abstände steuern?

 

[Lupus]

Probier mal dieses CSS
h3, h4{
padding: 0 10px;
}
p{
padding:10px;
}
.flex-container {
background-color: white;
display: flex;
justify-content: flex-end;
/*border: solid black;*/
gap: 1em;
}
.flex-item{
border: solid black;
}
.flex-item.left {
flex: 1;
}
.flex-item.right {
flex: 1;
}