{"id":48,"date":"2017-03-22T16:09:02","date_gmt":"2017-03-22T15:09:02","guid":{"rendered":"http:\/\/www.tom-schoftner.at\/web_technologies\/?page_id=48"},"modified":"2017-03-26T13:14:32","modified_gmt":"2017-03-26T11:14:32","slug":"css-unterlagen","status":"publish","type":"page","link":"https:\/\/www.tom-schoftner.at\/web_technologies\/?page_id=48","title":{"rendered":"CSS-Unterlagen"},"content":{"rendered":"<p>Unterlagen f\u00fcr CSS<\/p>\n<p>In diesem Abschnitt k\u00f6nnen Sie \u00dcbungsdateien zum Thema <strong>CSS<\/strong>\u00a0downloaden.<br \/>\nDie L\u00f6sungen sind nach bestem Wissen und Gewissen erstellt worden, erheben jedoch nicht den Anspruch, perfekt zu sein &#8211; besser geht es immer. Die Frage ist nur, ob die perfekte L\u00f6sung auch die verst\u00e4ndlichste L\u00f6sung darstellt.<\/p>\n\t\t\t\t\t\t\t<h3 style=\"margin-bottom:20px;display:block;width:100%;margin-top:10px\">CSS | Beispiele und L\u00f6sungen <\/h3>\r\n\t\t\t\t\t\t<style>\r\n\t\t\t\t<style>\r\n#wpsm_accordion_69 .wpsm_panel-heading{\r\n\tpadding:0px !important;\r\n}\r\n#wpsm_accordion_69 .wpsm_panel-title {\r\n\tmargin:0px !important; \r\n\ttext-transform:none !important;\r\n\tline-height: 1 !important;\r\n}\r\n#wpsm_accordion_69 .wpsm_panel-title a{\r\n\ttext-decoration:none;\r\n\toverflow:hidden;\r\n\tdisplay:block;\r\n\tpadding:0px;\r\n\tfont-size: 18px !important;\r\n\tfont-family: Open Sans !important;\r\n\tcolor:#000000 !important;\r\n\tborder-bottom:0px !important;\r\n}\r\n\r\n#wpsm_accordion_69 .wpsm_panel-title a:focus {\r\noutline: 0px !important;\r\n}\r\n\r\n#wpsm_accordion_69 .wpsm_panel-title a:hover, #wpsm_accordion_69 .wpsm_panel-title a:focus {\r\n\tcolor:#000000 !important;\r\n}\r\n#wpsm_accordion_69 .acc-a{\r\n\tcolor: #000000 !important;\r\n\tbackground-color:#e8e8e8 !important;\r\n\tborder-color: #ddd;\r\n}\r\n#wpsm_accordion_69 .wpsm_panel-default > .wpsm_panel-heading{\r\n\tcolor: #000000 !important;\r\n\tbackground-color: #e8e8e8 !important;\r\n\tborder-color: #e8e8e8 !important;\r\n\tborder-top-left-radius: 0px;\r\n\tborder-top-right-radius: 0px;\r\n}\r\n#wpsm_accordion_69 .wpsm_panel-default {\r\n\t\tborder:1px solid transparent !important;\r\n\t}\r\n#wpsm_accordion_69 {\r\n\tmargin-bottom: 20px;\r\n\toverflow: hidden;\r\n\tfloat: none;\r\n\twidth: 100%;\r\n\tdisplay: block;\r\n}\r\n#wpsm_accordion_69 .ac_title_class{\r\n\tdisplay: block;\r\n\tpadding-top: 12px;\r\n\tpadding-bottom: 12px;\r\n\tpadding-left: 15px;\r\n\tpadding-right: 15px;\r\n}\r\n#wpsm_accordion_69  .wpsm_panel {\r\n\toverflow:hidden;\r\n\t-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .05);\r\n\tbox-shadow: 0 0px 0px rgba(0, 0, 0, .05);\r\n\t\tborder-radius: 4px;\r\n\t}\r\n#wpsm_accordion_69  .wpsm_panel + .wpsm_panel {\r\n\t\tmargin-top: 5px;\r\n\t}\r\n#wpsm_accordion_69  .wpsm_panel-body{\r\n\tbackground-color:#ffffff !important;\r\n\tcolor:#000000 !important;\r\n\tborder-top-color: #e8e8e8 !important;\r\n\tfont-size:16px !important;\r\n\tfont-family: Open Sans !important;\r\n\toverflow: hidden;\r\n\t\tborder: 2px solid #e8e8e8 !important;\r\n\t}\r\n\r\n#wpsm_accordion_69 .ac_open_cl_icon{\r\n\tbackground-color:#e8e8e8 !important;\r\n\tcolor: #000000 !important;\r\n\tfloat:right !important;\r\n\tpadding-top: 12px !important;\r\n\tpadding-bottom: 12px !important;\r\n\tline-height: 1.0 !important;\r\n\tpadding-left: 15px !important;\r\n\tpadding-right: 15px !important;\r\n\tdisplay: inline-block !important;\r\n}\r\n\r\n\t\t\t\r\n\t\t\t<\/style>\t\r\n\t\t\t<\/style>\r\n\t\t\t<div class=\"wpsm_panel-group\" id=\"wpsm_accordion_69\" >\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse1\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tBox-Modell | Beispiel 01\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse1\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Weisen Sie dem eine H\u00f6he von 100 % zu und bauen Sie danach vier Container mit der H\u00f6he von jeweils 25 % und einem Rahmen der St\u00e4rke 1 Pixel (Farbe und Typ nach Ihrem Geschmack) zu. Beachten Sie, dass im Browser keine Scrollleiste sichtbar sein soll. F\u00e4rben Sie die Container zur besseren Sichtbarkeit in unterschiedlichen Farben ein.<\/span>\r\n\r\n<span style=\"color: #000000;\">Tipp: html, body { height:100%; }<\/span>\r\n\r\n\u00a0\r\n\r\n<span style=\"color: #000000;\"><strong>Erweiterung<\/strong>: weisen Sie allen Containern bis auf den untersten Container einen Untenabstand von 5px zu. Die Container sollen aber immer noch 100% der Fl\u00e4che einnehmen. Passen Sie die entsprechenden Eigenschaften an. Sollten Sie zu keiner L\u00f6sung kommen, so \u00fcberlegen Sie sich, warum das sein k\u00f6nnte.<\/span>\r\n<ul>\r\n \t<li><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_01.html\" target=\"_blank\"><strong>Download Beispiel<\/strong><\/a><\/span><\/li>\r\n \t<li><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_01_loesung.html\" target=\"_blank\"><strong>Download L\u00f6sung<\/strong><\/a><\/span><\/li>\r\n \t<li><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_01_erweiterung_loesung.html\" target=\"_blank\"><strong>Download L\u00f6sung Erweiterung<\/strong><\/a><\/span><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse2\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tBox-Modell | Beispiel 02\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse2\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie vier Container mit der H\u00f6he 25% und der Breite 25% (bedenken Sie hierzu, dass Sie dem body eine H\u00f6he von 100% zuweisen). Richten Sie die Container prozentuell so aus, dass der erste Container links abschlie\u00dft und der letzte Container rechts abschlie\u00dft. Die beiden anderen Container sollen dazwischen aufgeteilt werden. F\u00e4rben Sie die vier Container in entsprechenden Farben ein und geben Sie ihnen einen Rahmen von 3px (Typ und Farbe nach Ihrem Geschmack).<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_02.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_02_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse3\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tBox-Modell | Beispiel 03\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse3\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie vier Container mit der H\u00f6he 25% und der Breite 25% (bedenken Sie hierzu, dass Sie dem body eine H\u00f6he von 100% zuweisen). Richten Sie die Container prozentuell so aus, dass der erste Container links abschlie\u00dft und der letzte Container rechts abschlie\u00dft. Die beiden anderen Container sollen dazwischen aufgeteilt werden. F\u00e4rben Sie die vier Container in entsprechenden Farben ein und geben Sie ihnen einen Rahmen von 3px (Typ und Farbe nach Ihrem Geschmack).<\/span>\r\n<ul>\r\n \t<li><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_03.html\" target=\"_blank\"><strong>Download Beispiel<\/strong><\/a><\/span><\/li>\r\n \t<li><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_03_loesung.html\" target=\"_blank\"><strong>Download L\u00f6sung<\/strong><\/a><\/span><\/li>\r\n \t<li><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_03_erweiterung_loesung.html\" target=\"_blank\"><strong>Download L\u00f6sung Erweiterung<\/strong><\/a><\/span><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse4\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tBox-Modell | Beispiel 04\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse4\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie vier Container mit der H\u00f6he 25% und der Breite 25% (bedenken Sie hierzu, dass Sie dem body eine H\u00f6he von 100% zuweisen). Richten Sie die Container so aus, dass diese von rechts oben nach links unten am Bildschirm dargestellt werden. Die Farbgebung der Container obliegt Ihnen.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_04.html\" target=\"_blank\"><span style=\"color: #000000;\"><strong>Download Beispiel<\/strong><\/span><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_04_loesung.html\" target=\"_blank\"><span style=\"color: #000000;\"><strong>Download L\u00f6sung <\/strong><\/span><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_04_erweiterung_loesung.html\" target=\"_blank\"><span style=\"color: #000000;\"><strong>Download L\u00f6sung Erweiterung<\/strong><\/span><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse5\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tBox-Modell | Beispiel 05\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse5\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie vier Container (bedenken Sie hierzu, dass Sie dem body eine H\u00f6he von 100% zuweisen). Richten Sie die Container so aus, dass der erste Container im linken Eck (Breite 100%, H\u00f6he 40%) und der letzte ganz rechts (Breite 40%, H\u00f6he 10%) platziert ist. Die beiden Container dazwischen richten Sie entsprechend aus. Die Farbgebung der Container obliegt Ihnen.<\/span>\r\n\r\n<span style=\"color: #000000;\"><strong>Erweiterung 1<\/strong>: gestalten Sie die Platzierung der Boxen so, dass sie sich um 2% der Bildschirmh\u00f6he \u00fcberlappen.<\/span>\r\n\r\n<span style=\"color: #000000;\"><strong>Erweiterung 2<\/strong>: gestalten Sie die Platzierung der Boxen so, dass sie sich um 10% der jeweiligen Containergr\u00f6\u00dfe \u00fcberlappen.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_05.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_05_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_05_erweiterung_1_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung Erweiterung 1<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_box_05_erweiterung_2_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung Erweiterung 2<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse6\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tSchriften | Beispiel 01\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse6\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie ein HTML-Dokument und weisen Sie dem gesamten Dokument folgende Eigenschaften zu:<\/span>\r\n\r\n<span style=\"color: #000000;\">Die verwendete Schriftart soll Verdana sein; sollte diese beim User nicht existieren, so soll auf Arial zur\u00fcckgegriffen werden; sollte diese auch nicht existieren, dann soll die Standard-Nichtserifenschrift verwendet werden.<\/span>\r\n<span style=\"color: #000000;\"> Die Schriftgr\u00f6\u00dfe soll exakt der Schriftgr\u00f6\u00dfe entsprechen, die der User f\u00fcr seinen Browser (respektive sein Betriebssystem) gew\u00e4hlt hat.<\/span>\r\n<span style=\"color: #000000;\"> Die Zeilenh\u00f6he soll dem 1.5-fachen der Schriftgr\u00f6\u00dfe entsprechen.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_schriften_01.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_schriften_01_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse7\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tSchriften | Beispiel 02\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse7\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie zun\u00e4chst ein HTML-Dokument und weisen Sie dem gesamten Dokument folgende Eigenschaften zu:<\/span>\r\n\r\n<span style=\"color: #000000;\">Die verwendete Schriftart soll Verdana sein; sollte diese beim User nicht existieren, so soll auf Arial zur\u00fcckgegriffen werden; sollte diese auch nicht existieren, dann soll die Standard-Nichtserifenschrift verwendet werden.<\/span>\r\n<span style=\"color: #000000;\"> Die Schriftgr\u00f6\u00dfe soll exakt der Schriftgr\u00f6\u00dfe entsprechen, die der User f\u00fcr seinen Browser (respektive sein Betriebssystem) gew\u00e4hlt hat.<\/span>\r\n<span style=\"color: #000000;\"> Die Zeilenh\u00f6he soll dem 1.5-fachen der Schriftgr\u00f6\u00dfe entsprechen.<\/span>\r\n<span style=\"color: #000000;\"> Geben Sie des Weiteren Formatierungen f\u00fcr die sechs \u00dcberschriften an:<\/span>\r\n<ul>\r\n \t<li><span style=\"color: #000000;\">h1: 200% der voreingestellten Schriftgr\u00f6\u00dfe, nicht fett (normal), nur Gro\u00dfbuchstaben (TIPP: text-transform), 1 Pixel dicke Linie darunter<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">h2: 150%, nicht fett, nur Gro\u00dfbuchstaben<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">h3: 120%, nicht fett, nur Gro\u00dfbuchstaben<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">h4: 100%, fett<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">h5: 90%, fett<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">h6: 80%, fett<\/span><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_schriften_02.html\" target=\"_blank\"><span style=\"color: #000000;\"><strong>Download Beispiel<\/strong><\/span><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_schriften_02_loesung.html\" target=\"_blank\"><span style=\"color: #000000;\"><strong>Download L\u00f6sung<\/strong><\/span><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse8\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tSchriften | Beispiel 03\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse8\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">W\u00e4hlen Sie eine beliebige Schrift und stellen Sie diese in verschiedenen Gr\u00f6\u00dfenabstufungen dar. Achten Sie darauf, dass s\u00e4mtliche (Klein- wie Gro\u00df-) Buchstaben sowie alle Ziffern der Schrift dargestellt werden:<\/span>\r\n\r\n<span style=\"color: #000000;\">Schriftgr\u00f6\u00dfen: 300%, 250%, 200%, 150%, 100%, 90%, 80%<\/span>\r\n<span style=\"color: #000000;\"> W\u00e4hlen Sie danach ein paar (f\u00fcr die Schriftart charakteristische) Buchstaben aus und stellen Sie diese wie folgt dar:<\/span>\r\n\r\n<span style=\"color: #000000;\">Schriftgr\u00f6\u00dfe 500%<\/span>\r\n<span style=\"color: #000000;\"> Textschatten: x-Versatz 2-10px, y-Versatz 2-10px, Weichzeichnung 0px | 5px | 10px, mittleres Grau<\/span>\r\n<span style=\"color: #000000;\"> Stellen Sie die Variationen nebeneinander dar.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_schriften_03.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_schriften_03_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse9\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tSchriften | Beispiel 04\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse9\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Stellen Sie alle Standardschriftarten (Arial, Verdana, Helvetica, Georgia, Times New Roman, Courier New) untereinander und in verschiedenen Gr\u00f6\u00dfenabstufungen dar, sodass man die Schriften untereinander vergleichen kann. Achten Sie darauf, dass s\u00e4mtliche (Klein- wie Gro\u00df-) Buchstaben sowie alle Ziffern der Schrift dargestellt werden:<\/span>\r\n\r\n<span style=\"color: #000000;\">Schriftgr\u00f6\u00dfen: 300%, 250%, 200%, 150%, 100%, 90%, 80%<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_schriften_04.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_schriften_04_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse10\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tPseudoklassen | Beispiel 01\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse10\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Verwenden Sie diese Datei und formatieren Sie alle Paragrafen-Kinder der Elemente mit der Klasse \"a\" derart, dass diese Kinder in blauer Schrift geschrieben werden.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_01.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_01_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse11\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tPseudoklassen | Beispiel 02\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse11\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Verwenden Sie diese Beispieldatei und formatieren Sie alle direkten Paragrafen-Kinder der Elemente mit der Klasse \"a\" derart, dass diese Kinder in blauer Schrift geschrieben werden.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_02.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_02_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse12\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tPseudoklassen | Beispiel 03\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse12\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie drei voneinander unabh\u00e4ngige Listen mit jeweils je sieben Listenpunkten.<\/span>\r\n\r\n<span style=\"color: #000000;\">Formatieren Sie die erste Liste so, dass jeder zweite Listenpunkt grau hinterlegt wird. Formatieren Sie alle Listen so, dass jeder erste Listenpunkt in blauer und jeder zweite Listenpunkt in roter Farbe geschrieben wird.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_03.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_03_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse13\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tPseudoklassen | Beispiel 04\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse13\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erzeugen Sie aus verschachtelten Containern ein Schachbrett mit 8x8 Feldern, die jeweils eine Gr\u00f6\u00dfe von 80x80 Pixel haben (beschriften Sie die Felder mit \"Feld 1-1\", \"Feld 1-2\" usw.) laut u. a. Screenshot.<\/span>\r\n\r\n<span style=\"color: #000000;\">F\u00fcgen Sie dem body einen grauen Hintergrund hinzu, lassen Sie ihn auf die gesamte H\u00f6he des Browserfensters erstrecken und stellen Sie sicher, dass die Felder des Schachbrettes entweder wei\u00df oder schwarz sind.<\/span>\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_04.jpg\" alt=\"\" width=\"398\" height=\"397\" \/>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_04.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_04_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse14\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tPseudoklassen | Beispiel 05\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse14\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erzeugen Sie eine aufklappbare Navigation aus dem HTML-Code der Datei. Sobald der User \u00fcber einen Navigationspunkt dr\u00fcberf\u00e4hrt, soll sich - sofern vorhanden - die entsprechende Unternavigation rechs davon aufklappen.<\/span>\r\n\r\n<span style=\"color: #000000;\">Die Formatierung der Navigation ist Ihnen \u00fcberlassen.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_05.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_05_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse15\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tPseudoklassen | Beispiel 06\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse15\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erzeugen Sie eine aufklappbare Navigation aus dem HTML-Code der Datei. Sobald der User \u00fcber einen Navigationspunkt dr\u00fcberf\u00e4hrt, soll sich - sofern vorhanden - die entsprechende Unternavigation daruntern aufklappen; alle weiteren Ebenen der Navigation sollen sich rechts davon aufklappen.<\/span>\r\n\r\n<span style=\"color: #000000;\">Die Formatierung der Navigation ist Ihnen \u00fcberlassen.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_06.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_06_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse16\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tPseudoklassen | Beispiel 07\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse16\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Bauen Sie die Website von Google nach (wie im Screenshot dargestellt). Beachten Sie, dass die Aufteilung der Seite unabh\u00e4ngig von der Bildschirmgr\u00f6\u00dfe gleich bleiben soll.<\/span>\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone \" src=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_07.jpg\" width=\"280\" height=\"188\" \/>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_07.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse17\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tPseudoklassen | Beispiel 08\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse17\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie ein Registrierungsformular mit folgenden Informationen:<\/span>\r\n<ol>\r\n \t<li><span style=\"color: #000000;\">Emailadresse (Pflicht)<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">Passwort (Pflicht)<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">Passwort wiederholen (Pflicht)<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">Pers\u00f6nliche Daten (freiwillig):<\/span>\r\n<ol>\r\n \t<li><span style=\"color: #000000;\">Vorname<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">Nachname<\/span><\/li>\r\n \t<li><span style=\"color: #000000;\">Geburtsdatum<\/span><\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\n<span style=\"color: #000000;\">Gliedern Sie mithilfe von CSS das Formular derart, dass es f\u00fcr den User \u00fcbersichtlich und klar erkennbar ist. Orientieren Sie sich an Ihnen bekannten Formulardarstellungen.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_selektoren_pseudoklassen_08.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse18\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tHintergrund und Bilder | Beispiel 01\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse18\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie ein beliebiges HTML-Dokument mit beliebigem Inhalt und zeigen Sie alle darin befindlichen Elemente mit einer Hintergrundfarbe Ihrer Wahl an. Entfernen Sie alsdann alle Innen- und Au\u00dfenabst\u00e4nde sowie Rahmen von den Elementen, sofern diese vorhanden sind. Entfernen Sie auch eventuell vorkommende Innen- und Au\u00dfenabst\u00e4nde des body.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_bg_bilder_01.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_bg_bilder_01_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse19\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tHintergrund und Bilder | Beispiel 02\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse19\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie ein Dokument, in welchem 216 quadratische Container in der Gr\u00f6\u00dfe 100x100 Px nebeneinander dargestellt werden. Stellen Sie innerhalb der Container alle m\u00f6glichen Farben der Web-Palette dar und geben Sie als Text in den Containern den HEX-, RGB- und HSL-Code der jeweiligen Farbe an.<\/span>\r\n\r\n<span style=\"color: #000000;\"><strong>Hinweis<\/strong>: Dieses Dokument kann in weiterer Folge als Farbauswahlseite f\u00fcr Sie dienen.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_bg_bilder_02.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_bg_bilder_02_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse20\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tHintergrund und Bilder | Beispiel 03\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse20\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie f\u00fcnf Container der Gr\u00f6\u00dfe 300x200px und stellen Sie darin ein Hintergrundbild Ihrer Wahl wie folgt dar:<\/span>\r\n\r\n<span style=\"color: #000000;\">1. Das Hintergrundbild soll eine Gr\u00f6\u00dfe von 200x200 Px aufweisen<\/span><br\/>\r\n<span style=\"color: #000000;\"> 2. ... 90%x90%...<\/span><br\/>\r\n<span style=\"color: #000000;\"> 3. Das Hintergrundbild soll den gesamten Container abdecken<\/span><br\/>\r\n<span style=\"color: #000000;\"> 4. Das Hintergrundbild soll sich vollst\u00e4ndig innerhalb des Containers befinden<\/span><br\/>\r\n<span style=\"color: #000000;\"> 5. Das Hintergrundbild soll eine Gr\u00f6\u00dfe von 50%x50% aufweisen<\/span><br\/>\r\n<ul>\r\n \t<li><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_bg_bilder_03.html\" target=\"_blank\"><strong>Download Beispiel<\/strong><\/a><\/span><\/li>\r\n \t<li><span style=\"color: #000000;\"><a style=\"color: #000000;\" href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_bg_bilder_03_loesung.html\" target=\"_blank\"><strong>Download L\u00f6sung<\/strong><\/a><\/span><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/bg_pic_water.jpg\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispielbild<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t<!-- Inner panel Start -->\r\n\t\t\t\t\t<div class=\"wpsm_panel wpsm_panel-default\">\r\n\t\t\t\t\t\t<div class=\"wpsm_panel-heading\" role=\"tab\" >\r\n\t\t\t\t\t\t  <h4 class=\"wpsm_panel-title\">\r\n\t\t\t\t\t\t\t<a  class=\"collapsed\"  data-toggle=\"collapse\" data-parent=\"#wpsm_accordion_69 \" href=\"javascript:void(0)\" data-target=\"#ac_69_collapse21\" onclick=\"do_resize()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ac_open_cl_icon fa fa-minus\"><\/span>\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t<span class=\"ac_title_class\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style=\"margin-right:6px;\" class=\"fa fa-laptop\"><\/span>\r\n\t\t\t\t\t\t\t\t\tHintergrund und Bilder | Beispiel 04\t\t\t\t\t\t\t\t<\/span>\r\n\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t  <\/h4>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<div id=\"ac_69_collapse21\" class=\"wpsm_panel-collapse collapse in\"  >\r\n\t\t\t\t\t\t  <div class=\"wpsm_panel-body\">\r\n\t\t\t\t\t\t\t<span style=\"color: #000000;\">Erstellen Sie zun\u00e4chst f\u00fcnf Container der Gr\u00f6\u00dfe 300x200px, geben Sie den Containern eine Hintergrundfarbe Ihrer Wahl und stellen Sie darin ein Hintergrundbild (nicht wiederholend!) Ihrer Wahl wie folgt dar:<\/span>\r\n\r\n<span style=\"color: #000000;\">1. Das Hintergrundbild soll eine Gr\u00f6\u00dfe von 200x200 Px aufweisen<\/span><br\/>\r\n<span style=\"color: #000000;\"> 2. ... 90%x90%...<\/span><br\/>\r\n<span style=\"color: #000000;\"> 3. Das Hintergrundbild soll den gesamten Container abdecken<\/span><br\/>\r\n<span style=\"color: #000000;\"> 4. Das Hintergrundbild soll sich vollst\u00e4ndig innerhalb des Containers befinden<\/span><br\/>\r\n<span style=\"color: #000000;\"> 5. Das Hintergrundbild soll eine Gr\u00f6\u00dfe von 50%x50% aufweisen<\/span><br\/>\r\n\r\n<span style=\"color: #000000;\">Bef\u00fcllen Sie danach die Container mit Inhalt (Text) und weisen Sie allen Containern einen Innenabstand von 2em und einen Rahmen der St\u00e4rke 10 Px zu, wobei der Rahmen eine halbtransparente schwarze Farbe aufweisen soll.<\/span>\r\n\r\n<span style=\"color: #000000;\">Stellen Sie nun die unterschiedlichen M\u00f6glichkeiten von background-origin und background-clip dar.<\/span>\r\n<ul>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_bg_bilder_04.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispiel<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/css_bg_bilder_04_loesung.html\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download L\u00f6sung<\/span><\/strong><\/a><\/li>\r\n \t<li><a href=\"http:\/\/www.tom-schoftner.at\/seminar_css\/bg_pic_water.jpg\" target=\"_blank\"><strong><span style=\"color: #000000;\">Download Beispielbild<\/span><\/strong><\/a><\/li>\r\n<\/ul>\t\t\t\t\t\t  <\/div>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<!-- Inner panel End -->\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n<script type=\"text\/javascript\">\r\n\t\r\n\t\tfunction do_resize(){\r\n\r\n\t\t\tvar width=jQuery( '.wpsm_panel .wpsm_panel-body iframe' ).width();\r\n\t\t\tvar height=jQuery( '.wpsm_panel .wpsm_panel-body iframe' ).height();\r\n\r\n\t\t\tvar toggleSize = true;\r\n\t\t\tjQuery('iframe').animate({\r\n\t\t\t    width: toggleSize ? width : 640,\r\n\t\t\t    height: toggleSize ? height : 360\r\n\t\t\t  }, 250);\r\n\r\n\t\t\t  toggleSize = !toggleSize;\r\n\t\t}\r\n\t\t\r\n<\/script>\t\n","protected":false},"excerpt":{"rendered":"<p>Unterlagen f\u00fcr CSS In diesem Abschnitt k\u00f6nnen Sie \u00dcbungsdateien zum Thema CSS\u00a0downloaden. Die L\u00f6sungen sind nach bestem Wissen und Gewissen erstellt worden, erheben jedoch nicht den Anspruch, perfekt zu sein &#8211; besser geht es immer. Die Frage ist nur, ob die perfekte L\u00f6sung auch die verst\u00e4ndlichste L\u00f6sung darstellt.<\/p>\n","protected":false},"author":1,"featured_media":49,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=\/wp\/v2\/pages\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=48"}],"version-history":[{"count":4,"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions\/78"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=\/wp\/v2\/media\/49"}],"wp:attachment":[{"href":"https:\/\/www.tom-schoftner.at\/web_technologies\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}