<figure>

[Ad libitum]

Hallo zusammen,

ich arbeite mich gerade durch das Buch von Peter Müller durch: Websites erstellen mit Contao 3.0.

Dabei habe ich, wie auf Seite 278 beschrieben, eine Grafik eingebunden und siehe da, sie wird mir NICHT angezeigt. Hab es unter Windows mit Firefox, IE, Safari und Opera versucht und unter Linux mit Firefox. Immer das Gleiche: Keine Grafik. Ich hab dann herausgefunden, dass es am Tag <figure> liegt. Wenn ich das Tag im Quelltext auskommentiere - in einer Kopie - und die Datei dann anzeigen lassen, ist die Grafik da. Komischerweise schlägt mir der Browser aber trotzdem entsprechend der Größe der nicht angezeigten Grafik Platz frei!?

Ich kann mir jetzt irgendwie nicht vorstellen, dass das gar nicht geht. Da muss doch bei mir irgendwas faul sein. Ich find nur nicht raus, was es ist. Wer kann mir auf die Sprünge helfen - Danke.

Liebe Grüße
Oliver

[derRenner]

Hallo,

was mir ad-hoc dazu einfallen würde: <figure>, so glaube ich, ist ein HTML5-Tag - wenn du das Layout nicht unbedingt in HTML5 verwenden möchtest/musst, dann stell im Layout mal im Ausgabeformat von 'HTML' auf 'XHTML Strict' um. Dann sollte anstatt <figure> ein "normales" <div> erzeugt werden.

Was mir noch dazu einfallen würde, ist, im Layout evtl. MooTools-templates (und damit 'moo_mediabox" nicht geladen/angehakt wurde ...

Mag aber auch sein, dass das im HTML-Ausgabeformat erzeugte 'data-lightbox="lb34"' anstatt mit XHTML-Ausgabeformat 'rel="lightbox[lb34]" damit im Zusammenhang liegt - da kann aber evtl. einer der Profis mehr zu sagen

[Ad libitum]

Hallo der Renner,

Danke für Deinen Vorschlag, aber das muss doch auch als HTML funktionieren! Wenn der Peter das in seinem Buch so beschreibt und Screenshots drin hat, dann geh ich davon aus, dass das auch so funktioniert. Ergo muss bei mir irgendwo noch was falsch sein. Und <figure> ist ja nicht das einzige HTML5-Tag, das der Code ausspuckt. Aber bisher das einzige, das bei mir zickt - hoffentlich bleibt es so!

Mit den MooTools kann es nix zu tun haben, weil der Browser ja das Tag nicht versteht und daher den kompletten Inhalt ignoiert - na ja, nicht komplett sondern nur die Anzeige. Den Platz freischlagen tut er ja. Und wenn ich das Tag auskommentiere und die Seite aufrufe, wird das Bild angezeigt und bei einem Klick auf das Bild sieht man, wie MooTools aktiv wird und das Bild in Originalgröße als Overlay auf die Seite legt.

Es hat also ursächlich was mit <figure> und meinen Webbrowsern zu tun.

Aber irgend jemand wird hoffentlich noch den Stein der Weisen finden.

Oliver

[pmmueller]

Benutzt du das CSS-Framework von Contao?

<figure> kennen die Browser nicht, genau wie die anderen neuen HTML5-Elemente. Browser stellen das dann als Inline-Element dar, und die Browser werden durch das CSS-Framework mit display:block dazu gebracht, diese Elemente als Block-Elemente darzustellen.

Es hängt bei dir ziemlich sicher nicht mit dem Element figure an sich zusammen, sondern eher mit der Formatierung dafür. Aber ohne einen Link zur entsprechenden Seite kann man da nur mutmassen...

Zeigen deine Browser denn die Beispielsite richtig an? Da sind auch jede Menge figure-Elemente drin, zum Beispiel auf dieser Seite:
http://c3beispielsite.websites-erste...nd-bilder.html

[Ad libitum]

Guten Morgen Peter,

ja, ich nutze das Framework von Contao - hab alle Schritte aus Deinem Buch der Reihe nach durchgemacht und bis zu diesem Punkt hat alles funktioniert.

Allerdings muss ich gestehen, dass ich mir nicht 100% sicher bin, ob ich das wirklich nutze. Bin noch absolut unerfahren im Hinblick auf Contao. Wo muss ich denn welches Häkchen wie setzen?

Einen Link kann ich Dir leider nicht mailen, weil ich das alles bisher auf meinem lokalen (XAMPP)-Server laufen hab.

Und die Seiten aus Deinem Link werden, soweit ich das beurteilen kann, korrekt dargestellt. Zumindest steht das Bild des Flusses mit abgerundeten Ecken links neben dem Text und wird von Text umflossen.

Danke für Deine Hilfe und einen schönen Tag
Oliver

[Ad libitum]

Hallo Peter,

ich hab mir den erzeugten Quelltext von meiner und Deiner Seite jetzt nochmal angeschaut - er ist identisch. Mal von den Dateinamen der Bilder abgesehen:
<figure class="image_container float_left" style="padding-right:20px; float:left;">
<a href="files/beispielsite/content/fotos/blumen.jpg" data-lightbox="083c5a">
<img src="assets/images/4/blumen-c6f3ad64.jpg" width="100" height="67" alt="Das Bächlein Duden">
</a>
</figure>

Wenn ich allerdings in der Quelltextanzeige unter FireFox auf den Link mit dem Bild klicke, bekomme ich die Meldung "Page not found" und der angezeigte Link dazu lautet: http://192.168.0.11/contao/index.php...tos/blumen.jpg. Und da scheint mir bei index.php der Hase im Pfeffer zu liegen. Das ist doch wahrscheinlich ziemlich falsch, oder?? In Deinem Quelltext dagegen seh ich das Bild und der Pfad lautet OHNE index.php. Warum steht der Teil bei mir mit drin und wie krieg ich den wieder weg?

Danke und liebe Grüße
Oliver

[pmmueller]

Eine falsche URL könnte natürlich ein Grund sein, dass das Bild nicht gefunden wird, und das ist wahrscheinlicher als Probleme mit <figure>.

Die URL-Umschreibung (mit oder ohne index.php dazwischen) wird in Kapitel 20 ab Seite 529 ausführlich beschrieben.

[Ad libitum]

Hallo Peter,

ich hab jetzt die Umstellung gemäß Buch durchgeführt und ich kann, ausgehend vom angezeigten Quelltext, die Grafik durch Klick anzeigen lassen - das index.php im Pfad ist weg.

ABER: im Frontend wird die Grafik nach wie vor nicht angezeigt.

Zudem verwirrt mich, warum nur Grafiken nicht angezeigt werden, die mit <figure> konfiguriert sind. Wenn das mit dem index.php das Problem wäre, dann müsste das doch bei jeder Grafik passieren oder nicht?

Noch ne Idee??

Oliver

[pmmueller]

In Contao in der Systemwartung die "Datein bereinigen".
Browsercache löschen.
Die Seite im Browser mit gedrückter Shift-Taste aktualisieren lassen.
Oder mal im Browser-Analysetool (Firebug o.ä.) das CSS für <figure> anzeigen lassen.
<figure> selbst ist ziemlich sicher nicht dein Problem.

[Ad libitum]

hilft alles nix - es ist zum Verzweifeln.

Der CSS-Code:
im HTML: style="padding-right:20px; float:left;"

In der CSS-Datei:
.image_container {
padding-left: 800px;
padding-top: 5px;
}

Dann wird noch die Klasse float_left zugewiesen, aber die taucht in den CSS nirgendwo auf.

Das spuckt mir das Untersuchungstool von Opera aus. Ist meiner Ansicht nach übrigens erheblich besser als der Firebug.

[pmmueller]

hilft alles nix - es ist zum Verzweifeln.

Der CSS-Code:
im HTML: style="padding-right:20px; float:left;"

In der CSS-Datei:
.image_container {
padding-left: 800px;
padding-top: 5px;
}

Das linke padding erscheint mir mit 800px ein bisschen sehr groß. De-aktiviere diese Deklaration in deinem Analyse-Tool einfach einmal.. Würde mich nicht wundern, wenn du dann auch ein Bild siehst.

[Ad libitum]

sch...... ist das peinlich

die 800 waren ein wenig zu viel des Guten und vor lauter Wald hab ich den Baum nicht gefunden.

Heureka, das Problem ist gelöst.

Herzlichen Dank
Oliver

[pmmueller]

sch...... ist das peinlich

Shit happens