CSS verstehen?
Ich schreibe bald eine Prüfung die html/css beinhaltet. An sich ist es einfach nur verstehe ich nicht wie die div boxen funktionieren. Ich habe z.B eine hauptbox wo ein banner drin ist und unten 2 boxen neben einander. Nur behersche ich diese boxen irgendwie nicht. Also die eine springt mal da hin und die andere wo anders hin. Margin und padding will irgendwie nicht funktionieren. Kann mir jemand erklären wie die Boxen funktionieren? Also wonach richten Sie sich und wann machen Sie was?
Mein Code:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.hauptbox{border-style: solid; width: 500px; height: 500px;
}
.banner{border-style: solid; width: 450px; height: 100px; margin: 25px;
}
.content1{border-style: solid; height: 300px; margin-left: 50px;
}
.content2{border-style: solid; height: 300px; margin: 25px; margin-left: 50px; padding-top: 50px;
}
</style>
</head>
<body>
<div class="hauptbox">
<div class="banner">
<div class="content1">
<div class="content2">
</body>
</html>
2 Antworten
Korrigiere zuerst einmal dein HTML. Dem Dokument fehlt ein Doctype, ein Seitentitel (beides sind Pflichtelemente) und die div-Elemente sind allesamt nicht geschlossen.
Ich vermute einmal, du wolltest die Box für das Banner und die Boxen für den Inhalt innerhalb der Hauptbox einordnen.
<!doctype html>
<html>
<head>
<title>Your page title ...</title>
<meta charset="UTF-8">
<style>
/* your css ... */
</style>
</head>
<body>
<div class="hauptbox">
<div class="banner"></div>
<div class="content1"></div>
<div class="content2"></div>
</div>
</body>
</html>
Grundsätzlich gilt, dass jedes HTML-Element, welches auch andere Elemente (Texte, Kommentare, andere HTML-Elemente) in sich aufnehmen kann, einen öffnenden und einen schließenden Tag besitzt. Je konkreten Fall kannst du dazu in der Spezifikation oder auf MDN nachschlagen.
Für die Darstellungsform eines Elements orientiert sich der Browser initial an dem Flow-Layout. Dabei werden die Elemente gemäß ihres Zwecks z.B. als Block- oder Inline-Elemente eingestuft.
Das div-Element dient der Gruppierung von anderen Inhalten und ist daher ein klassisches Blockelement. Blockelemente nehmen automatisch die volle Breite ihres Elternelements an und zwingen daher Folgeelemente auf eine neue Zeile.
Wenn du das Verhalten eines Elements ändern möchtest, kannst du dessen display-Property einen neuen Wert geben.
Beispiel:
<!doctype html>
<head>
<title>Example</title>
<style>div { display: inline }</style>
</head>
<body>
<div>First</div>
<div>Second</div>
</body>
Beide div-Elemente werden nun als Inline-Elemente gehandhabt, die nur den Platz besetzen, den ihr Inhalt maximal benötigt. Sie rutschen somit auf eine Zeile.
Bezogen auf deinen Fall könnte man die Elemente leicht mit einem Grid-Layout positionieren. Das Layout übernimmt in diesem Fall die Darstellung und Positionierung der Kindelemente des Containers.
.hauptbox,
.banner,
.content1,
.content2 {
border-style: 1px solid;
}
.hauptbox {
display: grid;
gap: 25px;
grid-template-areas:
'banner banner'
'content1 content2';
grid-template-rows: 100px 300px;
height: 500px;
padding: 25px;
width: 500px;
}
.banner {
grid-area: banner;
}
.content1 {
grid-area: content1;
}
.content2 {
grid-area: content2;
}
Dafür wird ein Area-Template definiert, welches angibt, welcher Bereich wo platziert werden soll. Die inneren Abstände zwischen den Spalten und Zeilen wird mit dem gap-Property festgelegt und für den äußeren Abstand reicht es aus, einen Innenabstand für den Container zu definieren.
Erstmal fehlen bei deinen <div> die </div>
So dürften erst mal alle wahllos ineinander geschachtelt sein
Je nachdem was der Browser mit dem fehlerhaften Code macht.
Ich würde dir empfehlen nehme GRID zum orden uns positionieren
https://www.w3schools.com/css/css_grid.asp
Im Online Editor kannst du dort auch am Code rumspielen und direkt die Auswirkungen sehen
Um margin und padding besser zu sehen würde ich auch erstmal empfehlen Text in die <div> einzufügen und zudmdätzlich jede Box mit anderer Background color einzufärben
Wenn du dann noch z.b. den Firefox im Entwicklermodus benutzt, dann siehst du auch einfacher wie sich die Werte auswirken und welche Werte vererbt werden und von anderen Elementen bzw vom Default des Browsers benutzt wird
So wie du sie Schachteln möchtest.
Ein DIV ist ein Container
https://www.w3schools.com/tags/tag_div.asp
In den Container fügst du ja dann eigentlich die <p> Elemente, <img> , <table> , Listen oder andere Elemente
Aber wann schließe ich meine divs mit </div>? nach jeder div class? oder nach banner?