Auf Thema antworten 2026

Beitrag

<blockquote data-quote="patrick_l" data-source="post: 2550995" data-attributes="member: 194379">Auch wenn die Frage nicht an mich gerichtet war, trotzdem darauf antworte. Kurz und knapp, weil es an fixen Werten wie Pixel nicht per se etwas zu bemängeln gibt. Was die HTML5 Syntax angeht, sprich die neuen semantischen Elemente (Tags) wie Header, Footer, Nav, Main, Section, Aside und Co., ist der Browser Support mittlerweile recht gut. Betrifft eigentlich nur den IE 8 sowie die Versionen 4.1 bis 4.3 des Android Browsers. &quot;Marktanteile&quot; von allen unter 2%. Ob sich da der Aufwand für ein Fallback noch lohnt, mal in Frage stelle. Ich würde es ignorieren.&nbsp; &nbsp; Naja, ordentlich sieht anders aus. Für solche Fallbacks sollte man eher <a href="https://modernizr.com/" target="_blank">modernizr</a> oder <a href="https://github.com/afarkas/html5shiv" target="_blank">HTML5Shiv</a> mit <a href="https://github.com/scottjehl/Respond" target="_blank">Respond.js</a> nutzen. Wenn man lediglich beim IE nachhelfen möchte, man die Scripte innerhalb von Conditional Comments einfügen sollte. Für ein Zurücksetzen der Default-Werte, sich vor allem umfangreiche CSS Resets wie <a href="https://necolas.github.io/normalize.css/" target="_blank">normalize.css</a> von Nicolas Gallagher oder Eric Meyers CSS Reset eignen. Ein schnelle Reset wäre auch über den Universal-Selektor (Sternchen) möglich. Jedoch allein der Performance wegen nicht zu empfehlen.&nbsp; Schwierig? Nicht wirklich. Entweder mit reinem CSS (Stichwort: Checkbox-Hack) oder mit Hilfe von JavaScript (jQuery). Wenn letzteres gewünscht ist, darf ein entsprechender Fallback nicht fehlen. Nun zur eigentlichen Frage. Es gibt wie so oft mehre Möglichkeiten. Eine wäre z.B. das Arbeiten mit display: flex. Zusätzlich die minimal Höhe der Navigation an den Viewport festmachen. [code=CSS].site-nav {&nbsp; display: flex;&nbsp; min-height: 100vh;}[/code]Der Inhaltsbereich müsste dem entsprechend angepasst werden. Ein anderer Ansatz wäre ein das fixe Positionieren der Navigation. Der Navigation die Eigenschaft position: fixed geben und mit z-index arbeiten. [code=CSS].site-nav {&nbsp; display: fixed;&nbsp; right: 0;&nbsp; top: 0;&nbsp; z-index: 5;}[/code]Markup könnte so aussehen:[html]&lt;div class=&quot;site-wrap&quot;&gt;&nbsp; &lt;header&gt;&nbsp; &nbsp; &lt;nav class=&quot;site-nav&quot; role=&quot;navigation&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;h1 class=&quot;brand&quot;&gt;Logo&lt;/h1&gt;&nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Example 1&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Example 2&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Example 3&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &lt;/nav&gt;&nbsp; &lt;/header&gt;&nbsp; &lt;main class=&quot;primary&quot; role=&quot;main&quot;&gt;&nbsp; &nbsp; &lt;section id=&quot;home&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div class=&quot;container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- content here... --&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/section&gt;&nbsp; &nbsp; &lt;section id=&quot;about&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;div class=&quot;container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- content here... --&gt;&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/section&gt;&nbsp; &lt;/main&gt;&lt;/div&gt;[/html]Hier mal ein Link für dich. In dem Artikel geht es um eine responsive Sidebar Navigation. Ich denke damit ist dir ausreichend geholfen. Einfach den Artikel lesen, die kostenlose Demo herunterladen und gewünschte Teile in deiner Navigation adaptieren. - <a href="https://codyhouse.co/gem/responsive-sidebar-navigation/" target="_blank">codehouse.co » Responsive Sidebar Navigation</a>&nbsp; Liebe Grüße, Patrick</blockquote>

[QUOTE="patrick_l, post: 2550995, member: 194379"] Auch wenn die Frage nicht an mich gerichtet war, trotzdem darauf antworte. Kurz und knapp, weil es an fixen Werten wie Pixel nicht per se etwas zu bemängeln gibt. Was die HTML5 Syntax angeht, sprich die neuen semantischen Elemente (Tags) wie Header, Footer, Nav, Main, Section, Aside und Co., ist der Browser Support mittlerweile recht gut. Betrifft eigentlich nur den IE 8 sowie die Versionen 4.1 bis 4.3 des Android Browsers. "Marktanteile" von allen unter 2%. Ob sich da der Aufwand für ein Fallback noch lohnt, mal in Frage stelle. Ich würde es ignorieren. Naja, ordentlich sieht anders aus. Für solche Fallbacks sollte man eher [URL='https://modernizr.com/']modernizr[/URL] oder [URL='https://github.com/afarkas/html5shiv']HTML5Shiv[/URL] mit [URL='https://github.com/scottjehl/Respond']Respond.js[/URL] nutzen. Wenn man lediglich beim IE nachhelfen möchte, man die Scripte innerhalb von Conditional Comments einfügen sollte. Für ein Zurücksetzen der Default-Werte, sich vor allem umfangreiche CSS Resets wie [URL='https://necolas.github.io/normalize.css/']normalize.css[/URL] von Nicolas Gallagher oder Eric Meyers CSS Reset eignen. Ein schnelle Reset wäre auch über den Universal-Selektor (Sternchen) möglich. Jedoch allein der Performance wegen nicht zu empfehlen. Schwierig? Nicht wirklich. Entweder mit reinem CSS (Stichwort: Checkbox-Hack) oder mit Hilfe von JavaScript (jQuery). Wenn letzteres gewünscht ist, darf ein entsprechender Fallback nicht fehlen. Nun zur eigentlichen Frage. Es gibt wie so oft mehre Möglichkeiten. Eine wäre z.B. das Arbeiten mit display: flex. Zusätzlich die minimal Höhe der Navigation an den Viewport festmachen. [code=CSS].site-nav { display: flex; min-height: 100vh; }[/code] Der Inhaltsbereich müsste dem entsprechend angepasst werden. Ein anderer Ansatz wäre ein das fixe Positionieren der Navigation. Der Navigation die Eigenschaft position: fixed geben und mit z-index arbeiten. [code=CSS].site-nav { display: fixed; right: 0; top: 0; z-index: 5; }[/code] Markup könnte so aussehen: [html]<div class="site-wrap"> <header> <nav class="site-nav" role="navigation"> <h1 class="brand">Logo</h1> <ul> <li><a href="#">Example 1</a></li> <li><a href="#">Example 2</a></li> <li><a href="#">Example 3</a></li> </ul> </nav> </header> <main class="primary" role="main"> <section id="home"> <div class="container">  </div> </section> <section id="about"> <div class="container">  </div> </section> </main> </div>[/html] Hier mal ein Link für dich. In dem Artikel geht es um eine [U]responsive[/U] Sidebar Navigation. Ich denke damit ist dir ausreichend geholfen. Einfach den Artikel lesen, die kostenlose Demo herunterladen und gewünschte Teile in deiner Navigation adaptieren. - [URL='https://codyhouse.co/gem/responsive-sidebar-navigation/']codehouse.co » Responsive Sidebar Navigation[/URL] Liebe Grüße, Patrick [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?