{"id":733,"date":"2023-09-19T08:00:00","date_gmt":"2023-09-19T06:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=733"},"modified":"2024-07-24T06:12:02","modified_gmt":"2024-07-24T04:12:02","slug":"css-workshop-2","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2023\/09\/19\/css-workshop-2\/","title":{"rendered":"CSS Workshop 2"},"content":{"rendered":"\n<p>In diesem Teil des Webdesign-Workshops geht es an die Gestaltung des Wrappers und des Kopfbereiches\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Der wrapper-Bereich:<\/strong><\/p>\n\n\n\n<p>Mit dem wrapper wird nur der \u201eSchutzumschlag\u201c der Webseite gestaltet.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n#wrapper {\nmargin: 5px;\nbackground-color: white;\ncolor: black;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p>Check im Browser: Die Position der Elmente hat sich wieder etwas verbessert. Die Elemente kleben nicht mehr am Bildschirmrand\u2026<\/p>\n\n\n\n<p><strong>Der Kopfbereich:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all {\n\/*\nKommentar: Die CSS f\u00fcr den Kopfbereich\n*\/\n\nheader {\nheight: 80px;\nbackground-image: url(..\/headergrafik.jpg);\nbackground-repeat: no-repeat;\nbackground-color: steelblue;\ncolor: white;\nmargin-top: 5px;\nmargin-right: 5px;\nmargin-bottom: 5px;\nmargin-left: 5px;\nborder-top-width: 1px;\nborder-right-width: 1px;\nborder-bottom-width: 1px;\nborder-left-width: 1px;\nborder-top-style: solid;\nborder-right-style: solid;\nborder-bottom-style: solid;\nborder-left-style: solid;\nborder-top-color: black;\nborder-right-color: black;\nborder-bottom-color: black;\nborder-left-color: black;\npadding-top: 5px;\npadding-right: 5px;\npadding-bottom: 5px;\npadding-left: 5px;\n}\n} \/* Ende von @media nicht l\u00f6schen*\/<\/code><\/pre>\n\n\n\n<p>Check im Browser: Es ist jetzt ein Kopfbereich entstanden. Aktuell fungiert der Kopfbereich nur als Platzhalter. Sp\u00e4ter k\u00f6nnten dort Inhalte wie etwa ein Logo eingef\u00fcgt werden\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Teil des Webdesign-Workshops geht es an die Gestaltung des Wrappers und des Kopfbereiches\u2026<\/p>\n","protected":false},"author":1,"featured_media":545,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=733"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/733\/revisions"}],"predecessor-version":[{"id":1666,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/733\/revisions\/1666"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/545"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}