{"id":960,"date":"2024-02-12T08:00:00","date_gmt":"2024-02-12T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=960"},"modified":"2023-10-26T06:58:34","modified_gmt":"2023-10-26T04:58:34","slug":"flex-2-version-3","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2024\/02\/12\/flex-2-version-3\/","title":{"rendered":"Flex 2 Version 3"},"content":{"rendered":"\n

In diesem Artikel wird aus der Basis-Navigation eine horizontale Tab-Navigation\u2026<\/p>\n\n\n\n\n\n\n\n

Der Weg zur <\/strong>horizontalen<\/strong>Tab-Navigation:<\/strong><\/p>\n\n\n\n

Die Tab Navigation horizontal erfordert nun die ersten Anpassungen im HTML Quelltext und auch in der CSS-Datei.<\/p>\n\n\n\n

Die erste Anpassung soll jetzt die ungeordnete Liste in den Kopfbereich positionieren.<\/p>\n\n\n\n

<header> <!-- Anfang vom header-Element -->\n<nav> <!-- Anfang vom nav-Element -->\n<ul>\n<li><a href=\"..\/..\/index.html\">Startseite<\/a><\/li>\n<li><a href=\"..\/..\/index.html\">Startseite<\/a><\/li>\n<\/ul>\n<\/nav> <!-- Ende vom nav-Element -->\n<\/header> <!-- Ende vom header-Element --><\/code><\/pre>\n\n\n\n
Wie man im HTML Quelltext erkennt, wurde die Liste komplett in den header-Bereich gesetzt.<\/p>\n\n\n\n
Der nav-Bereich wurde also in den header-Bereich verschachtelt.<\/p>\n\n\n\n
Au\u00dferdem wurde in diesem Projekt auch ein aside-Bereich eingef\u00fchrt f\u00fcr die linke Spalte.<\/p>\n\n\n\n
<aside>\n<article>\n<h3>Letztes Update:<\/h3>\n<p>\nDies ist der aside-Bereich...\n<\/p>\n<\/article>\n<br \/>\n<\/aside><\/code><\/pre>\n\n\n\n
Die Verschachtelung ist aber nicht die einzige M\u00f6glichkeit den Navigationsbereich in den Kopfbereich zu positionieren.<\/p>\n\n\n\n
<header> <!-- Anfang vom header-Element -->\n<\/header> <!-- Ende vom header-Element -->\n<nav> <!-- Anfang vom nav-Element -->\n<ul>\n<li><a href=\"..\/..\/index.html\">Startseite<\/a><\/li>\n<li><a href=\"..\/..\/index.html\">Startseite<\/a><\/li>\n<\/ul>\n<\/nav> <!-- Ende vom nav-Element --><\/code><\/pre>\n\n\n\n
Der CSS-Code f\u00fcr die Verschachtelung der Navigation:<\/strong><\/p>\n\n\n\n
Die CSS-Datei f\u00fcr die erste Variante sieht so aus:<\/p>\n\n\n\n
nav {\nposition: absolute;\ntop: 30px;\nleft: 245px;\nwidth: 210px;\nbackground-color: steelblue;\ncolor: white;<\/code><\/pre>\n\n\n\n
Der CSS Code f\u00fcr die Navigation ohne Verschachtelung:<\/strong><\/p>\n\n\n\n
Die CSS-Datei f\u00fcr diese zweite Variante, also ohne Verschachtelung sieht so aus:<\/p>\n\n\n\n
nav {\nposition: absolute;\ntop: 30px; \/* am 14.07.2014 ge\u00e4ndert von 97 auf 30 Pixel *\/\nleft: 245px; \/* am 14.07.2014 ge\u00e4ndert von 5 auf 245 Pixel *\/\n\/* am14.07.2014 ge\u00e4ndert - width entfernt*\/\nbackground-color: steelblue;\ncolor: white;<\/code><\/pre>\n\n\n\n
Nach aktuellem Wissenstand w\u00fcrde ich eher die L\u00f6sung bevorzugen die header und nav-Bereich nicht verschachtelt und einfach nur per CSS die jeweilige Box positioniert.<\/p>\n","protected":false},"excerpt":{"rendered":"
In diesem Artikel wird aus der Basis-Navigation eine horizontale 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-960","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\/960","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=960"}],"version-history":[{"count":1,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/960\/revisions"}],"predecessor-version":[{"id":961,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/960\/revisions\/961"}],"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=960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}