Prozentuale Höhenangabe wird ignoriert bearbeitet von Orlok 05.09.2015 15:21 Hallo > [Ich] habe das Problem, dass prozentuale Höhenangaben mit CSS ignoriert werden. Bei _prozentualen_ Angaben ist die Frage immer: **Prozent von was?** Wenn du also einem Element eine `height` in Prozent zuweist, dann bezieht sich dieser Wert auf das direkte Vorfahrenelement, und wenn du für _dieses_ Element keine explizite Angabe zur Höhe gemacht hast, dann passiert, wie du festgestellt hast, nichts, denn in Ermangelung eines Bezugswertes wird der Wert der Eigenschaft `height` ganz einfach nach der Höhe des Inhalts des Elementes bemessen. Wenn das Vorfahrenelement des Elementes, um das es geht, nun selbst zwar eine Angabe zu `height` hat, deren Wert jedoch _ebenfalls_ eine prozentuale Angabe ist, dann verschiebt sich dieser Zusammenhang einfach um eine Ebene und die Frage ist wieder: Worauf bezieht sich nun _diese_ Angabe? Nehmen wir also mal das folgende simple Beispiel: ~~~ html <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title> Höhe in Prozent </title> </head> <body> <main role="main"> <article> <p> Höhe in Prozent </p> </article> </main> </body> </html> ~~~ Würden wir jetzt für das Element `article` im Stylesheet eine Höhe in Prozent zuweisen, also schreiben `article { height: 100%; }`{: .language-css}, ohne für dessen Vorfahrenelemente Angaben für `height` zu machen, dann würde sich die Höhe von `article`, da es keine Angabe gibt, auf welche sich die Prozentangabe beziehen kann, nach dessen _Inhalt_ richten, hier also der Höhe des Elementes `p`. Nehmen wir nun an, wir würden _zudem_ auch für das Elternelement von `article`, also `main`, eine prozentuale Angabe zu `height` machen, also schreiben `main { height: 100%; }`{: .language-css}, ohne aber für _dessen_ Elternelement `body` eine explizite Angabe zu machen, dann hätten wir wieder die gleiche Situation: Die Höhe von `main` bemisst sich mangels Bezugswert nach dem Inhalt, und es bleibt schließlich bei der Höhe des _paragraphs_. Etwas anderes wäre es nun, wenn wir für `main` _keine prozentuale_ Angabe zur Eigenschaft `height` machen würden, sondern zum Beispiel `main { height: 20em; }`{: .language-css} schreiben würden, denn nun _hätten_ wir einen Bezugswert und die `100%` Höhe von `article` entsprächen nun diesen `20em` Höhe des Elternelementes `main`. Aber das machen wir nicht, sondern behalten unsere Angabe `main { height: 100%; }`{: .language-css} und geben _dessen_ Elternelement `body` ebenfalls eine Höhe von `100%`, schreiben also in unser Stylesheet: `body { height: 100%; }`{: .language-css}, und stellen fest, dass die Höhe von `article` immer noch nach dessen Inhalt, also `p` bemessen wird. Wenn wir nun aber _auch noch_ dem Element `html` eine `height` von `100%` zuweisen, also schreiben… ~~~ css html, body, main, article { height: 100%; } ~~~ …dann funktioniert es und `article` füllt in der Höhe das ganze Fenster aus! - Aber warum? Deswegen, weil die Angabe zu `height` für das letzte Glied in der Kette, also unser Element `html` sich nun auf den **viewport** bezieht, dessen Abmessungen durch die Breite und Höhe des Fensters im Browser definiert sind, weshalb hier also ein _Bezugswert_ gegeben ist, nach welchem sich wiederum alle prozentualen Angaben in der Kette der Elemente richten können. Nähmen wir nun aber `main` wieder heraus, wäre die Kette unterbrochen, das heißt `html` und `body` hätten eine Höhe von `100%` des Browserfensters, aber `article` wäre wieder nur so hoch wie sein Inhalt. In dem Fall, dass wie in diesem kleinen Beispiel letztlich alle Angaben auf den **viewport** bezogen sind, könnte man aber auch gleich schreiben `article { height: 100vh; }`{: .language-css}, da die Einheiten **vh** (für _viewport height_) und **vw** (für _viewport width_) sich genau auf diese Abmessungen des `viewports`, also des Browserfensters beziehen. Wenn wir nun mit diesem Wissen **deinen Code** betrachten, dann stellen wir fest, dass dein Element `div` mit der ID `navigation` ein Kindelement von `article` ist. Und wir stellen weiterhin fest, dass du für dieses Element `article` **keine Angabe** zur Eigenschaft `height` gemacht hast, das heißt, obwohl du... > ~~~ css > html, body { > height:100%; > } > ~~~ …ausprobiert hast, ist die Kette durch `article` _unterbrochen_ und alle prozentualen Angaben, die du für _dessen_ Kindelemente gemacht hast, sind vergebens! So, nachdem _das_ also geklärt wäre, noch ein paar _Hinweise_ zu deinem **Code**… ;-) > ~~~ html > <!DOCTYPE html> > <html lang="de" height="100%"> > ~~~ Das Element `html` darf kein Attribut `height` haben. Die Attribute `width` und `height` sind nur bei wenigen Elementen erlaubt, wie etwa `img`, `input`, `object` oder `canvas`, also grob gesagt bei Elementen mit einem bestimmten Inhaltsmodell, aber das können dir andere hier sicher besser erklären. ;-) > ~~~ html > <head height="100%"> > ~~~ Gleiches gilt jedenfalls für das Element `head`, wobei hier die Unsinnigkeit einer solchen Angabe noch augenscheinlicher ist, da `head`, also der Kopf eines HTML-Dokumentes, mit der Darstellung im Fenster des Browsers _direkt_ gar nichts zu tun hat, sprich, das Element _head_ und seine Kindelemente werden gar nicht gerendert. > ~~~ html > <link href="design.css" type="text/css" rel="stylesheet"> > ~~~ Die Angabe `type="text/css"`{: language-html} kannst du dir sparen, da der Browser grundsätzlich davon ausgeht, dass eingebundene Stylesheets in CSS verfasst sind. > ~~~ html > <body bgcolor="#7e7e7e" height="100%"> > ~~~ Auch für das Element `body` gilt, dass die Attribute `height` und `width` nicht erlaubt sind, und das selbe gilt für `bgcolor`, das heißt, du hättest hier höchstens schreiben können… ~~~ html <body style="height: 100%; background-color: #7e7e7e;"> ~~~ …aber **Gestaltung** und **Markup** sollten so streng wie möglich **getrennt** sein, weshalb die Zuweisung von Styles im `style`-Attribut, von wenigen begründeten Ausnahmefällen abgesehen, dringend zu _vermeiden_ ist. Du hast hier ja eine CSS-Datei eingebunden, also schreibe dort: ~~~ css body { height: 100%; background-color: #7e7e7e; } ~~~ Weiter im Quelltext… > ~~~ html > <header> > <!-- <img src="logo.jpg" width="50" height="50"></img>--> > </header> > ~~~ Gut, dass du das `img`-Element in einen Kommentar gepackt hast. ;-) Die Attribute `width` und `height` sind wie oben schon gesehen für das Element `img` zwar zulässig, aber dieses Element hat _kein schließendes Tag_, denn welcher _Inhalt_ sollte umschlossen werden? Auch sollte aus Gründen der **Barrierefreiheit** ein _kurzer_ Alternativtext hinterlegt werden: ~~~ html <img src="logo.jpg" width="50" height="50" alt="Kurze Bildbeschreibung"> ~~~ Weiter… > ~~~ html > <article> > <h1>Überschrift</h1> > <div id="navigation"> > <div id="item1">Part A</div> > <div id="item2">Part B</div> > <div id="item3">Part C</div> > <div id="item4">Part D</div> > <div id="item5">Part E</div> > </div> > </article> > ~~~ Hier solltest du zunächst einmal darüber nachdenken, ob die von dir verwendeten Elemente auch wirklich _passend_ und sie auch an der richtigen _Stelle_ sind: Das Element `article` dient dazu, in Abgrenzung zu anderen Inhalten, einen bestimmten inhaltlich _eigenständigen Abschnitt_ des Seiteninhalts auszuzeichnen, wobei der Seiteninhalt _selbst_ jedoch durch das Element `main` ausgezeichnet werden sollte, welches daher auch nur _einmal_ pro Dokument vorkommen darf, also statt `<article>`{: .language-html} wäre hier `<main role="main">`{: .language-html} wohl angebrachter, wobei abhängig von den Inhalten, welche du hinzuzufügen gedenkst, innerhalb von `main` durchaus mehrere `article`-Elemente notiert werden können. Dann hast du als erstes Kindelement von `article`, das wohl eigentlich viel lieber `main` sein möchte, eine Überschrift `h1` gewählt. Die Überschriften, also `h1` bis `h6` sollten die Hierarchien innerhalb des Dokumentes repäsentieren, das heißt `h1` wäre hier als globale Überschrift eher in deinem `<header>`{: .language-html} unterzubringen, und für Inhaltlich untergeordnete Elemente wie `main` oder `article` wären dann `h2`, `h3` usw. zu wählen, die natürlich in CSS noch gestaltet werden können. Was nun dein `div`-Element namens `navigation` angeht: Auch hier gibt es ein semantisch passenderes Element, welches sich sinnigerweise `nav` nennt… Die Navigation ist allerdings kein Teil des eigentlichen Seiteninhalts, weshalb je nach dem, ob es sich _hierbei_ lediglich um eine _seiteninterne_ Navigation handelt oder nicht, und wie du dir dein Layout eben so vorstellst, das Element `nav` auf einer Ebene mit `main`, oder aber als Kindelement von `header` oder `aside` besser untergebracht wäre. Solltest du dich hier entscheiden, die Navigation _nicht_ im `header` der Seite unterzubringen, wäre es aus Gründen der Zugänglichkeit zum Inhalt der Seite aber wohl besser, wenn du das `nav` oder, wenn du es in einem `aside`-Element notieren willst, dann dieses Element, erst _nach_ `main` hinzufügen würdest. Was den Inhalt deiner Navigation angeht, kann man darüber streiten, ob die _Links_ als direkte Kindelemente - also wie hier deine diversen `div`-Elemente - oder in Form einer Liste notiert werden sollten, wobei _ich_ eine Liste hier für semantisch passend erachte: ~~~ html <nav> <ul> <li><a href="…"> Link 1 </a></li> <li><a href="…"> Link 2 </a></li> <li><a href="…"> Link 3 </a></li> <li><a href="…"> Link 4 </a></li> </ul> </nav> ~~~ Zu deinem CSS: > ~~~ css > #container{ > flex-direction: row; > flex-wrap: nowrap; > display: -webkit-flex; > display: flex; > } > ~~~ Ein Element mit der ID `container` gibt es in deinem hier geposteten Markup gar nicht, weshalb dieser Block völlig nutzlos ist. Auch **sollte** es, zumindest in der Regel, keine Elemente namens `container` geben, da dies üblicherweise ein Hinweis darauf ist, dass entweder Markup zu Gestaltungszwecken missbraucht wird oder dass unnötigerweise eine ID für ein diese Funktion erfüllendes Element vergeben wird, welches auch direkt angesprochen werden kann, z.B. `html`, `body` oder `main`, aber das nur so als Anmerkung. ;-) Es kann jedenfalls nicht schaden, einmal einen Blick auf die verschiedenen [Selektoren](http://wiki.selfhtml.org/wiki/CSS/Selektoren) in CSS zu werfen, denn meistens ist die Vergabe von IDs oder die Zuweisung von Klassen überflüssig. Außerdem kannst du dir durch die richtige Wahl der Selektoren auch mehrfache Zuweisungen wie im Rest deines Codes sparen, den zu zitieren ich jetzt mal unterlasse. ;-) Erwähnt sei höchstens noch, dass es in CSS einige _shorthand-properties_ wie beispielsweise `margin` oder `flex-flow` gibt, welche die Zahl der benötigten Zeilen zusätzlich zur passenden Wahl der Selektoren weiter reduzieren helfen, und was dein `@font-face`{: .language-css} angeht: Du lädst hier ja gar keine Schriften nach, also solltest du vielleicht einfach mal einen Blick auf [diese Seite](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung) werfen. > PS: Ich bin Anfänger, bitte berücksichtigen, danke :-) Ich hoffe, das habe ich getan und mein Beitrag war hilfreich. ;-) Gruß, Orlok
Prozentuale Höhenangabe wird ignoriert bearbeitet von Orlok 05.09.2015 15:40 Hallo > [Ich] habe das Problem, dass prozentuale Höhenangaben mit CSS ignoriert werden. Bei _prozentualen_ Angaben ist die Frage immer: **Prozent von was?** Wenn du also einem Element eine `height` in Prozent zuweist, dann bezieht sich dieser Wert auf das direkte Vorfahrenelement, und wenn du für _dieses_ Element keine explizite Angabe zur Höhe gemacht hast, dann passiert, wie du festgestellt hast, nichts, denn in Ermangelung eines Bezugswertes wird der Wert der Eigenschaft `height` ganz einfach nach der Höhe des Inhalts des Elementes bemessen. Wenn das Vorfahrenelement des Elementes, um das es geht, nun selbst zwar eine Angabe zu `height` hat, deren Wert jedoch _ebenfalls_ eine prozentuale Angabe ist, dann verschiebt sich dieser Zusammenhang einfach um eine Ebene und die Frage ist wieder: Worauf bezieht sich nun _diese_ Angabe? Nehmen wir also mal das folgende simple Beispiel: ~~~ html <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title> Höhe in Prozent </title> </head> <body> <main role="main"> <article> <p> Höhe in Prozent </p> </article> </main> </body> </html> ~~~ Würden wir jetzt für das Element `article` im Stylesheet eine Höhe in Prozent zuweisen, also schreiben `article { height: 100%; }`{: .language-css}, ohne für dessen Vorfahrenelemente Angaben für `height` zu machen, dann würde sich die Höhe von `article`, da es keine Angabe gibt, auf welche sich die Prozentangabe beziehen kann, nach dessen _Inhalt_ richten, hier also der Höhe des Elementes `p`. Nehmen wir nun an, wir würden _zudem_ auch für das Elternelement von `article`, also `main`, eine prozentuale Angabe zu `height` machen, also schreiben `main { height: 100%; }`{: .language-css}, ohne aber für _dessen_ Elternelement `body` eine explizite Angabe zu machen, dann hätten wir wieder die gleiche Situation: Die Höhe von `main` bemisst sich mangels Bezugswert nach dem Inhalt, und es bleibt schließlich bei der Höhe des _paragraphs_. Etwas anderes wäre es nun, wenn wir für `main` _keine prozentuale_ Angabe zur Eigenschaft `height` machen würden, sondern zum Beispiel `main { height: 20em; }`{: .language-css} schreiben würden, denn nun _hätten_ wir einen Bezugswert und die `100%` Höhe von `article` entsprächen nun diesen `20em` Höhe des Elternelementes `main`. Aber das machen wir nicht, sondern behalten unsere Angabe `main { height: 100%; }`{: .language-css} und geben _dessen_ Elternelement `body` ebenfalls eine Höhe von `100%`, schreiben also in unser Stylesheet: `body { height: 100%; }`{: .language-css}, und stellen fest, dass die Höhe von `article` immer noch nach dessen Inhalt, also `p` bemessen wird. Wenn wir nun aber _auch noch_ dem Element `html` eine `height` von `100%` zuweisen, also schreiben… ~~~ css html, body, main, article { height: 100%; } ~~~ …dann funktioniert es und `article` füllt in der Höhe das ganze Fenster aus! - Aber warum? Deswegen, weil die Angabe zu `height` für das letzte Glied in der Kette, also unser Element `html` sich nun auf den **viewport** bezieht, dessen Abmessungen durch die Breite und Höhe des Fensters im Browser definiert sind, weshalb hier also ein _Bezugswert_ gegeben ist, nach welchem sich wiederum alle prozentualen Angaben in der Kette der Elemente richten können. Nähmen wir nun aber `main` wieder heraus, wäre die Kette unterbrochen, das heißt `html` und `body` hätten eine Höhe von `100%` des Browserfensters, aber `article` wäre wieder nur so hoch wie sein Inhalt. In dem Fall, dass wie in diesem kleinen Beispiel letztlich alle Angaben auf den **viewport** bezogen sind, könnte man aber auch gleich schreiben `article { height: 100vh; }`{: .language-css}, da die Einheiten **vh** (für _viewport height_) und **vw** (für _viewport width_) sich genau auf diese Abmessungen des `viewports`, also des Browserfensters beziehen. Wenn wir nun mit diesem Wissen **deinen Code** betrachten, dann stellen wir fest, dass dein Element `div` mit der ID `navigation` ein Kindelement von `article` ist. Und wir stellen weiterhin fest, dass du für dieses Element `article` **keine Angabe** zur Eigenschaft `height` gemacht hast, das heißt, obwohl du... > ~~~ css > html, body { > height:100%; > } > ~~~ …ausprobiert hast, ist die Kette durch `article` _unterbrochen_ und alle prozentualen Angaben, die du für _dessen_ Kindelemente gemacht hast, sind vergebens! So, nachdem _das_ also geklärt wäre, noch ein paar _Hinweise_ zu deinem **Code**… ;-) > ~~~ html > <!DOCTYPE html> > <html lang="de" height="100%"> > ~~~ Das Element `html` darf kein Attribut `height` haben. Die Attribute `width` und `height` sind nur bei wenigen Elementen erlaubt, wie etwa `img`, `input`, `object` oder `canvas`, also grob gesagt bei Elementen mit einem bestimmten Inhaltsmodell, aber das können dir andere hier sicher besser erklären. ;-) > ~~~ html > <head height="100%"> > ~~~ Gleiches gilt jedenfalls für das Element `head`, wobei hier die Unsinnigkeit einer solchen Angabe noch augenscheinlicher ist, da `head`, also der Kopf eines HTML-Dokumentes, mit der Darstellung im Fenster des Browsers _direkt_ gar nichts zu tun hat, sprich, das Element _head_ und seine Kindelemente werden gar nicht gerendert. > ~~~ html > <link href="design.css" type="text/css" rel="stylesheet"> > ~~~ Die Angabe `type="text/css"`{: language-html} kannst du dir sparen, da der Browser grundsätzlich davon ausgeht, dass eingebundene Stylesheets in CSS verfasst sind. > ~~~ html > <body bgcolor="#7e7e7e" height="100%"> > ~~~ Auch für das Element `body` gilt, dass die Attribute `height` und `width` nicht erlaubt sind, und das selbe gilt für `bgcolor`, das heißt, du hättest hier höchstens schreiben können… ~~~ html <body style="height: 100%; background-color: #7e7e7e;"> ~~~ …aber **Gestaltung** und **Markup** sollten so streng wie möglich **getrennt** sein, weshalb die Zuweisung von Styles im `style`-Attribut, von wenigen begründeten Ausnahmefällen abgesehen, dringend zu _vermeiden_ ist. Du hast hier ja eine CSS-Datei eingebunden, also schreibe dort: ~~~ css body { height: 100%; background-color: #7e7e7e; } ~~~ Weiter im Quelltext… > ~~~ html > <header> > <!-- <img src="logo.jpg" width="50" height="50"></img>--> > </header> > ~~~ Gut, dass du das `img`-Element in einen Kommentar gepackt hast. ;-) Die Attribute `width` und `height` sind wie oben schon gesehen für das Element `img` zwar zulässig, aber dieses Element hat _kein schließendes Tag_, denn welcher _Inhalt_ sollte umschlossen werden? Auch sollte aus Gründen der **Barrierefreiheit** ein _kurzer_ Alternativtext hinterlegt werden: ~~~ html <img src="logo.jpg" width="50" height="50" alt="Kurze Bildbeschreibung"> ~~~ Weiter… > ~~~ html > <article> > <h1>Überschrift</h1> > <div id="navigation"> > <div id="item1">Part A</div> > <div id="item2">Part B</div> > <div id="item3">Part C</div> > <div id="item4">Part D</div> > <div id="item5">Part E</div> > </div> > </article> > ~~~ Hier solltest du zunächst einmal darüber nachdenken, ob die von dir verwendeten Elemente auch wirklich _passend_ und sie auch an der richtigen _Stelle_ sind: Das Element `article` dient dazu, in Abgrenzung zu anderen Inhalten, einen bestimmten inhaltlich _eigenständigen Abschnitt_ des Seiteninhalts auszuzeichnen, wobei der Seiteninhalt _selbst_ jedoch durch das Element `main` ausgezeichnet werden sollte, welches daher auch nur _einmal_ pro Dokument vorkommen darf, also statt `<article>`{: .language-html} wäre hier `<main role="main">`{: .language-html} wohl angebrachter, wobei abhängig von den Inhalten, welche du hinzuzufügen gedenkst, innerhalb von `main` durchaus mehrere `article`-Elemente notiert werden können. Dann hast du als erstes Kindelement von `article`, das wohl eigentlich viel lieber `main` sein möchte, eine Überschrift `h1` gewählt. Die Überschriften, also `h1` bis `h6` sollten die Hierarchien innerhalb des Dokumentes repäsentieren, das heißt `h1` wäre hier als globale Überschrift eher in deinem `<header>`{: .language-html} unterzubringen, und für Inhaltlich untergeordnete Elemente wie `main` oder `article` wären dann `h2`, `h3` usw. zu wählen, die natürlich in CSS noch gestaltet werden können. Was nun dein `div`-Element namens `navigation` angeht: Auch hier gibt es ein semantisch passenderes Element, welches sich sinnigerweise `nav` nennt… Die Navigation ist allerdings kein Teil des eigentlichen Seiteninhalts, weshalb je nach dem, ob es sich _hierbei_ lediglich um eine _seiteninterne_ Navigation handelt oder nicht, und wie du dir dein Layout eben so vorstellst, das Element `nav` auf einer Ebene mit `main`, oder aber als Kindelement von `header` oder `aside` besser untergebracht wäre. Solltest du dich hier entscheiden, die Navigation _nicht_ im `header` der Seite unterzubringen, wäre es aus Gründen der Zugänglichkeit zum Inhalt der Seite aber wohl besser, wenn du das `nav` oder, wenn du es in einem `aside`-Element notieren willst, dann dieses Element, erst _nach_ `main` hinzufügen würdest. Was den Inhalt deiner Navigation angeht, kann man darüber streiten, ob die _Links_ als direkte Kindelemente - also wie hier deine diversen `div`-Elemente - oder in Form einer Liste notiert werden sollten, wobei _ich_ eine Liste hier für semantisch passend erachte: ~~~ html <nav> <ul> <li><a href="…"> Link 1 </a></li> <li><a href="…"> Link 2 </a></li> <li><a href="…"> Link 3 </a></li> <li><a href="…"> Link 4 </a></li> </ul> </nav> ~~~ Zu deinem CSS: > ~~~ css > #container{ > flex-direction: row; > flex-wrap: nowrap; > display: -webkit-flex; > display: flex; > } > ~~~ Ein Element mit der ID `container` gibt es in deinem hier geposteten Markup gar nicht, weshalb dieser Block völlig nutzlos ist. Auch **sollte** es, zumindest in der Regel, keine Elemente namens `container` geben, da dies üblicherweise ein Hinweis darauf ist, dass entweder Markup zu Gestaltungszwecken missbraucht wird oder dass unnötigerweise eine ID für ein diese Funktion erfüllendes Element vergeben wird, welches auch direkt angesprochen werden kann, z.B. `html`, `body` oder `main`, aber das nur so als Anmerkung. ;-) Es kann jedenfalls nicht schaden, einmal einen Blick auf die verschiedenen [Selektoren](http://wiki.selfhtml.org/wiki/CSS/Selektoren) in CSS zu werfen, denn meistens ist die Vergabe von IDs oder die Zuweisung von Klassen überflüssig. Außerdem kannst du dir durch die richtige Wahl der Selektoren auch mehrfache Zuweisungen wie im Rest deines Codes sparen, den zu zitieren ich jetzt mal unterlasse. ;-) Erwäht sei höchstens noch, dass es in CSS einige _shorthand-properties_ wie beispielsweise `margin` oder `flex-flow` gibt, welche die Zahl der benötigten Zeilen zusätzlich zur passenden Wahl der Selektoren weiter reduzieren helfen, und was dein `@font-face`{: .language-css} angeht: Du lädst hier ja gar keine Schriften nach, also solltest du vielleicht einfach mal einen Blick auf [diese Seite](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung) werfen. > PS: Ich bin Anfänger, bitte berücksichtigen, danke :-) Ich hoffe, das habe ich getan und mein Beitrag war hilfreich. ;-) Gruß, Orlok
Prozentuale Höhenangabe wird ignoriert bearbeitet von Orlok 05.09.2015 15:37 Hallo > [Ich] habe das Problem, dass prozentuale Höhenangaben mit CSS ignoriert werden. Bei _prozentualen_ Angaben ist die Frage immer: **Prozent von was?** Wenn du also einem Element eine `height` in Prozent zuweist, dann bezieht sich dieser Wert auf das direkte Vorfahrenelement, und wenn du für _dieses_ Element keine explizite Angabe zur Höhe gemacht hast, dann passiert, wie du festgestellt hast, nichts, denn in Ermangelung eines Bezugswertes wird der Wert der Eigenschaft `height` ganz einfach nach der Höhe des Inhalts des Elementes bemessen. Wenn das Vorfahrenelement des Elementes, um das es geht, nun selbst zwar eine Angabe zu `height` hat, deren Wert jedoch _ebenfalls_ eine prozentuale Angabe ist, dann verschiebt sich dieser Zusammenhang einfach um eine Ebene und die Frage ist wieder: Worauf bezieht sich nun _diese_ Angabe? Nehmen wir also mal das folgende simple Beispiel: ~~~ html <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title> Höhe in Prozent </title> </head> <body> <main role="main"> <article> <p> Höhe in Prozent </p> </article> </main> </body> </html> ~~~ Würden wir jetzt für das Element `article` im Stylesheet eine Höhe in Prozent zuweisen, also schreiben `article { height: 100%; }`{: .language-css}, ohne für dessen Vorfahrenelemente Angaben für `height` zu machen, dann würde sich die Höhe von `article`, da es keine Angabe gibt, auf welche sich die Prozentangabe beziehen kann, nach dessen _Inhalt_ richten, hier also der Höhe des Elementes `p`. Nehmen wir nun an, wir würden _zudem_ auch für das Elternelement von `article`, also `main`, eine prozentuale Angabe zu `height` machen, also schreiben `main { height: 100%; }`{: .language-css}, ohne aber für _dessen_ Elternelement `body` eine explizite Angabe zu machen, dann hätten wir wieder die gleiche Situation: Die Höhe von `main` bemisst sich mangels Bezugswert nach dem Inhalt, und es bleibt schließlich bei der Höhe des _paragraphs_. Etwas anderes wäre es nun, wenn wir für `main` _keine prozentuale_ Angabe zur Eigenschaft `height` machen würden, sondern zum Beispiel `main { height: 20em; }`{: .language-css} schreiben würden, denn nun _hätten_ wir einen Bezugswert und die `100%` Höhe von `article` entsprächen nun diesen `20em` Höhe des Elternelementes `main`. Aber das machen wir nicht, sondern behalten unsere Angabe `main { height: 100%; }`{: .language-css} und geben _dessen_ Elternelement `body` ebenfalls eine Höhe von `100%`, schreiben also in unser Stylesheet: `body { height: 100%; }`{: .language-css}, und stellen fest, dass die Höhe von `article` immer noch nach dessen Inhalt, also `p` bemessen wird. Wenn wir nun aber _auch noch_ dem Element `html` eine `height` von `100%` zuweisen, also schreiben… ~~~ css html, body, main, article { height: 100%; } ~~~ …dann funktioniert es und `article` füllt in der Höhe das ganze Fenster aus! - Aber warum? Deswegen, weil die Angabe zu `height` für das letzte Glied in der Kette, also unser Element `html` sich nun auf den **viewport** bezieht, dessen Abmessungen durch die Breite und Höhe des Fensters im Browser definiert sind, weshalb hier also ein _Bezugswert_ gegeben ist, nach welchem sich wiederum alle prozentualen Angaben in der Kette der Elemente richten können. Nähmen wir nun aber `main` wieder heraus, wäre die Kette unterbrochen, das heißt `html` und `body` hätten eine Höhe von `100%` des Browserfensters, aber `article` wäre wieder nur so hoch wie sein Inhalt. In dem Fall, dass wie in diesem kleinen Beispiel letztlich alle Angaben auf den **viewport** bezogen sind, könnte man aber auch gleich schreiben `article { height: 100vh; }`{: .language-css}, da die Einheiten **vh** (für _viewport height_) und **vw** (für _viewport width_) sich genau auf diese Abmessungen des `viewports`, also des Browserfensters beziehen. Wenn wir nun mit diesem Wissen **deinen Code** betrachten, dann stellen wir fest, dass dein Element `div` mit der ID `navigation` ein Kindelement von `article` ist. Und wir stellen weiterhin fest, dass du für dieses Element `article` **keine Angabe** zur Eigenschaft `height` gemacht hast, das heißt, obwohl du... > ~~~ css > html, body { > height:100%; > } > ~~~ …ausprobiert hast, ist die Kette durch `article` _unterbrochen_ und alle prozentualen Angaben, die du für _dessen_ Kindelemente gemacht hast, sind vergebens! So, nachdem _das_ also geklärt wäre, noch ein paar _Hinweise_ zu deinem **Code**… ;-) > ~~~ html > <!DOCTYPE html> > <html lang="de" height="100%"> > ~~~ Das Element `html` darf kein Attribut `height` haben. Die Attribute `width` und `height` sind nur bei wenigen Elementen erlaubt, wie etwa `img`, `input`, `object` oder `canvas`, also grob gesagt bei Elementen mit einem bestimmten Inhaltsmodell, aber das können dir andere hier sicher besser erklären. ;-) > ~~~ html > <head height="100%"> > ~~~ Gleiches gilt jedenfalls für das Element `head`, wobei hier die Unsinnigkeit einer solchen Angabe noch augenscheinlicher ist, da `head`, also der Kopf eines HTML-Dokumentes, mit der Darstellung im Fenster des Browsers _direkt_ gar nichts zu tun hat, sprich, das Element _head_ und seine Kindelemente werden gar nicht gerendert. Zur Anzeige gebracht wird nur der Inhalt des Elementes `body`. > ~~~ html > <link href="design.css" type="text/css" rel="stylesheet"> > ~~~ Die Angabe `type="text/css"`{: language-html} kannst du dir sparen, da der Browser grundsätzlich davon ausgeht, dass eingebundene Stylesheets in CSS verfasst sind. > ~~~ html > <body bgcolor="#7e7e7e" height="100%"> > ~~~ Auch für das Element `body` gilt, dass die Attribute `height` und `width` nicht erlaubt sind, und das selbe gilt für `bgcolor`, das heißt, du hättest hier höchstens schreiben können… ~~~ html <body style="height: 100%; background-color: #7e7e7e;"> ~~~ …aber **Gestaltung** und **Markup** sollten so streng wie möglich **getrennt** sein, weshalb die Zuweisung von Styles im `style`-Attribut, von wenigen begründeten Ausnahmefällen abgesehen, dringend zu _vermeiden_ ist. Du hast hier ja eine CSS-Datei eingebunden, also schreibe dort: ~~~ css body { height: 100%; background-color: #7e7e7e; } ~~~ Weiter im Quelltext… > ~~~ html > <header> > <!-- <img src="logo.jpg" width="50" height="50"></img>--> > </header> > ~~~ Gut, dass du das `img`-Element in einen Kommentar gepackt hast. ;-) Die Attribute `width` und `height` sind wie oben schon gesehen für das Element `img` zwar zulässig, aber dieses Element hat _kein schließendes Tag_, denn welcher _Inhalt_ sollte umschlossen werden? Auch sollte aus Gründen der **Barrierefreiheit** ein _kurzer_ Alternativtext hinterlegt werden: ~~~ html <img src="logo.jpg" width="50" height="50" alt="Kurze Bildbeschreibung"> ~~~ Weiter… > ~~~ html > <article> > <h1>Überschrift</h1> > <div id="navigation"> > <div id="item1">Part A</div> > <div id="item2">Part B</div> > <div id="item3">Part C</div> > <div id="item4">Part D</div> > <div id="item5">Part E</div> > </div> > </article> > ~~~ Hier solltest du zunächst einmal darüber nachdenken, ob die von dir verwendeten Elemente auch wirklich _passend_ und sie auch an der richtigen _Stelle_ sind: Das Element `article` dient dazu, in Abgrenzung zu anderen Inhalten, einen bestimmten inhaltlich _eigenständigen Abschnitt_ des Seiteninhalts auszuzeichnen, wobei der Seiteninhalt _selbst_ jedoch durch das Element `main` ausgezeichnet werden sollte, welches daher auch nur _einmal_ pro Dokument vorkommen darf, also statt `<article>`{: .language-html} wäre hier `<main role="main">`{: .language-html} wohl angebrachter, wobei abhängig von den Inhalten, welche du hinzuzufügen gedenkst, innerhalb von `main` durchaus mehrere `article`-Elemente notiert werden können. Dann hast du als erstes Kindelement von `article`, das wohl eigentlich viel lieber `main` sein möchte, eine Überschrift `h1` gewählt. Die Überschriften, also `h1` bis `h6` sollten die Hierarchien innerhalb des Dokumentes repäsentieren, das heißt `h1` wäre hier als globale Überschrift eher in deinem `<header>`{: .language-html} unterzubringen, und für Inhaltlich untergeordnete Elemente wie `main` oder `article` wären dann `h2`, `h3` usw. zu wählen, die natürlich in CSS noch gestaltet werden können. Was nun dein `div`-Element namens `navigation` angeht: Auch hier gibt es ein semantisch passenderes Element, welches sich sinnigerweise `nav` nennt… Die Navigation ist allerdings kein Teil des eigentlichen Seiteninhalts, weshalb je nach dem, ob es sich _hierbei_ lediglich um eine _seiteninterne_ Navigation handelt oder nicht, und wie du dir dein Layout eben so vorstellst, das Element `nav` auf einer Ebene mit `main`, oder aber als Kindelement von `header` oder `aside` besser untergebracht wäre. Solltest du dich hier entscheiden, die Navigation _nicht_ im `header` der Seite unterzubringen, wäre es aus Gründen der Zugänglichkeit zum Inhalt der Seite aber wohl besser, wenn du das `nav` oder, wenn du es in einem `aside`-Element notieren willst, dann dieses Element, erst _nach_ `main` hinzufügen würdest. Was den Inhalt deiner Navigation angeht, kann man darüber streiten, ob die _Links_ als direkte Kindelemente - also wie hier deine diversen `div`-Elemente - oder in Form einer Liste notiert werden sollten, wobei _ich_ eine Liste hier für semantisch passend erachte: ~~~ html <nav> <ul> <li><a href="…"> Link 1 </a></li> <li><a href="…"> Link 2 </a></li> <li><a href="…"> Link 3 </a></li> <li><a href="…"> Link 4 </a></li> </ul> </nav> ~~~ Zu deinem CSS: > ~~~ css > #container{ > flex-direction: row; > flex-wrap: nowrap; > display: -webkit-flex; > display: flex; > } > ~~~ Ein Element mit der ID `container` gibt es in deinem hier geposteten Markup gar nicht, weshalb dieser Block völlig nutzlos ist. Auch **sollte** es, zumindest in der Regel, keine Elemente namens `container` geben, da dies üblicherweise ein Hinweis darauf ist, dass entweder Markup zu Gestaltungszwecken missbraucht wird oder dass unnötigerweise eine ID für ein diese Funktion erfüllendes Element vergeben wird, welches auch direkt angesprochen werden kann, z.B. `html`, `body` oder `main`, aber das nur so als Anmerkung. ;-) Es kann jedenfalls nicht schaden, einmal einen Blick auf die verschiedenen [Selektoren](http://wiki.selfhtml.org/wiki/CSS/Selektoren) in CSS zu werfen, denn meistens ist die Vergabe von IDs oder die Zuweisung von Klassen überflüssig. Außerdem kannst du dir durch die richtige Wahl der Selektoren auch mehrfache Zuweisungen wie im Rest deines Codes sparen, den zu zitieren ich jetzt mal unterlasse. ;-) Erwäht sei höchstens noch, dass es in CSS einige _shorthand-properties_ wie beispielsweise `margin` oder `flex-flow` gibt, welche die Zahl der benötigten Zeilen zusätzlich zur passenden Wahl der Selektoren weiter reduzieren helfen, und was dein `@font-face`{: .language-css} angeht: Du lädst hier ja gar keine Schriften nach, also solltest du vielleicht einfach mal einen Blick auf [diese Seite](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung) werfen. > PS: Ich bin Anfänger, bitte berücksichtigen, danke :-) Ich hoffe, das habe ich getan und mein Beitrag war hilfreich. ;-) Gruß, Orlok
Prozentuale Höhenangabe wird ignoriert bearbeitet von Orlok 05.09.2015 15:34 Hallo > [Ich] habe das Problem, dass prozentuale Höhenangaben mit CSS ignoriert werden. Bei _prozentualen_ Angaben ist die Frage immer: **Prozent von was?** Wenn du also einem Element eine `height` in Prozent zuweist, dann bezieht sich dieser Wert auf das direkte Vorfahrenelement, und wenn du für _dieses_ Element keine explizite Angabe zur Höhe gemacht hast, dann passiert, wie du festgestellt hast, nichts, denn in Ermangelung eines Bezugswertes wird der Wert der Eigenschaft `height` ganz einfach nach der Höhe des Inhalts des Elementes bemessen. Wenn das Vorfahrenelement des Elementes, um das es geht, nun selbst zwar eine Angabe zu `height` hat, deren Wert jedoch _ebenfalls_ eine prozentuale Angabe ist, dann verschiebt sich dieser Zusammenhang einfach um eine Ebene und die Frage ist wieder: Worauf bezieht sich nun _diese_ Angabe? Nehmen wir also mal das folgende simple Beispiel: ~~~ html <!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title> Höhe in Prozent </title> </head> <body> <main role="main"> <article> <p> Höhe in Prozent </p> </article> </main> </body> </html> ~~~ Würden wir jetzt für das Element `article` im Stylesheet eine Höhe in Prozent zuweisen, also schreiben `article { height: 100%; }`{: .language-css}, ohne für dessen Vorfahrenelemente Angaben für `height` zu machen, dann würde sich die Höhe von `article`, da es keine Angabe gibt, auf welche sich die Prozentangabe beziehen kann, nach dessen _Inhalt_ richten, hier also der Höhe des Elementes `p`. Nehmen wir nun an, wir würden _zudem_ auch für das Elternelement von `article`, also `main`, eine prozentuale Angabe zu `height` machen, also schreiben `main { height: 100%; }`{: .language-css}, ohne aber für _dessen_ Elternelement `body` eine explizite Angabe zu machen, dann hätten wir wieder die gleiche Situation: Die Höhe von `main` bemisst sich mangels Bezugswert nach dem Inhalt, und es bleibt schließlich bei der Höhe des _paragraphs_. Etwas anderes wäre es nun, wenn wir für `main` _keine prozentuale_ Angabe zur Eigenschaft `height` machen würden, sondern zum Beispiel `main { height: 20em; }`{: .language-css} schreiben würden, denn nun _hätten_ wir einen Bezugswert und die `100%` Höhe von `article` entsprächen nun diesen `20em` Höhe des Elternelementes `main`. Aber das machen wir nicht, sondern behalten unsere Angabe `main { height: 100%; }`{: .language-css} und geben _dessen_ Elternelement `body` ebenfalls eine Höhe von `100%`, schreiben also in unser Stylesheet: `body { height: 100%; }`{: .language-css}, und stellen fest, dass die Höhe von `article` immer noch nach dessen Inhalt, also `p` bemessen wird. Wenn wir nun aber _auch noch_ dem Element `html` eine `height` von `100%` zuweisen, also schreiben… ~~~ css html, body, main, article { height: 100%; } ~~~ …dann funktioniert es und `article` füllt in der Höhe das ganze Fenster aus! - Aber warum? Deswegen, weil die Angabe zu `height` für das letzte Glied in der Kette, also unser Element `html` sich nun auf den **viewport** bezieht, dessen Abmessungen durch die Breite und Höhe des Fensters im Browser definiert sind, weshalb hier also ein _Bezugswert_ gegeben ist, nach welchem sich wiederum alle prozentualen Angaben in der Kette der Elemente richten können. Nähmen wir nun aber `main` wieder heraus, wäre die Kette unterbrochen, das heißt `html` und `body` hätten eine Höhe von `100%` des Browserfensters, aber `article` wäre wieder nur so hoch wie sein Inhalt. In dem Fall, dass wie in diesem kleinen Beispiel letztlich alle Angaben auf den **viewport** bezogen sind, könnte man aber auch gleich schreiben `article { height: 100vh; }`{: .language-css}, da die Einheiten **vh** (für _viewport height_) und **vw** (für _viewport width_) sich genau auf diese Abmessungen des `viewports` beziehen, also des Browserfensters beziehen. Wenn wir nun mit diesem Wissen **deinen Code** betrachten, dann stellen wir fest, dass dein Element `div` mit der ID `navigation` ein Kindelement von `article` ist. Und wir stellen weiterhin fest, dass du für dieses Element `article` **keine Angabe** zur Eigenschaft `height` gemacht hast, das heißt, obwohl du... > ~~~ css > html, body { > height:100%; > } > ~~~ …ausprobiert hast, ist die Kette durch `article` _unterbrochen_ und alle prozentualen Angaben, die du für _dessen_ Kindelemente gemacht hast, sind vergebens! So, nachdem _das_ also geklärt wäre, noch ein paar _Hinweise_ zu deinem **Code**… ;-) > ~~~ html > <!DOCTYPE html> > <html lang="de" height="100%"> > ~~~ Das Element `html` darf kein Attribut `height` haben. Die Attribute `width` und `height` sind nur bei wenigen Elementen erlaubt, wie etwa `img`, `input`, `object` oder `canvas`, also grob gesagt bei Elementen mit einem bestimmten Inhaltsmodell, aber das können dir andere hier sicher besser erklären. ;-) > ~~~ html > <head height="100%"> > ~~~ Gleiches gilt jedenfalls für das Element `head`, wobei hier die Unsinnigkeit einer solchen Angabe noch augenscheinlicher ist, da `head`, also der Kopf eines HTML-Dokumentes, mit der Darstellung im Fenster des Browsers _direkt_ gar nichts zu tun hat, sprich, das Element _head_ und seine Kindelemente werden gar nicht gerendert. Zur Anzeige gebracht wird nur der Inhalt des Elementes `body`. > ~~~ html > <link href="design.css" type="text/css" rel="stylesheet"> > ~~~ Die Angabe `type="text/css"`{: language-html} kannst du dir sparen, da der Browser grundsätzlich davon ausgeht, dass eingebundene Stylesheets in CSS verfasst sind. > ~~~ html > <body bgcolor="#7e7e7e" height="100%"> > ~~~ Auch für das Element `body` gilt, dass die Attribute `height` und `width` nicht erlaubt sind, und das selbe gilt für `bgcolor`, das heißt, du hättest hier höchstens schreiben können… ~~~ html <body style="height: 100%; background-color: #7e7e7e;"> ~~~ …aber **Gestaltung** und **Markup** sollten so streng wie möglich **getrennt** sein, weshalb die Zuweisung von Styles im `style`-Attribut, von wenigen begründeten Ausnahmefällen abgesehen, dringend zu _vermeiden_ ist. Du hast hier ja eine CSS-Datei eingebunden, also schreibe dort: ~~~ css body { height: 100%; background-color: #7e7e7e; } ~~~ Weiter im Quelltext… > ~~~ html > <header> > <!-- <img src="logo.jpg" width="50" height="50"></img>--> > </header> > ~~~ Gut, dass du das `img`-Element in einen Kommentar gepackt hast. ;-) Die Attribute `width` und `height` sind wie oben schon gesehen für das Element `img` zwar zulässig, aber dieses Element hat _kein schließendes Tag_, denn welcher _Inhalt_ sollte umschlossen werden? Auch sollte aus Gründen der **Barrierefreiheit** ein _kurzer_ Alternativtext hinterlegt werden: ~~~ html <img src="logo.jpg" width="50" height="50" alt="Kurze Bildbeschreibung"> ~~~ Weiter… > ~~~ html > <article> > <h1>Überschrift</h1> > <div id="navigation"> > <div id="item1">Part A</div> > <div id="item2">Part B</div> > <div id="item3">Part C</div> > <div id="item4">Part D</div> > <div id="item5">Part E</div> > </div> > </article> > ~~~ Hier solltest du zunächst einmal darüber nachdenken, ob die von dir verwendeten Elemente auch wirklich _passend_ und sie auch an der richtigen _Stelle_ sind: Das Element `article` dient dazu, in Abgrenzung zu anderen Inhalten, einen bestimmten inhaltlich _eigenständigen Abschnitt_ des Seiteninhalts auszuzeichnen, wobei der Seiteninhalt _selbst_ jedoch durch das Element `main` ausgezeichnet werden sollte, welches daher auch nur _einmal_ pro Dokument vorkommen darf, also statt `<article>`{: .language-html} wäre hier `<main role="main">`{: .language-html} wohl angebrachter, wobei abhängig von den Inhalten, welche du hinzuzufügen gedenkst, innerhalb von `main` durchaus mehrere `article`-Elemente notiert werden können. Dann hast du als erstes Kindelement von `article`, das wohl eigentlich viel lieber `main` sein möchte, eine Überschrift `h1` gewählt. Die Überschriften, also `h1` bis `h6` sollten die Hierarchien innerhalb des Dokumentes repäsentieren, das heißt `h1` wäre hier als globale Überschrift eher in deinem `<header>`{: .language-html} unterzubringen, und für Inhaltlich untergeordnete Elemente wie `main` oder `article` wären dann `h2`, `h3` usw. zu wählen, die natürlich in CSS noch gestaltet werden können. Was nun dein `div`-Element namens `navigation` angeht: Auch hier gibt es ein semantisch passenderes Element, welches sich sinnigerweise `nav` nennt… Die Navigation ist allerdings kein Teil des eigentlichen Seiteninhalts, weshalb je nach dem, ob es sich _hierbei_ lediglich um eine _seiteninterne_ Navigation handelt oder nicht, und wie du dir dein Layout eben so vorstellst, das Element `nav` auf einer Ebene mit `main`, oder aber als Kindelement von `header` oder `aside` besser untergebracht wäre. Solltest du dich hier entscheiden, die Navigation _nicht_ im `header` der Seite unterzubringen, wäre es aus Gründen der Zugänglichkeit zum Inhalt der Seite aber wohl besser, wenn du das `nav` oder, wenn du es in einem `aside`-Element notieren willst, dann dieses Element, erst _nach_ `main` hinzufügen würdest. Was den Inhalt deiner Navigation angeht, kann man darüber streiten, ob die _Links_ als direkte Kindelemente - also wie hier deine diversen `div`-Elemente - oder in Form einer Liste notiert werden sollten, wobei _ich_ eine Liste hier für semantisch passend erachte: ~~~ html <nav> <ul> <li><a href="…"> Link 1 </a></li> <li><a href="…"> Link 2 </a></li> <li><a href="…"> Link 3 </a></li> <li><a href="…"> Link 4 </a></li> </ul> </nav> ~~~ Zu deinem CSS: > ~~~ css > #container{ > flex-direction: row; > flex-wrap: nowrap; > display: -webkit-flex; > display: flex; > } > ~~~ Ein Element mit der ID `container` gibt es in deinem hier geposteten Markup gar nicht, weshalb dieser Block völlig nutzlos ist. Auch **sollte** es, zumindest in der Regel, keine Elemente namens `container` geben, da dies üblicherweise ein Hinweis darauf ist, dass entweder Markup zu Gestaltungszwecken missbraucht wird oder dass unnötigerweise eine ID für ein diese Funktion erfüllendes Element vergeben wird, welches auch direkt angesprochen werden kann, z.B. `html`, `body` oder `main`, aber das nur so als Anmerkung. ;-) Es kann jedenfalls nicht schaden, einmal einen Blick auf die verschiedenen [Selektoren](http://wiki.selfhtml.org/wiki/CSS/Selektoren) in CSS zu werfen, denn meistens ist die Vergabe von IDs oder die Zuweisung von Klassen überflüssig. Außerdem kannst du dir durch die richtige Wahl der Selektoren auch mehrfache Zuweisungen wie im Rest deines Codes sparen, den zu zitieren ich jetzt mal unterlasse. ;-) Erwäht sei höchstens noch, dass es in CSS einige _shorthand-properties_ wie beispielsweise `margin` oder `flex-flow` gibt, welche die Zahl der benötigten Zeilen zusätzlich zur passenden Wahl der Selektoren weiter reduzieren helfen, und was dein `@font-face`{: .language-css} angeht: Du lädst hier ja gar keine Schriften nach, also solltest du vielleicht einfach mal einen Blick auf [diese Seite](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung) werfen. > PS: Ich bin Anfänger, bitte berücksichtigen, danke :-) Ich hoffe, das habe ich getan und mein Beitrag war hilfreich. ;-) Gruß, Orlok
nicht angemeldet
