[Dukemon]

Leider finde ich nicht die Lösung, um in der horizontal angeordneten ungeordneten Liste, die Listenpunkte und auch das Seitenlogo vertikal zu zentrieren. Sowohl der ul und als den li Elementen habe ich die selbe Höheneigenschaft wie der flex div gegeben, die sich der nav-tag und der header-tag teilen. Aber irgendwie ist das nicht zum Teil der Lösung geworden.
Die Grafik ist eher Platzhalter.

Aktuelles Bild
[Bild: webtemplate_02_zumzeigen3.jpg]

<div class="flex row">
	<div id="kopfbereich">
		<h1><img src alt width="308" height="50" id="imglogo"></h1>
	</div>

	<div id="navibereich">
		<ul id="hauptnavigation">
			<li class="hnavigation" id="navilink1"><a href="index.html">Startseite</a></li>
			<li class="hnavigation" id="navilink2"><a href="index.html">Rezensionen</a></li>
			<li class="hnavigation" id="navilink3"><a href="index.html">Downloads</a></li>
			<li class="hnavigation" id="navilink4"><a href="index.html">Impressum</a></li>
		</ul>
	</div>
</div>

Die wichtigsten CSS Deklarationen.

div#kopfbereich{
	width:45%;
	height:4em;
	float:left;
	display:block;
	text-align:left;}
div#navibereich{
	width:55%;
	height:4em;
	display:block;
	text-align:right;}
ul#hauptnavigation{
	display:flex;
	text-align:center;
	justify-content:space-between;
	list-style-position: inside;
}

li.hnavigation{display:inline; vertical-align:middle;}

Dann verstehe ich nicht, was ich im Endbereich der Seite und dieser ul übersehe. Eigentlich sind sämtliche Eigenschaften identisch und nur die Hintergrundfarbe beim drüberfahren soll sich ändern, aber irgendwie ändert sich auch das Format des Links/der li, dadurch entsteht auch ein nicht gewollter Verschiebungseffekt.

<div class="flex">
		<ul id="footnavi">
			<li class="fnavi" id="fnav1"><a href target="_self">Impressum</a></li>
			<li class="fnavi" id="fnav2"><a href target="_blank">Dukevision auf YouTube</a></li>
		</ul>
	</div>

der CSS Teil dazu

div#fussbereich{width:60%;height:150px;margin:0 auto;background-color:#88ABC2;padding:0 20px;}

ul#footnavi{
	display:flex;
	flex-direction:row;
	justify-content:center;
	width:100%;}


li.fnavi{
	padding:12px 6px 16px 6px;}

li.fnavi :hover{
	padding:12px 6px 16px 6px;
	background-color:#CAFF42;}

#footnavi a{
	color:#EBF7F8;
	font-size:14px;
	font-weight:bolder;
	text-decoration:none;
}

#footnavi a:visited{
	color:#EBF7F8;
	font-size:14px;
	font-weight:bolder;
	text-decoration:none;
}

#footnavi a:hover{
	color:#49708A;
	font-size:14px;
	font-weight:bolder;
	text-decoration:none;
}

Und dann hätte ich noch ein paar ordnungstechnische Fragen. Welche Anordnung der Deklarationen in CSS ist für Euch sinnvoll und warum? Wohin gehören für euch in HTML die Versionshinweise? Vor dem Doctype? Vor dem HTML Tag? Ist das überhaupt sinnvoll?

edit: Dürfte ich anmerken, dass das dunkelblau auf dem dunkelgrünen Hintergrund im HTML-Forentag nicht gut lesbar ist oder ist das eine Einstellungssache?

[Dukemon]

Das Seitenmenü oben rechts habe ich nun mit relative und dem halbe Wert der Höhe der Leiste mittig platziert.
Wird der Mix aus flex, relativer Position und halben em Wert Probleme machen, wenn ich zum Beispiel das Design auf die Bildschirmgröße reagieren lasse?

[Multithread]

Ich kenne mich mit CSS nicht gut genug aus.
Was das reagieren auf Bildschirmgrössen angeht:
Vermutlich wenn du in den bereich der Breite eines Smartphones kommst, könnte es Probleme geben, wenn das Design nicht umbrechen kann, oder direkt via @media ab einer bestimmten Grösse zu einem Dropdown wird.

Ev. lohnt es sich auch, ein CSS Framework wie z.B. Bootstrap zu verwenden. Viele solcher kleinen Probleme sind dort oftmals schon gelöst (z.b. Navigation inklusive Smartphone Handling)

[Dukemon]

Frameworks würde ich ungern nutzen. A: will ich keine references, die auf irgendwelche anderen Ressourcen zugreifen/nutzen (deswegen auch kein GoogleFonts und Konsorten) und B: möchte ich möglichst alles selbst schreiben, was ich benötige und nicht auch den Code voll haben mit Properties, die ich gar nicht definiert brauche. Zumindest noch nicht brauche.

Ich habe mich nur gefragt, ob meine Methode zum positionieren der horizontalen ul in der Mitte der div, schwierig werden könnte, wenn ich mit media-queries arbeite und aus der horizontalen Menüleiste, eine vertikale Liste mache. Vertragen sich halt position:relativ und die Änderungen, die mit der Bildschirmgröße dazu kommen.