{"id":739,"date":"2023-09-22T08:00:00","date_gmt":"2023-09-22T06:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=739"},"modified":"2024-07-24T06:11:48","modified_gmt":"2024-07-24T04:11:48","slug":"css-workshop-5","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2023\/09\/22\/css-workshop-5\/","title":{"rendered":"CSS Workshop 5"},"content":{"rendered":"\n<p>In diesem Teil des Webdesign-Workshops geht es an die Gestaltung des Artikels\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Gestaltung des Artikels:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media all { \narticle { \noverflow: hidden; \ncolor: black; \nbackground-color: lightsteelblue; \npadding: 5px; \nborder-style: solid; \nborder-color: black; \nborder-width: 1px; \n} \n.clearingtext { \nclear: both; \nbackground-color: lightsteelblue; \n} \n.bildlinks { \nfloat: left; \nmargin-top: 5px; \nmargin-right: 15px; \nmargin-bottom: 5px; \nmargin-left: 0px; \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; \n} \n.bildrechts { \nfloat: right; \nmargin-top: 5px; \nmargin-left: 15px; \nmargin-bottom: 5px; \nborder-style: solid; \nborder-width: 1px; \n} \n} \/* Ende von @media nicht l\u00f6schen*\/\n<\/code><\/pre>\n\n\n\n<p>Die Verbindung aus HTML und CSS ergibt nun ein sehr einfaches Layout. Die Webseite hat einen Kopfbereich, eine Navigation in einer linken Spalte und die Artikel in einer zweiten Spalte. Dazu ist das Layout auch flexibel und passt sich der Fenstergr\u00f6\u00dfe des Browsers an. Entsprechend aufbereitet zum Beispiel mit etwas Grafik durchaus eine Webseite wie man sie so ins Internet stellen k\u00f6nnte\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Teil des Webdesign-Workshops geht es an die Gestaltung des Artikels\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-739","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\/739","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=739"}],"version-history":[{"count":3,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/739\/revisions"}],"predecessor-version":[{"id":1663,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/739\/revisions\/1663"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}