Doctype html zerstört Layout der Navigation bearbeitet von Matthias Scharwies 07.09.2016 06:32 Servus! MrMurphy1 hat die Groß-und Kleinschreibung von HTML und CSS-Selektoren schon angesprochen. Hier nur ungefragt ein paar kleine Tipps: 1. Verwende HTML-Markup und Selektoren wie Klassen und IDs so sparsam wie möglich: ~~~html <body> <nav> <ul> <li class=""><a href="" >A</a> <li class=""><a href="" >B</a> <li class=""><a href="" >C</a> <li class=""><a href="" >D</a> <li class=""><a href="">E</a> <li class=""><a href="">F</a> <li class=""><a href="#kontakt">G</a> </ul> </nav> </body> ~~~ Ich habe die Klassen entfernt und einiges zusammengefasst: `div id="all"` ist völlig in `body` aufgegangen. `div id=#Navigation` ist mit dem nav-Element besser bedient. Die Klassen für die Listenelemente sind nicht nötig: ~~~css nav li { display:inline-block; list-style: none; border-right: 1px solid black; background: #8d8b8b; /* Fallback für IE8 */ background: linear-gradient(#595656 0%, #8d8b8b 100%); } nav li:last-child { border: 0; } ~~~ Ich habe den Hintergrund von `.navigationslink` integriert. Die alten Versionen brauchst du nicht, dafür evtl. einen fallback in einer Flächenfarbe. Der rechte Rand aus ehemals `.borderright` ist jetzt überall, außer im letzten Element, dem er mit der strukturellen Pseudoklasse [last-child](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/last-child) wieder entfernt wurde. 2. Du verwendest feste Pixelmaße. Wie sieht das auf einem SmartPhone aus? Du hast 2 Möglichkeiten: Entweder relative Maße in em unter Verzicht auf Breitenangaben. Die Breite der nav li könntest du mit [calc](https://wiki.selfhtml.org/wiki/Calc#Berechnungen_-_Die_calc-Funktion) festlegen: ~~~css nav li a { width: calc(100% / 7); } ~~~ Oder du verwendest [Flexbox](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout). Dort benötigst du keine Breitenangaben, das erledigt der Browser des Anwenders für dich. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun - packen wir's an: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"} *[gewünschte Seiten](http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}
Doctype html zerstört Layout der Navigation bearbeitet von Matthias Scharwies 07.09.2016 06:35 Servus! MrMurphy1 hat die Groß-und Kleinschreibung von HTML und CSS-Selektoren schon angesprochen. Hier nur ungefragt ein paar kleine Tipps: 1. Verwende HTML-Markup und Selektoren wie Klassen und IDs so sparsam wie möglich: ~~~html <body> <nav> <ul> <li class=""><a href="" >A</a> <li class=""><a href="" >B</a> <li class=""><a href="" >C</a> <li class=""><a href="" >D</a> <li class=""><a href="">E</a> <li class=""><a href="">F</a> <li class=""><a href="#kontakt">G</a> </ul> </nav> </body> ~~~ Ich habe die Klassen entfernt und einiges zusammengefasst: `div id="all"` ist völlig in `body` aufgegangen. `div id=#Navigation` ist mit dem nav-Element besser bedient. Die Klassen für die Listenelemente sind nicht nötig: ~~~css nav li { display:inline-block; list-style: none; border-right: 1px solid black; background: #8d8b8b; /* Fallback für IE8 */ background: linear-gradient(#595656 0%, #8d8b8b 100%); } nav li:last-child { border: 0; } ~~~ Ich habe den Hintergrund integriert. Die alten Versionen brauchst du nicht, dafür evtl. einen fallback in einer Flächenfarbe. Der rechte Rand aus ehemals `.borderright` ist jetzt überall, außer im letzten Element, dem er mit der strukturellen Pseudoklasse [last-child](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/last-child) wieder entfernt wurde. 2. Du verwendest feste Pixelmaße. Wie sieht das auf einem SmartPhone aus? Du hast 2 Möglichkeiten: Entweder relative Maße in em unter Verzicht auf Breitenangaben. Die Breite der nav li könntest du mit [calc](https://wiki.selfhtml.org/wiki/Calc#Berechnungen_-_Die_calc-Funktion) festlegen: ~~~css nav li a { width: calc(100% / 7); } ~~~ Oder du verwendest [Flexbox](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout). Dort benötigst du keine Breitenangaben, das erledigt der Browser des Anwenders für dich. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun - packen wir's an: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"} *[gewünschte Seiten](http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}
Doctype html zerstört Layout der Navigation bearbeitet von Matthias Scharwies 07.09.2016 06:33 Servus! MrMurphy1 hat die Groß-und Kleinschreibung von HTML und CSS-selektoren schon angesprochen. Hier nur ungefragt ein paar kleine Tipps: 1. Verwende HTML-Markup und Selektoren wie Klassen und IDs so sparsam wie möglich: ~~~html <body> <nav> <ul> <li class=""><a href="" >A</a> <li class=""><a href="" >B</a> <li class=""><a href="" >C</a> <li class=""><a href="" >D</a> <li class=""><a href="">E</a> <li class=""><a href="">F</a> <li class=""><a href="#kontakt">G</a> </ul> </nav> </body> ~~~ Ich habe die Klassen entfernt und einiges zusammengefasst: `div id="all"` ist völlig in `body` aufgegangen. `div id=#Navigation` ist mit dem nav-Element besser bedient. Die Klassen für die Listenelemente sind nicht nötig: ~~~css nav li { display:inline-block; list-style: none; border-right: 1px solid black; background: #8d8b8b; /* Fallback für IE8 */ background: linear-gradient(#595656 0%, #8d8b8b 100%); } nav li:last-child { border: 0; } ~~~ Ich habe den Hintergrund integriert. Die alten Versionen brauchst du nicht, dafür evtl. einen fallback in einer Flächenfarbe. Der rechte Rand aus ehemals `.borderright` ist jetzt überall, außer im letzten Element, dem er mit der strukturellen Pseudoklasse [last-child](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/last-child) wieder entfernt wurde. 2. Du verwendest feste Pixelmaße. Wie sieht das auf einem SmartPhone aus? Du hast 2 Möglichkeiten: Entweder relative Maße in em unter Verzicht auf Breitenangaben. Die Breite der nav li könntest du mit [calc](https://wiki.selfhtml.org/wiki/Calc#Berechnungen_-_Die_calc-Funktion) festlegen: ~~~css nav li a { width: calc(100% / 7); } ~~~ Oder du verwendest [Flexbox](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout). Dort benötigst du keine Breitenangaben, das erledigt der Browser des Anwenders für dich. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun - packen wir's an: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"} *[gewünschte Seiten](http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}
Doctype html zerstört Layout der Navigation bearbeitet von Matthias Scharwies 07.09.2016 06:33 Servus! MrMurphy1 hat die Groß-und Kleinschreibung von HTML und CSS-selektoren schon angesprochen. Hier nur ungefragt ein paar kleine Tipps: 1. Verwende HTML-Markup und Selektoren wie Klassen und IDs so sparsam wie möglich: ~~~html <body> <nav> <ul> <li class=""><a href="" >A</a> <li class=""><a href="" >B</a> <li class=""><a href="" >C</a> <li class=""><a href="" >D</a> <li class=""><a href="">E</a> <li class=""><a href="">F</a> <li class=""><a href="#kontakt">G</a> </ul> </nav> </body> ~~~ Ich habe die Klassen entfernt und einiges zusammengefasst: `div id="all"` ist völlig in `body` aufgegangen. `div id=#Navigation`ist mit dem nav-Element besser bedient. Die Klassen für die Listenelemente sind nicht nötig: ~~~css nav li { display:inline-block; list-style: none; border-right: 1px solid black; background: #8d8b8b; /* Fallback für IE8 */ background: linear-gradient(#595656 0%, #8d8b8b 100%); } nav li:last-child { border: 0; } ~~~ Ich habe den Hintergrund integriert. Die alten Versionen brauchst du nicht, dafür evtl. einen fallback in einer Flächenfarbe. Der rechte Rand aus ehemals `.borderright` ist jetzt überall, außer im letzten Element, dem er mit der strukturellen Pseudoklasse [last-child](https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/last-child) wieder entfernt wurde. 2. Du verwendest feste Pixelmaße. Wie sieht das auf einem SmartPhone aus? Du hast 2 Möglichkeiten: Entweder relative Maße in em unter Verzicht auf Breitenangaben. Die Breite der nav li könntest du mit [calc](https://wiki.selfhtml.org/wiki/Calc#Berechnungen_-_Die_calc-Funktion) festlegen: ~~~css nav li a { width: calc(100% / 7); } ~~~ Oder du verwendest [Flexbox](https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout). Dort benötigst du keine Breitenangaben, das erledigt der Browser des Anwenders für dich. Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun - packen wir's an: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"} *[gewünschte Seiten](http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin-left:2em;"}
nicht angemeldet
