Feedback zur Überarbeitung meiner Homepage

[eloms]

Hallo

Lightbox ist erstellt, hatte aber Probleme das kleine Bild in die Mitte zu bekommen.

#ud_gallery {
width: 90%;
margin-top: 5px;
display: flex;
justify-content: center;
} 

habe dann hier widht von 100% auf 90% gesetz und die letzten beiden Positionen eingefügt.
Wenn man den Quelltext der CSS Online aufruft, sind Umlaute falsch geschrieben. Ist das normal?

Und es gibt noch eine Warnung.

Wünsche noch einen schönen Sonntag

mfg
Michael

[Sempervivum]

Hallo Michael, das ist ein wenig viel an Containern an der Stelle. Ich habe mal einen entfernt:

<section id="ud_gallery">
    <a href="#tag">
        <img src="wetter/cam/thumb/t_cam.jpg" alt="Bild Tag klein">
    </a>
</section>

und das Margin für #ud_gallery so geändert:

        #ud_gallery {
            width: 90%;
            /* margin-top: 5px; */
            display: flex;
            justify-content: center;
            margin: 5px auto 0 auto;
        }

dann funktioniert es mit der Zentrierung.
Allerdings muss man den Text in der Überschrift auch noch zentrieren:

h3 {
    text-align: center;
}

[eloms]

Hallo
Ich habe das mal geändert, aber keine Änderung der Fehlermeldung.
Wenn ich das richtig verstehe, aus Übersetzung, fehlt entweder ein <h> oder ein <div>.
mfg
Michael

[Sempervivum]

Meine Vorschläge aus Posting Nr. 17 bezogen sich auf die Zentrierung des kleinen Bildes und die scheint jetzt OK zu sein.

Du meinst sicher diesen Fehler aus der Validierung:

Section lacks heading. Consider using h2-h6 elements

Das bedeutet, dass in einem section-Tag eine Überschrift erwartet wird. Das wäre kein Problem, die Überschrift ist ja da:
<h3>Aktuelles Bild</h3>
Du brauchst sie nur in das section-Tag zu verschieben.

[eloms]

Hallo
Ja, das meinte ich.
Das mit <h3> habe ich schon getestet, dann muss ich es noch nichtig setzen, ist sonst links neben dem Bild.
mfg
Michael

[eloms]

Hallo

Ich habe die Seite mal in einen anderen Ordner gelegt. Wird sonst zu schwierig diese in eine bestehende Seite einzufügen.
( Test beendet )
Alle Link's sind Aktiv aber nicht Aktuell.

Für die Sprungmarke habe ich noch nicht die Richtige Einstellung (Position im Quelltext ) gefunden.
Der Footer rutscht etwas nach unten. Ist zwar nicht schlimm, geht aber vielleicht besser.

Bei einigen Seiten Wechel "wackelt" die Seite etwas rechts / links.
Ist zwar auch nicht schlimm, geht aber vielleicht besser.

Gibt es sonst noch etwas Positives oder Negatives?

Nachtrag:
Auf der Seite, Wetter Aktuell, ist eine iframe das Valid probleme hat.
Ich habe schon einiges mit CSS probiert, aber nichts hat Funktioniert.
Java möchte ich nicht einsetzen.

mfg
Michael

[eloms]

Hallo

Web Cam Archiv angepasst.

mfg
Michael

[Sempervivum]

Im Webcam-Archiv könnten statt der p-Tags figure-Tags besser geeignet sein.
Du schreibst, dass es angepasst wurde, ich sehe da jedoch nur die Platzhalter mit den Smilies?

Was den iFrame auf "Wetter aktuell" betrifft, sehe ich dazu keine Validierungsfehler. Hast Du das Problem inzwischen gelöst?

[eloms]

Hallo

Beim Web Cam Archiv Bitte einen Aktiven Monat aus 2022 aus der Navigatin auswählen. Sind nur zum Test ein Paar Bilder Online.
Beim Wetter Aktuell im iFrame wird ja die Original Datei eingefügt.
Wenn man diese separat prüft sind viele Fehler, aber darauf habe ich keinen Einfluss.

Kannst Du bei meinem Eintrag in PHP vielleicht helfen?

mfg
Michael

[Sempervivum]

OK, hab's gefunden, war wohl vorhin im falschen Monat.
PHP sehe ich mir jetzt an.

[eloms]

Hallo

Neue Seite jetzt Online.

Vielen Dank für die Hilfe.

Noch eine Frage, ist es ok wenn man 2 stylesheet einfügt, oder sollte man beide zusammen fassen?

mfg
Michael

[Sempervivum]

ist es ok wenn man 2 stylesheet einfügt, oder sollte man beide zusammen fassen?

Es ist nicht nur OK sondern es kann auch sinnvoll sein, um die Sache zu strukturieren, z. B. wenn Du auf der einen Seite Styles hast, die überall gelten sollen und auf der anderen solche, die nur für eine Seite gelten.

[eloms]

Hallo

Ok, Danke
Es gibt für die Navigation im Archiv oben einen eigenen stylesheet, deshalb die Frage.

mfg
Michael

[Sempervivum]

Ich empfehle gern Fancybox wenn es um Lightboxes geht, vor allem weil es Touch-Bedienung unterstützt. Allerdings weiß ich nicht, ob das für dich relevant ist, weil Du anscheinend nur ein einziges Bild anzeigen willst, so dass kein Wischen nötig ist?
Version 4 scheint die neueste zu sein:
https://fancyapps.com/docs/ui/fancybox/
Beim Einbinden erwarte ich keine Probleme.

Öffnen nur durch Lupe würde ich nicht empfehlen weil die meisten daran gewöhnt sind, dass man ein Thumbmail durch Klick darauf vergrößern kann. Text kann für ungeübte Benutzer vielleicht nicht schaden.

wie bekommt man das große Bild bei kleinem Browser Fenster mit Abstand rechts und links?

Ab Zeile 33 in style-station.css findest Du dieses CSS:

.station-lightbox img {
    margin-bottom: 5px;
    width: 100%;
    height: auto;
    max-width: 1024px; /*max-height: 768px;*/
    margin-top: 2%;
}

Wenn Du width auf z. B. 80% verringerst, erreichst Du, was Du wünschst.

[eloms]

Hallo
Danke für die schnelle Hilfe

Das habe ich wohl nicht probiert oder übersehen, aber Funktioniert.
Fancyapps scheint für mich nicht zu passen und sieht auch schwierig aus.

So langsam muss man mit dem stylesheet aufpassen sonst wird es unübersichtlich.
Wenn die Seite "fertig" ist, werde ich wohl etwas aufräumen müssen.

mfg
Michael