{"id":930,"date":"2024-01-29T08:00:00","date_gmt":"2024-01-29T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=930"},"modified":"2023-10-16T10:49:51","modified_gmt":"2023-10-16T08:49:51","slug":"flex-2-version-2","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2024\/01\/29\/flex-2-version-2\/","title":{"rendered":"Flex 2 Version 2"},"content":{"rendered":"\n<p>In diesem Artikel wird aus der Basis-Navigation eine vertikale Tab Navigation\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Kopiervorlage f\u00fcr Flex 2 mit Basis-Navigation:<\/strong><\/p>\n\n\n\n<p>Als Kopiervorlage dient das bisherige Layout aus dem Artikel \u201c<a href=\"https:\/\/www.fuhselab.de\/index.php\/2022\/08\/10\/html-grundgeruest-3\/\">HTML Grundger\u00fcst 3<\/a>\u201c.<\/p>\n\n\n\n<p>Als erste kleine Anpassung wurde auch schon die Sprachangabe in das html-Element eingebaut. Wenn der HTML Quelltext jetzt \u00fcber den HTML Validator gepr\u00fcft wurde, sollten keine Fehler und keine Warnungen mehr angezeigt werden\u2026<\/p>\n\n\n\n<p>Die CSS Dateien sollten auch alle ordentlich validiert sein.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/validator.w3.org\/\">HTML Validator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\">CSS Validator<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>Der Weg zur Tab-Navigation:<\/strong><\/p>\n\n\n\n<p>Die Tab Navigation vertikal macht aus den Hyperlinks der Basis-Navigation Tabulator-\u00e4hnliche Men\u00fcpunkte. So sieht die Navigation dann schon etwas professioneller aus.<\/p>\n\n\n\n<p>Statt jetzt hier den vollst\u00e4ndigen Quelltext reinzukopieren, schauen wir nur mal auf die Navigation:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul>\n&lt;li>&lt;a href=\u201dindex.html\u201d>Startseite 1&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\u201dindex.html\u201d>Startseite 2&lt;\/a>&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p>Im HTML Quelltext gibt es noch nichts Neues.<\/p>\n\n\n\n<p>In der Navigations-CSS-Datei (navibereich.css) wird es aber spannend:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav li {\ndisplay: block;\nlist-style-type: none;\npadding: 3px;\n}<\/code><\/pre>\n\n\n\n<p>Der Listenpunkt wird also zum Block-Element umgewandelt und die Listenaufz\u00e4hlungspunkte werden per \u201clist-style-type: none\u201d entfernt.<\/p>\n\n\n\n<p>Anschlie\u00dfend werden nur noch die Hyperlink-Elemente (nav a) angepasst\u2026<\/p>\n\n\n\n<p>Nachfolgend nur zwei kleine Ausschnitte aus der Datei\u2026:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>nav a:link {\ncolor: black;\nbackground-color: white;\ndisplay: block;\ntext-decoration: none;\npadding: 3px;\n}\n\nnav a:hover {\nbackground-color: red;\ncolor: black;\ndisplay: block;\ntext-decoration: none;\n}<\/code><\/pre>\n\n\n\n<p>F\u00fcr die Tab- Navigation ist also die Hintergrundfarbe des \u201cnav a:link-Elements\u201c zust\u00e4ndig. Der Mouse-over Effekt wird \u00fcber das \u201cnav a:hover-Element\u201c gestaltet\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Artikel wird aus der Basis-Navigation eine vertikale Tab Navigation\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-930","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\/930","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=930"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/930\/revisions"}],"predecessor-version":[{"id":931,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/930\/revisions\/931"}],"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=930"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=930"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=930"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}