Bildunterschriften

[Roland Erdmannsdorffer]

Hallo.

Ich bitte um Unterstützung.

Seit Tagen probier ich es. Leider bekomme ich es nicht hin, Untertitel unter meine .jgs linksbündig und einheitlich und einheitlich anzuordnen. Die HTTL-Anweisung und die Style-Angaben habe ich aus den HTML/Tutorials/Bilder "im Internet/Bilder mit CSS formatieren" übernommen und für mich angepasst. Auf dersleben Seite mit den selben Steuerungsangaben verschiebt sich die Bildunterschrift von Fall zu Fall.

Auf der Seite http://erdmannsdorffer.bplaced.net/index_re_arbeiten_bachenbuelach.html werden die Unterschriften wieder anders plaziert.

Danke.

Gruss
Roland

Nachstend noch die Zeilen aus dem CSS:

.huelle_arbeiten{
	height: 760px;
	max-width: 1920px;
	background-image: url(Bilder/champagne_metallic03.jpg);
	background-size: cover; 
}

.huelle_arbeiten h2{
	color:#302456;
}

.bilder_arbeiten_01{
	position: relative;
	height: 150px;
	max-width: 1880px;
}

.bilder_arbeiten_02{
	position: relative;
	height: 150px;
	max-width: 1880px;
}

.bilder_arbeiten_03{
	position: relative;
	height: 250px;
	max-width: 500px;
	padding-top: 3.5em;
}

.bilder_arbeiten_04{
	position: relative;
	height: 250px;
	width: 1300px;
	margin-top: 200px;
	margin-left: 430px;
	margin-right: 146.5px;
}


.huelle_arbeiten img{
	margin: 0.8%;
	margin-top: 2.8%;
	z-index: 1;
}

.bilder_arbeiten_01 img{
	margin: 2.5%;
	margin-top: 3em;
	z-index: 1;
}
.bilder_arbeiten_02 img{
	margin: 2.5%;
	margin-top: 6em;
	z-index: 1;
}
.bilder_arbeiten_03 img{
	margin: 0%;
	margin-top: 2%;
	z-index: 1;
	object-position: bottom;
}


figure {
  	position: relative;
  	margin-left: -1em;
  	margin-top: -2em;
  	width: 50%;
  	border: none;
  	background: none;
	float:left;
}

figcaption {
 	padding-left: 6em;
	padding-top: 2em;
  	text-align: left;
}

Edit Rolf B: Fließtext formatiert.

[Tabellenkalk]

Hallo,

Ich bitte um Unterstützung.

Z.B. Figure im Wiki: Du musst die Bilder im Figure-Element einbauen, nicht außerhalb.

[Rolf B]

Hallo Roland,

viel hilft viel - hier nicht. Du justierst so viel herum, dass am Ende alles durcheinander ist.

Meine Empfehlung:

• kein Tabellenlayout, sondern eine Liste (<ul>) mit display: flex und Umbruch (flex-wrap). Die Listenpunkte und Einrückungen kann man entfernen.

• Kein JavaScript für den Zoom, sondern transform:scale und transition:transform um das zu animieren.

• Keine a Elemente zum Hervorheben, sondern Buttons. a sind LINKS, also etwas das nach extern soll. Buttons dienen als Aktion auf der Seite. Mit type="button" submitten sie auch keine Forms.

Ich habe da mal ein Fiddle vorbereitet.

Im Wesentlichen steht da dieses HTML Gerüst:

<ul class="gallery">
  <li>
    <figure>
      <button type="button">
        <img src="...">
      </button>
      <figcaption>Flügelauto</figcaption>
    </figure>
  </li>
  <li>...</li>
</ul>

und folgendes Styling

Listenpunkte und Listeneinrückungen entfernen. Flex-Layout mit Umbruch einschalten:

.gallery {
  list-style-type: none;
  padding: 0;
  display: flex; 
  flex-flow: row wrap;
}

Button nicht wie einen Button aussehen lassen. Aber ein kleines Padding, damit man den Markierungsrahmen sieht falls der Browser das transform nicht unterstützt (muss dann schon sehr alt sein, ab IE10 okay).

.gallery button {
  background-color: transparent;
  border: none;
  padding: 0.2em; margin: 0;
}

Für das img Element festlegen, dass transforms mit 1s Übergang auszuführen sind. Und die Höhe auf 10em festlegen, damit die Bilder mit der Schriftgröße skalieren.

Wenn der Button um das img den Fokus hat, das Bild vergrößern und etwas nach unten schieben.

.gallery img {
  transition: transform ease-in-out 1s;
  height: 10em;
}

.gallery button:focus img {
  transform: scale(1.4) translateY(0.5em);
}

Fertig. Kein JavaScript, kein Zurechtschieben mit Margins. Im Fiddle sieht Du es mit ein paar Bildern mehr.

Rolf

[Rolf B]

Hallo Roland,

ein Hinweis zum Gewerbepark Dagmersellen: diese Seite lädt extrem langsam. Die Bilder werden von deinem Server nicht schnell genug geliefert (6,6MB ist nicht soo viel, aber dein Web-Hoster lässt sich damit viel Zeit).

Ein Anwender auf einem Mobilgerät dürfte ebenfalls nicht begeistert sein.

Es ist lohnend, ein Bild auf die doppelte benötigte Größe zu rechnen, aber stark zu komprimieren. D.h. wenn es 500x400 angezeigt werden soll, skaliere es auf 1000x800. Aber komprimiere stark, so dass die Dateigröße unter 100KB ist. Anwender von Retina-Displays freuen sich darüber.

Und wo ich diese Seite gerade so sehe: Transforms kennst Du ja. Da hätte ich oben gar nicht so viel erklären brauchen 😉

Aber: ein Anwender mit einem Mobilgerät Touch-Display wird auf keinen Fall begeistert sein. :hover gibt's da nicht. Der Zoom sollte mittels :focus gesteuert werden, und die Bilder fokussierbar sein. Die Idee, dass Computeranwender hauptsächlich mit einer Maus vor einem Riesenmonitor sitzen, ist seit einigen Jahren nicht mehr gültig.

Rolf

[Roland Erdmannsdorffer]

Hallo alle Zusammen. Ich bin begeistert. So schnell. So gut. So detailliert. Besten Dank für Eure Unterstützung. Gruss Roland

[Rolf B]

Hallo Roland,

gerne. Als Entlohnung kannst Du an geeigneter Stelle etwas für CoViD Hilfe spenden 😉

Rolf

[klawischnigg]

Hi there,

Seit Tagen probier ich es. Leider bekomme ich es nicht hin, Untertitel unter meine .jgs linksbündig und einheitlich und einheitlich anzuordnen. Die HTTL-Anweisung und die Style-Angaben habe ich aus den HTML/Tutorials/Bilder "im Internet/Bilder mit CSS formatieren" übernommen und für mich angepasst. Auf dersleben Seite mit den selben Steuerungsangaben verschiebt sich die Bildunterschrift von Fall zu Fall.

Weil Du das figure-Element völlig unnötigerweise floaten läßt (also, die Anweisung float:left gehört 'raus, genauso wie margin-left:1em, das gehört auch weg) - dann sollte sich alles zentrieren (nach der Angabe <td align="center">, über die man natürlich auch scharf nachdenken könnte, genauso wie über ein vermutlich überflüssigens position:relative)...

[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

[Roland Erdmannsdorffer]

Hoi Felix. Ich bin begeistert. Allerbesten Dank. Hab' ja jetzt Zeit die Seite neu aufzubauen. Schönen Tag und blieb au dahei! Gruss Roland

[Roland Erdmannsdorffer]

Bitte noch ein Hinweis. Wie kann ich den peinlichen Tippfehler in der Überschrift meines posts korrigieren?

[Matthias Apsel]

Hallo Roland Erdmannsdorffer,

Bitte noch ein Hinweis. Wie kann ich den peinlichen Tippfehler in der Überschrift meines posts korrigieren?

Gar nicht. Und in der URL kann er auch von Niemandem korrigiert werden.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Und in der URL kann er auch von Niemandem korrigiert werden.

Auch nicht per "Thread verschieben"?

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

Und in der URL kann er auch von Niemandem korrigiert werden.

Auch nicht per "Thread verschieben"?

Hm. Keine Ahnung. Müsste @Christian Kruse sagen können.

Bis demnächst
Matthias

[Christian Kruse]

Hallo Matthias,

Und in der URL kann er auch von Niemandem korrigiert werden.

Auch nicht per "Thread verschieben"?

Hm. Keine Ahnung. Müsste @Christian Kruse sagen können.

Die einzige Möglichkeit den Slug zu korrigieren ist ihn der Datenbank zu ändern.

Freundliche Grüße,
Christian Kruse

[Rolf B]

Hallo Roland,

?!?!

Welcher Tippfehler?

(aber nach 4 Postings wurde es mir zu lästig - die müssen alle einzeln editiert werden....)

Rolf

[Matthias Apsel]

Hallo Rolf B,

Hallo Roland,

?!?!

Welcher Tippfehler?

(aber nach 4 Postings wurde es mir zu lästig - die müssen alle einzeln editiert werden....)

Ich kann ja auch noch 4 korrigieren. 😉

Bis demnächst
Matthias

[Roland Erdmannsdorffer]

Sorry. Ist schon gut. Bitte nicht mehr Arbeit machen als notwendig. Danke. Gruss Roland