nicht angemeldet
OrlokHallo
[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:
<!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%; }, 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%; }, 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; } 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%; } und geben dessen Elternelement body ebenfalls eine Höhe von 100%, schreiben also in unser Stylesheet: body { height: 100%; }, 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…
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; }, 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...
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… ;-)
<!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. ;-)
<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.
<link href="design.css" type="text/css" rel="stylesheet">
Die Angabe type="text/css" kannst du dir sparen, da der Browser grundsätzlich davon ausgeht, dass eingebundene Stylesheets in CSS verfasst sind.
<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…
<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:
body {
height: 100%;
background-color: #7e7e7e;
}
Weiter im Quelltext…
<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:
<img src="logo.jpg" width="50" height="50" alt="Kurze Bildbeschreibung">
Weiter…
<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> wäre hier <main role="main"> 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> 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:
<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:
#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 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 angeht: Du lädst hier ja gar keine Schriften nach, also solltest du vielleicht einfach mal einen Blick auf diese Seite werfen.
PS: Ich bin Anfänger, bitte berücksichtigen, danke :-)
Ich hoffe, das habe ich getan und mein Beitrag war hilfreich. ;-)
Gruß,
Orlok
Auge
Gunnar Bittersmann
Der Martin