Ausrichten von containern und boxen in einer section

Emess · 24. November 2023

Habe mir wie ich dachte eine recht einfache Aufgabe gestellt. Dachte ich jedenfalls.

Ich habe mir ein Sections Layout ausgedacht die ich einfach ohne viel lesen und Fragen umsetzen wollte.

Jetzt scheitert es schon daran dass ich die section nicht auf dem body ausgerichtet bekomm.

Ich habe es mit margin und auch display:flex; probiert . Ich denke ich habe schon ein grundsätzliches Problem mit der Hirachie.

Brauch ich in meinem Fall eine section ?

Zum Verständnis ein Bild.

test.jpeg

html und css auf:

www.miflo.de/test.html

Emess · 24. November 2023

Irgen was stimmt mit dem Link nicht

https://miflo.de/test.html

Sempervivum · 24. November 2023

Ich rate mal: Du willst die Section zentrieren, und zwar auch vertikal?

Emess · 24. November 2023

exat.

Ich wollte die Section als Flexbox um dieser weiter Boxen zu etablieren. Schon am Anfang habe ich solche wahrscheinlich dumme Probleme

Sempervivum · 24. November 2023

Das ist eine Standardaufgabe und mit Flex sehr einfach zu machen: Du brauchst nur align-items: center; zusätzlich zum display:flex; für body.

Emess · 24. November 2023

Nur wenn ich diese Section in einer zb. meiner Seite so einbauen würde, Dann zerschießt mein ganzes Seiten Layout.

So sieht die section jetzt aus.

HTML

<style>

* {
    margin: 0;
    padding: 0;
}

html, body {
    background-color: rgb(45, 45, 164);
    display: flex;
    width: 100%;
    height: 100%;
}
#section-test {
    margin: auto;
    align-items: center;
    width: 95%;
    height:95%;
    background-color: rgb(210, 226, 87);
}

/* .container {

    width: 90% ;
    height: 90%;
   ;
 
    
} */


</style>

<body>

<section id="section-test">
    <!-- <div class="container"></div>
    <h1>übung</h1>
    <div class="box-text"> -->



    </div>

</section>
</body>

Alles anzeigen

Theoretisch wie ich es gerne hätte .

kopier ich die jetzt so in meine Seite, gibt es einen Gaus

Also zb. in diese

miflo.de

Sempervivum · 24. November 2023

Ich hoffe, ich verstehe das richtig: Du willst, so wie in der Section "Über mich" einen weiteren Container einbauen und der soll zentriert sein? In dem Fall hättest Du ja statt des body die Section für die Unterseite und müsstest darin einen weiteren Container, z. B. ein div, einbauen und den zentrieren.

Allerdings kannst Du das dann wahrscheinlich auch, ohne diesen Zusatzcontainer, durch ein einfaches Padding für die Section erreichen (wenn ich an dein Bild oben denke).

Emess · 24. November 2023

Ich denke du verstehst es richtig

es aber eben so, dass mein versuch meine Seite zerschießen würde.

Deshalb müsste ich verstehen wie ich ich vorgehen muss, wenn ich meine Projektseite erweitern will und ich was teste (zb wie sowas auf dem Bild oben), was auch funktioniert sich aber nicht mit meiner basis-css verträgt.

Sempervivum · 25. November 2023

Ich habe das mal im Seiteninspektor eingerichtet:

pasted-from-clipboard.png

Und für die Container innerhalb dann dieses CSS:

Code

#my-new-section>div {
    flex: 1;
    background-color: lightsalmon;
    border: 2px solid blue;
}

Versuche es so und beobachte, wie es aussieht.

Emess · 25. November 2023

Hab das mal so versucht . border: 2px solid blue; Bräuchte ich ja in dem Falle nicht. Da er in meinem Falle ja nur den body symbolisieren sollte

Zweck der Sache ist: Das ich jede section für sich stylen kann ohne, dass es Auswirkung auf die gesamte Seite (css) hat. Dieses Problem kommt bei mir leider immer wieder vor. Das will ich eigentlich im Keim ersticken.

Hab es unter secctionstest mal hochgeladen

miflo.de

Sempervivum · 25. November 2023

Zitat

Zweck der Sache ist: Das ich jede section für sich stylen kann ohne, dass es Auswirkung auf die gesamte Seite (css) hat.

Du hast ja den einzelnen Sections schon jeweils eine ID gegeben und ich habe für die neue "my-new-section" verwendet. Wenn Du die benutzt, kannst Du gezielt die Elemente ansprechen, die in der betr. Section liegen und alle anderen bleiben außen vor:

Code

main>section#my-new-section>h1 {
    margin: 2rem 0;
}

Wobei Du das main>section auch weg lassen kannst, weil es die ID ja nur ein Mal gibt.

Emess · 25. November 2023

Zitat von Sempervivum
Ich habe das mal im Seiteninspektor eingerichtet:

pasted-from-clipboard.png

Und für die Container innerhalb dann dieses CSS:
Code
#my-new-section>div {
    flex: 1;
    background-color: lightsalmon;
    border: 2px solid blue;
}
Versuche es so und beobachte, wie es aussieht.
Alles anzeigen

1. Sollte da jetzt nicht eine lachfarbene Fläche mit einen 2px blauen Rahmen zusehen sein? Ist es aber nicht!

2. Wenn ich dann innerhalb des div's eine Element zb <h1> müsste die regel

Code

#my-new-section>div>h1{
font-size:small;
}

so aussehen?

3. Wenn jetzt noch boxen ".box1-7" in der section haben will die ich wieder getrennt von einander Konfigurieren möchte (was ja normal selten

vorkommt)

Im html würde es bei mir so aussehen

Code

<section id="my-new-section">
            <h1>Übung</h1>
                <div class="box1></div>
                <div class="box2></div>
                <div class="box3></div>    
                <div class="box4></div>
                <div class="box5></div>
                <div class="box6></div>
                <div class="box7></div>
        </section>

dann würd ja wenn die boxen kinder sind die regel so aussehen

Code

#my-new-section>.box1{
}

da würde man ja Regeln und Klassen in einen Topf werfen.

Immer wenn ich denke jetzt hab ich es kapiert, stellen sich Frage und Ratlosigkeit ein.

Bitte habt Geduld mit mir.

Sempervivum · 25. November 2023

Zitat

1. Sollte da jetzt nicht eine lachfarbene Fläche mit einen 2px blauen Rahmen zusehen sein? Ist es aber nicht!

Anscheinend hast Du das HTML oben im Screenshot nicht bemerkt:

Code

<section id="my-new-section">
    <div></div>
    <div></div>
</section>

Die beiden divs müssen drin sein, damit das zu sehen ist.

Zu 3.: Das CSS ist vollkommen richtig. Ein Selektor kann sowohl Tagnamen als auch Klassen als auch IDs enthalten (und noch mehr).

Sempervivum · 25. November 2023

... auch das CSS in 2. ist richtig.

Emess · 25. November 2023

Danke für deine Geduld. Ich versuch das mal zu verarbeiten

Emess · 25. November 2023

Um es zu testen habe ich es jetzt mal genau von dir übernommen

HTML

<section id="my-new-section">

  <h1>Übung</h1>
  <div></div>

  <div></div>


</section>

CSS

#my-new-section>div {
    flex: 1;
    background-color: lightsalmon;
    border: 2px solid blue;
}
#my-new-section>h1 {
    margin: 2rem 0;
}

Doch bei mir sieht das nicht wie gewollt aus

Ich stelle mir eine bildschirmfüllende section als flex vor in die ich dann flexboxen nach Gusto einfügen kann.

schau es dir doch mal bitte an.

miflo.de

Sempervivum · 25. November 2023

Dass die beiden divs nicht sichtbar sind, liegt daran, dass allgemein bei Section die Regel align-items: center; steht und da sie keinen Inhalt haben ist die Breite 0. Tu einen Inhalt hinein oder verwende align-items: stretch; spezifisch für diese Section.

Emess · 25. November 2023

Also ich hab mal etwas rumgebastelt und mal einige Boxen in der section etabliert.

Obwohl ich gelernt habe wie man sich classen spart. Lassen die sich doch nicht so richtig stylen. Weil sich das css der main-section (siehe Bild)

damit reinhängt. Deshalb lässt sich wohl auch die <h1> nicht ganz nach oben bewegen.

Die Boxen sollen rein ich sag einfach mal

box1 box2

box3

box 4

box 5 - 7

da hängt es etwas wahrscheinlich wegen css

Bitte Bild anschauen und nochmal wenn Zeit die hoch geladene Seite

section1.jpeg

miflo.de

Sempervivum · 25. November 2023

Auf dem Bild sind die Boxen ja einfach nebeneinander angeordnet.

Ich habe mich mal an diesem orientiert:

Zitat

Die Boxen sollen rein ich sag einfach mal

box1 box2

box3

box 4

box 5 - 7

und das wieder im Seiteninspektor eingerichtet.

HTML

<section id="my-new-section">

  <h1>Übung</h1>
    <div class="horizontal">
  <div class="box1">Box1</div>
  <div class="box1">Box2</div>
        </div>
  <div class="box1">Box3</div>
  <div class="box1">Box4</div>
        <div class="horizontal">
  <div class="box1">Box5</div>
  <div class="box1">Box6</div>
  <div class="box1">Box7</div>
    </div>
</section>

Alles anzeigen

Damit das Styling der Boxen auch wirkt, wenn diese in einem weiteren Container stecken, musst Du statt des Pfeils ">" jetzt ein Leerzeichen im Selektor verwenden:

Code

#my-new-section .box1 {
    display: column; /* <-- das gibt es nicht, der Browser erkennt es als fehlerhaft. */
    /* align-self: flex-start; */
    margin-left: 30px;
    width: 250px;
    height: 80px;
    row-gap: 5px;
    background-color: pink;
}

Und dann die Boxen in den beiden Wrappern mit der Klasse "horizontal" nebeneinander anordnen:

Code

.horizontal {
    display: flex;
}

Ich hoffe, ich habe nichts vergessen.

Dann sieht es so aus:

pasted-from-clipboard.png

Emess · 25. November 2023

Mir ist gerade ein Grundsätzliche Problem aufgefallen

Um jede einzelne Section einzeln behandeln zu können habe ich folgendes Problem ausgemacht .

Da fängt schon am Anfang an. Und zwar hier.

HTML

<main>
    <header>
    <section>
        <h1>Flexboxprojekt</h1>
        <p>Hier wird gerade renoviert<br>also bissje Geduld</p>
    </section>
        <img src="img/kasper.png">
    </header>

Und zwar umschließt <main> dierekt nach <nav> die gesamte Seite bis vor den <footer>

Dieses main beeinflusst demzufolge alles darin enthaltene.

Hier die meiner Meinung nach böse css

CSS

{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

html, body{

    height: 100%;  
    background-color: blue;
}

#brand
{
    margin: 0 1rem;
    font-size: 1.2em;
    font-weight: bold;
    color: aqua;
}

#menu
{
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0a0909;
    color: white;
}

#menu>ul
{
    display: flex;
    background-color: #0a0909;
    height: 100%;
}

#menu>ul>li
{
    padding: 0 1rem;
    list-style: none;
    border-bottom: 4px solid transparent;
    display: flex;
    align-items: center;
}

#menu>ul>li:hover
{
    border-color: purple;
}

#menu>ul>li>a
{
    text-decoration: none;
    font-size: 1em;
    font-family: sans-serif;
    color: white;
}

#menu>button
{
    display: none;
    justify-content: space-between;
    flex-direction: column;
    width: 30px;
    height: 23px;
    background: none;
    border: none;
    cursor: pointer;
}

#menu>button>span
{
    height: 4px;
    width: 100%;
    background-color: white;
    border-radius: 2px;
}

main>header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100vh - 80px);
    background-color: black;
}
main>header>section
{
    flex-grow: 1;
    font-weight: bold;
    text-align: center;
}
main>header>section>h1
{
   
   color: darkkhaki;
   margin-bottom: 2rem;
}

main>header>section>p
{
   font-size: 2rem;
   color: bisque;
}

main>header>img
{
    min-width: 200px;
    max-height: 100%;
    margin-left: 1rem;
}

main>section
{
    min-height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
main>section>h1
{
    margin: 2rem 0;
   
}
@media only screen and (max-width: 950px)
{
    #brand
    {
        margin-left: 1rem;
    }
    #menu>ul
    {
        position: absolute;
        display: none;
        flex-direction: column;
        width: 100%;
        height: auto;
        align-items: center;
        top: 80px;
    }
    #menu>ul.active
    {
        display: flex;
    }
    #menu>ul>li
    {
        padding: 1rem 0;
    }
    #menu>button
    {
        display: flex;
        margin-right: 1rem;
    }

    main>header
    {
        flex-direction: column;
        justify-content: space-around;
    }
    main>header>section
    {
        flex-grow: 0;
        order: 1;
    }
    main>header>img
    {
        max-width: 75%;
        min-height: 40%;
        margin: 0;
    }

    main>header>section>h1
    {
        font-size:1.2em ;
        color: darkkhaki;
        margin-bottom: 2rem;
    }

    main>header>section>p
    {
        font-size: 1.5em;
        color: bisque;
 
    }

}

Alles anzeigen

Mein Idee wäre die main komplett zu entfernen und dem Header eine id zb. #kopf. Also <header id="kopf">

Kannst das bestätigen

Ich glaube das ist Ursache vieler Probleme

Ausrichten von containern und boxen in einer section

Jetzt mitmachen!

Teilen

Tags