{"id":90,"date":"2024-03-22T09:03:10","date_gmt":"2024-03-22T09:03:10","guid":{"rendered":"https:\/\/ai.hasebox.de\/index.php\/2012\/11\/15\/6divs-schachteln\/"},"modified":"2025-12-16T11:46:44","modified_gmt":"2025-12-16T11:46:44","slug":"6divs-schachteln","status":"publish","type":"post","link":"https:\/\/ai.hasebox.de\/index.php\/2024\/03\/22\/6divs-schachteln\/","title":{"rendered":"6 COOKIES! divs Schachteln \/ dein erstes Projekt"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Das folgende Beispiel (vielen Dank Thorben) zeigt dir, wie du divs auch Schachteln kannst.<br>Hier wird ein Layout erzeugt, das f\u00fcr eine Webseite gut geeignet ist, da Bereiche wie<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Header<\/li>\n\n\n\n<li>Menu<\/li>\n\n\n\n<li>Content<\/li>\n\n\n\n<li>und Footer&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">vorhanden sind.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-contrast-color has-accent-5-background-color has-text-color has-background has-link-color wp-elements-1 wp-block-paragraph\">Hier kommt die index.html<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-accent-4-color has-contrast-background-color has-text-color has-background has-link-color wp-elements-2 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><code>&lt;html&gt;<\/code><code>\n<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&lt;head&gt;<br> &lt;title&gt;Meine Cookie Webseite&lt;\/title&gt;<br> &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"design.css\"&gt;<br>&lt;\/head&gt;<\/code><\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<code>\n<p>&lt;body&gt;<br> &lt;div id=\"webseite\"&gt;<br>&nbsp; &lt;div id=\"header\"&gt;<br>&nbsp; &lt;h1&gt;I Like Cookies&lt;\/h1&gt;<br>&nbsp; &lt;\/div&gt;<\/p>\n<p>&nbsp; &lt;div id=\"main\"&gt;<br>&nbsp; &nbsp; &nbsp;&lt;div id=\"left\"&gt;&lt;\/div&gt;<br>&nbsp; &nbsp; &nbsp;&lt;div id=\"right\"&gt;&lt;\/div&gt;<br>&nbsp; &lt;\/div&gt;<\/p>\n<p>&nbsp; &lt;div id=\"footer\"&gt;<br>&nbsp; &lt;\/div&gt;<br>&lt;\/div&gt;<\/p>\n<\/code>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>&lt;\/body&gt;<br>&lt;\/html&gt;<br><\/code><\/p>\n<\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-contrast-color has-accent-5-background-color has-text-color has-background has-link-color wp-elements-3 wp-block-paragraph\">Hier kommt die modern.css<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-accent-4-color has-contrast-background-color has-text-color has-background has-link-color wp-elements-4 has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\"><code>body {<br>background-color:lightyellow;<br>text-align:center;<br>}<br>#webseite {<br>width:1000px;<br>margin:0 auto;<br>}<br>#header {<br>width:1000px;<br>height:150px;<br>background:orange;<br>border-radius: 10px;<br>}<br>#header h1 {<br>padding-top:50px;<br>font-size:60px;<br>font-weight:bold;<br>color:white;<br>font-family:Courier;<br>}<br>#main {<br>width:1000px;<br>}<br>#left {<br>float:left;<br>width:200px;<br>height:300px;<br>background:yellow;<br>margin-top:10px;<br>margin-bottom:10px;<br>border-radius: 6px;<br>}<br>#right{<br>float:right;<br>width:770px;<br>height:300px;<br>background:darkred;<br>margin-top:10px;<br>margin-bottom:10px;<br>border-radius: 6px;<br>}<br>#footer {<br>width:1000px;<br>height:30px;<br>background:orange;<br>border-radius: 10px;<br>margin-top:20px;<br>clear:both;<br>}<\/code><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-contrast-color has-accent-5-background-color has-text-color has-background has-link-color wp-elements-5 wp-block-paragraph\">Hier beginnt nun dein erstes gro\u00dfes Projekt.<br>Diese Projekt wird in den folgenden Aufgaben weiterentwickelt.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-accent-4-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Aufgabe 1: <br>Experimentiere mit H\u00f6he, Breite und den Abst\u00e4nden. Wie sieht dein Layout aus?<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-accent-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"wp-block-paragraph\">Aufgabe 2: <br>Versuche deine Container nun mit entsprechendem Inhalt zu f\u00fcllen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>F\u00fclle den Header mit einer entsprechenden \u00dcberschrift, z.B. HSV, Hello Kitty, etc<\/li>\n\n\n\n<li>F\u00fclle den linken Container mit einem Men\u00fc, dass auf verschiedene Inhalte verweisst,<br>die zu deinem Thema passen.<\/li>\n\n\n\n<li>F\u00fclle deinen rechten Container mit Text und evtl. Bildern<\/li>\n\n\n\n<li>F\u00fclle den Footer mit entsprechendem Inhalt.<br>Schaue dazu auf diversen Internetseiten, welche Art von Inhalt im Footer untergebracht ist.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-accent-4-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-contrast-color has-text-color has-link-color wp-elements-6 wp-block-paragraph\">Aufgabe 3: <br>Speichere deine Dateien unter vorname.html und design.css ab.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-accent-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-contrast-color has-text-color has-link-color wp-elements-7 wp-block-paragraph\">Aufgabe 4: <br>Abgabe \u00fcber itsLearning.<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Hier die Screenshots aus der Stunde:<\/h2>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" data-id=\"2429\" src=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121325-1024x558.png\" alt=\"\" class=\"wp-image-2429\" srcset=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121325-1024x558.png 1024w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121325-300x164.png 300w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121325-768x419.png 768w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121325.png 1267w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"586\" data-id=\"2428\" src=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121342-1024x586.png\" alt=\"\" class=\"wp-image-2428\" srcset=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121342-1024x586.png 1024w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121342-300x172.png 300w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121342-768x439.png 768w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121342.png 1219w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" data-id=\"2427\" src=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121356-1024x589.png\" alt=\"\" class=\"wp-image-2427\" srcset=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121356-1024x589.png 1024w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121356-300x172.png 300w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121356-768x441.png 768w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121356.png 1216w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"959\" height=\"1024\" data-id=\"2432\" src=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121108-959x1024.png\" alt=\"\" class=\"wp-image-2432\" srcset=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121108-959x1024.png 959w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121108-281x300.png 281w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121108-768x820.png 768w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121108.png 1216w\" sizes=\"auto, (max-width: 959px) 100vw, 959px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"1024\" data-id=\"2431\" src=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121156-963x1024.png\" alt=\"\" class=\"wp-image-2431\" srcset=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121156-963x1024.png 963w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121156-282x300.png 282w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121156-768x817.png 768w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121156.png 1218w\" sizes=\"auto, (max-width: 963px) 100vw, 963px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"962\" height=\"1024\" data-id=\"2430\" src=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121211-962x1024.png\" alt=\"\" class=\"wp-image-2430\" srcset=\"https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121211-962x1024.png 962w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121211-282x300.png 282w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121211-768x817.png 768w, https:\/\/ai.hasebox.de\/wp-content\/uploads\/2024\/03\/Screenshot-2025-12-16-121211.png 1214w\" sizes=\"auto, (max-width: 962px) 100vw, 962px\" \/><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Das folgende Beispiel (vielen Dank Thorben) zeigt dir, wie du divs auch Schachteln kannst.Hier wird ein Layout erzeugt, das f\u00fcr eine Webseite gut geeignet ist, da Bereiche wie vorhanden sind. Hier kommt die index.html &lt;html&gt; &lt;head&gt; &lt;title&gt;Meine Cookie Webseite&lt;\/title&gt; &lt;link rel=&#8220;stylesheet&#8220; type=&#8220;text\/css&#8220; href=&#8220;design.css&#8220;&gt;&lt;\/head&gt; &lt;body&gt; &lt;div id=&#8220;webseite&#8220;&gt;&nbsp; &lt;div id=&#8220;header&#8220;&gt;&nbsp; &lt;h1&gt;I Like Cookies&lt;\/h1&gt;&nbsp; &lt;\/div&gt; &nbsp; &lt;div id=&#8220;main&#8220;&gt;&nbsp; [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":27,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":2451,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/90\/revisions\/2451"}],"wp:attachment":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/media?parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/categories?post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/tags?post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}