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
Um es zu testen habe ich es jetzt mal genau von dir übernommen
<section id="my-new-section">
<h1>Übung</h1>
<div></div>
<div></div>
</section>#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.
Danke für deine Geduld. Ich versuch das mal zu verarbeiten
Alles anzeigenIch habe das mal im Seiteninspektor eingerichtet:
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.
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
#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
<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
#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.
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
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.
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.
<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>Theoretisch wie ich es gerne hätte .
kopier ich die jetzt so in meine Seite, gibt es einen Gaus
Also zb. in diese
exat.
Ich wollte die Section als Flexbox um dieser weiter Boxen zu etablieren. Schon am Anfang habe ich solche wahrscheinlich dumme Probleme
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.
html und css auf:
Hab mir das mal aus Neugier und Altersspieltrieb angeschaut.
Wo findet sowas Anwendung. Gibt es dazu ein Beispiel?
Sehr undurchsichtig sogar wenn man es bei codepen testen kann.
Trotzdem war das die bisher beste Erklärung.
Vielen Dank
Ok das hat geklappt.
Zum Verständnis hab viel gelesen und gesehen, aber eine Klarheit habe ich nicht gefunden.
Unterschied Kindelement nth-child und Kindelemente eines Types nth-of-type.
Wann nehm ich was?
Habs ganz gut hin bekommen Hab nur nicht heraus bekommen wie ich ganz auf Klassen verzichten kann.
.item:nth-of-type(4n + 1){
font-weight: bold;
color:blue;
}
.item:nth-of-type(4n + 2){
font-weight: bold;
text-align: left;
}
.item:nth-of-type(4n + 3){
text-align: left;
}
.item:nth-of-type(4n + 4){
text-align: right;
margin-right: 8px;
color:darkorange
}Kannst ja morgen mal drüber schauen und mir sagen was ich besser machen kann.
So hatte ich es mir vorgestellt. Hatte auch in dieser Richtung ähnlich experimentiert. Leider kläglich gescheitert.
Vielen Dank!
Jetzt will ich mal sehen was ich in meinem Fall mit nth-of-type anfangen kann-
Ansonsten ist die Lektion Modal ohne Bootstrap erst mal erfolgreich abgeschlossen.
Noch mal vielen Dank!
Hier ist die Bastelstube
Wie meinst Du das? Klappt es mit dem Scrolling noch nicht, wenn der Inhalt höher als das Browserfenster wird?
Ich hab mal ein Filmchen dran gehängt
Das ist ja alles sehr interessant. Und mit dem back-button das Modal beenden wäre ja auch ein nice-2-have.
Doch wie kann ich in der Mobil Ansicht mein gesamtes Modal lesen?
Ok ich konnte es auch in der Smartphone Ansicht ausrichten.
Aber bevor wir die Sache mitnth-of-type angehen. Hätte ich gerne, dass dier Hintergrund Inaktiv ist . D.H. Nur das Modal soll scrollen nicht die Seite im Hintergrund. Ich hoffe du verstehst was ich meine. Du kannst es sehen wenn du das Modal in kleiner Smartphone - Ansicht siehst
Hab da noch eine Frage zur Ausrichtung des Textes.
Sollte mit
.grid-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
} <div class="modal-body">
<div class="grid-container">
<div class="nr grid-item">Nr. 1</div>
<div class="name grid-item">Michael Schlegel</div>
<div class="desscription grid-item">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen
Im allgemeinen Sprachgebrauch haben sich die Begriffe Angler oder Angelfischer durchgesetzt
</div>der Text nicht oben links ausgerichtet sein?