Bildunterschriften

[Felix Riesterer]

Lieber Roland,

Kann mir jemand einen Tip geben?

Vllt ist in dieser Struktur auch irgendwo ein Denkfehler...

ich fange mal ganz von vorne an und ermutige Dich, diese Seite auf einem Smartphone anzuschauen.

Hast Du's probiert? Kannst Du die Seite sinnvoll nutzen? Ist nicht alles viiiel zu klein? Und wenn Du zoomst, musst Du dann nicht ständig hin- und herwischen, um alles sehen zu können?

Das Problem ist der grundsätzliche Aufbau der Seite: die Layouttabelle. Du verwendest die Tabelle, um eine 2-spaltige Darstellung zu erreichen. Dass das je nach Anzeigegerät keine gute Idee ist, mag Dir vielleicht sogar schon längst klar gewesen sein, aber mit der Tabelle zwingst Du jedes Gerät zur 2-Spalten-Ansicht. Das ist nicht gut.

Du gibst Dir wirklich sehr viel Mühe, um Dein HTML nach aktuellen Gepflogenheiten aufzubauen. Das finde ich ehrenwert. Daher möchte ich Dir hier etwas aufzeigen, was noch unverstanden geblieben ist:

<header>
	<div class="huelle_kopfleiste"> 
		<nav>
		<ul>
			<li><a href="index.html">Startseite</a></li>
			<li><a href="index_re_themen.html">Themen</a></li>
			<li><a href="index_re_arbeiten_ueberblick.html">Arbeiten</a></li>
			<li><a href="index_re_kontakte.html">Kontakte</a></li>
		</ul>
		</nav>	
		<h1>Erdmannsdorffer<br>Architekt<br> <br><p>Überbauung Waldgass<br>Blick auf Berge und Seen</p></br></h1>
		<div class="themenbild">
			<img src="Bilder/Eich Waldgass/Waldgass_Icon_Haus4.png" title="Haus 4 Süden" width="388" height="180" alt=""/>
		</div>
	</div>
</header>

Das header-Element ist genau richtig verwendet worden. Es ist für den Seitenkopf. Aber das einzige Kindelement von header ist ein div, in dem sich der gesamte Inhalt des Headers befindet. Wozu also das div überhaupt?

Selbst wenn das div unverzichtbar ist, wozu benötigt es die Klasse "huelle_kopfleiste"? Gibt es noch ein anderes Element, das diese Klasse benötigt? Wenn es nämlich nur dieses eine Element mit dieser Klasse gibt, dann wäre eine ID sinnvoller, da IDs dokumentweit einmalig sind. Aber auch die wird es nicht benötigen, da das div in einem Element steht, das nur einmal vorhanden ist. Damit kannst Du das auch so notieren:

header > div {
	position: relative;
	height: 380px;
	max-width: 1920px;
}

Wenn wir uns Deine Kopfleiste genauer anschauen, stellen wir fest, dass es dort ein Bild gibt. Dieses wirkt wie eine Hintergrundgrafik und nicht wie eine Illustration. Daher ist die Verwendung eines img-Elementes an der Stelle vielleicht nicht die beste Idee. Hintergrundbilder gehören ins CSS. Und da es über Deinem Bild noch eine Überschrift gibt, könnte man dieser das Hintergrundbild geben.

Leider hat bei Dir genau dort der Fehlerteufel zugeschlagen:

<h1>Erdmannsdorffer<br>Architekt<br> <br><p>Überbauung Waldgass<br>Blick auf Berge und Seen</p></br></h1>
<div class="themenbild">
	<img src="Bilder/Eich Waldgass/Waldgass_Icon_Haus4.png" title="Haus 4 Süden" width="388" height="180" alt=""/>
</div>

Wir sehen, dass das h1-Element nicht korrekt geschlossen wurde, ehe das p-Element beginnt. Ein h1-Element kann kein p-Element als Kindelement haben. Daher ist das schließende Tag </h1> nicht das tatsächliche Ende der Überschrift, da der Browser diesen Fehler schlicht korrigiert.

Die vielen <br> sind außerdem noch verbesserungswürdig. Abstände kann man mit CSS sehr schön einstellen. Daher ist ihre Verwendung nur dann eine sinnvolle, wenn man einen Zeilenumbruch erzwingen will, weil man nicht auf das "natürliche" Zeilenende warten möchte.

Die Idee mit dem Themenbild innerhalb seines eigenen Containers ist keine schlechte, jedoch bietet es sich an, den gesamten <header> so umzubauen:

<header>
	<div>
		<h1>Erdmannsdorffer<br>Architekt</h1>
		<p>Überbauung Waldgass<br>Blick auf Berge und Seen</p>
	</div>
	<nav>
		<ul>
			<li><a href="index.html">Startseite</a></li>
			<li><a href="index_re_themen.html">Themen</a></li>
			<li><a href="index_re_arbeiten_ueberblick.html">Arbeiten</a></li>
			<li><a href="index_re_kontakte.html">Kontakte</a></li>
		</ul>
	</nav>
</header>

Nun kann man mit den Mitteln von CSS alle Teile an ihren Platz bewegen.

Wo ist denn das Bild geblieben? Ja, dazu jetzt etwas mehr. Die Grafik hat stolze 650kB mit den Abmessungen von 2321x1076 Pixeln! Das ist deshalb nicht sinnvoll, weil davon nur 388x180 Pixel angezeigt werden sollen. Das geht besser, indem man die Grafik vorher skaliert und als kleinere Bilddatei speichert.

Da Deine Seitenköpfe alle sehr ähnlich im Layout sein sollen, wäre diese Struktur für den Header ganz gut. Wenn man das Bild als Hintergrundbild umsetzt, kann <header> sein Muster als Hintergrundbild haben, das <div> darin das eigentliche Themenbild. Der Text der Überschrift und des Textabsatzes bekommt dann eine maximale Breite zur Verfügung, der Rest wird dann vom Hintergrund-Themenbild eingenommen:

header {
	height: 280px;
	background-image: url(Bilder/bronze-textur-010.jpg);
}

header div {
	...;
	background-image: url(Bilder/Eich Waldgass/Waldgass_Icon_Haus4.png);
	background-position: right center;
	background-repeat: no-repeat;
}

Du wirst jetzt sicherlich sagen: Ja, aber ich habe auf verschiedenen Seiten verschiedene Themenbilder! Und damit wäre eine Lösung zu finden, wie man die Hintergrundbilder im CSS je nach Seite spezifisch darstellen kann. Folgender Vorschlag:

<body id="waldgass">
	<header>
		<div>
			<h1>Erdmannsdorffer<br>Architekt</h1>
			<p>Überbauung Waldgass<br>Blick auf Berge und Seen</p>

Wir geben dem Body eine passende ID. Auf dieser Seite geht es um die Überbauung Waldgass. Das kann so in die ID. Im CSS kann man nun darauf eingehen:

header {
	...;
}

header div {
	...;
	background-position: right center;
	background-repeat: no-repeat;
}

#waldgass header div {
	background-image: url(Bilder/Eich Waldgass/Waldgass_Icon_Haus4.png);
}

#kontakt header div {
	background-image: url(Bilder/RE_Portrait_140x185.jpg);
}

Es wäre jetzt zu prüfen, wie der Header auf schmalen Viewports wie z.B. Smartphones aussehen soll. Hier müsstest Du Dir überlegen, ob das <nav>-Element nicht mehr in der rechten Hälfte, sondern darunter abgebildet werden soll. Dafür kann man dann andere Darstellungsoptionen definieren.

Liebe Grüße

Felix Riesterer