Problem beim Erstellen eines Footers mit Copyright, Impressum und Datenschutz

[Rolf B]

Hallo Michael53,

naja, einwandfrei ist anders.

• Header und Footer haben unterschiedliche Randabstände. Grund ist, dass der Footer im Content-Bereich ist, der Header nicht.

• div class="header" möchte viel lieber ein header Element sein.

• div class="content" möchte viel lieber ein main Element sein.

• Dein (c) Eintrag im Footer mag nicht in die Liste. Eine Liste zählt gleichartige Elemente auf. Dein (c) gehört nicht dazu.

CSS

footer {
	background: #2c3e50;
	text-align: center;
	color: #fff;
	margin-top: 1em;
	padding: 0.8em;
	border-radius: 1em;
}
footer span, footer ul {
    display: inline-block;
	font-size: 1.2em;
	font-weight: bold;
    margin: 0.2em;
}
footer ul {
	text-align: center; 
}
footer ul li {
	display: inline;
	padding: 0em 0.5em;
}
footer ul li a{
	color: #E2DBDB;
}~~~

HTML

~~~html
<footer>
  <span>&copy; 2019 Michael Dorner</span>
	<ul>
		<li>Datenschutz</li>
		<li>Impressum</li>
	</ul>	
</footer>

Dadurch, dass die Linkliste ein eigenes Element ist, rückt sie bei Platzmangel geschlossen unter den (c) Eintrag. Das sieht besser aus. Die 0.8em Padding des footer-Elements und die 0.2em Margin von span und ul addieren sich außen zu 1em Abstand. Bricht der Footer um, sind es zwischen den Zeilen 0.4em Abstand. Durch verändern dieser beiden Werte kannst Du den Abstand zum Footer-Rand und zwischen den beiden Zeilen justieren.

Die max-width Einträge habe ich weggenommen. Du solltest besser dem body Element ein max-width geben.

Der Header ist nicht so einfach. Da kommen noch deine Media-Breaks hinzu, die einen Umbruch eigentlich unschön machen. Du müsstest erstmal sagen, was Du willst. Soll das Menü sofort zum Menu-Button kollabieren, wenn es in der Breite nicht mehr passt? Oder willst Du einen Zwischenzustand, wo h2 und Menü untereinander stehen?

Rolf