Ausrichten von containern und boxen in einer section

  • 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

  • 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.


    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

  • 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).

  • 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.

  • 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

  • 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.

  • 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.

  • 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).

  • 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

  • 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.

  • 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

  • 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.

    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

  • 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

    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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!