ein Projekt nach Prioritäten sortieren

[HTML_go]

Hallo nochmal Matthias!

Aber leider komme ich derzeit nicht weiter. Es sind nun mehrere Baustellen.

Sortiere, was (dir) am Wichtigsten ist!

Das hast Du ja schon recht gut gemacht, Matthias! Aber so in etwa hätte ich die Reihenfolge auch gesetzt.

Und nochmal meine Frage: Ist es nicht sinnvoll, die einzelnen Themen in neue Threats zu verlagern?

Prinzipiell ja, bzw du kannst den Betreff oben ändern.

O.k.; für die Zukunft …

1. HTML

3. Seite für Blinde und / oder Nicht-Mausnutzer optimieren. Das wurde ja auch schon mehrfach angesprochen, aber ist das jetzt auch schon alles von mir umgesetzt (ich habe online bislang nur auf der index.html gearbeitet; die anderen Seiten überarbeite ich erst, wenn ich verstanden habe, was zu machen ist)? Ich habe da so meine Zweifel …

Was hast du jetzt nach 4 Wochen?

Lade Deine index.html auf einen Server und lass sie vom Validator überprüfen!

Wenn sie keine Fehler ausweist, alles gut!

Na ja, Fehler weist im HTML die index-Seite keine auf, auch das CSS passiert die Prüfung mit diesem Tool https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.kontakt-vs.de&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=de anstandslos.

Die index.html und die standard.css sind online …

Doch gerade auf der Startseite

https://www.kontakt-vs.de/index.html

habe ich ja diese Änderung in der Anzeige (abweichend von den anderen Seiten wie .../vorstellung.html, .../kinder.html, .../jugend.html, .../kontakt.html und .../impressum.html):

1. Navigationsleiste ist außen eingerückt
2. oben links über dem Banner sieht man den Link https://kontakt-vs.de/#main

Da die fragliche Seite https://www.kontakt-vs.de/index.html online ist, könnt Ihr Euch mit F12 (Firefox-Seiteninspektor) einen eigenen Überblick verschaffen; alle anderen Seiten weichen in der Navigationsbar von der Startseite ab und haben auch diesen Link links oberhalb des Banners nicht …

Das rührt von einer Änderung im HTML-Code der index.html her, welche ich auf den anderen Seiten noch nicht umgesetzt habe.

Eigentlich sollte diese Änderung im HTML-Code Nutzern von Screenreadern oder Leuten, welche mit Tastatur navigieren, die Navigation erleichtern. Aber irgendwas stimmt noch nicht.

Der fragliche Code (nach dem "</header>") ist dieser:

    <main id="main" tabindex="-1">
    <nav>
      <ul>
        <li aria-current="page"><a href="#main">Startseite</a></li>
        <!--der Link für diese aktive Seite wird  "deaktiviert" und kann nicht mehr angeklickt werden-->
        <li><a href="./vorstellung.html">Über uns</a></li>
        <li><a href="./kinder.html">Arbeit mit Kindern</a></li>
        <li><a href="./jugend.html">Arbeit mit Jugendlichen</a></li>
        <li><a href="./kontaktaufnahme.html">Kontakt</a></li>
        <li><a href="./impressum.html">Impressum</a></li>
      </ul>
    </nav>
    <main id="main">

Den hatte ich auf Anraten Gunnars (oder Rolfs?) eingebaut (wenn ich mich nicht irre - es ist so schwierig, die ganzen Threads zu durchsuchen, bis man den korrekten gefunden hat).

Und dann (in obigem Codeauszug nicht vollständig abgebildet (siehe aber Bildschirmfoto unten!) ist wohl auch noch ein Fehler, der aber im HTML-Validator auch nicht angezeigt wird, oder ich kapiere den HTML-Code nicht.

Es geht um das Öffnen des Main-Tags; einmal in der Zeile 124 (Bildschirmfoto unten) der

    <main id="main" tabindex="-1">

dann (der mir richtig erscheinende) öffnende Main-Tag in Zeile 136 (Bildschirmfoto unten)

    <main id="main">

und endlich um den schließenden Main-Tag in Zeile 159 (Bildschirmfoto unten)

    </main>

Muss der Tag aus Zeile 124 nicht auch geschlossen werden?

Jetzt schnell die anderen Seiten!

Da scheint es nur die <br />zu geben, die ein </p><p>sein wollen.

Ja, da möchte ich noch dran. Da ich aber dann auch gleich die Änderungen für die Sreenreader- und Tastatur-Navigation einbauen möchte (was ja mit den oben erwähnten Punkten 1. und 2. in der Online-Version der index.html noch nicht funktioniert), warte ich noch, bis das erste Problem gelöst ist.

Ein Beispiel für ein Impressum findest du hier: HTML/Tutorials/Textauszeichnung#Kontaktseite

Ja, das schaue ich mir auch noch mal an! Eine Telefonnummer haben wir nicht, da - jetzt auch neu und vermutlich nicht von Dauer - das Telefon nur einmal per Woche besetzt ist; wir bitten um schriftlichen Kontakt per Mail(Formular). Gerade um die Mailadresse vor Missbrauch (Spam, etc.) zu schützen möchte ich da nochmal ran.

2. CSS

Sieht Deine Seite ungefähr so aus, wie du willst? Dann kannst du jetzt starten.

Nun ja, ist ja auch schon online. Das CSS scheint ja o.k. zu sein. 👍 Nur halt die oben beschriebenen Probleme der index.html (die ich noch nicht auf die restlichen Seiten übertragen habe) stören noch. Und evtl. oben beschriebenes Problem (Bildschirmfoto oben) mit dem <main>.

Ich würde das Oliv in der Navigation ändern,

Ja, gefällt mir auch noch nicht, war aber bislang unwichtig …

Wie finde ich aber einen zum schwarzen Navigationsleiten-Hintergrund, der weißen Schrift und dem türkisfarbenen Schriftzug im Banner einen harmonierenden Farbton (ich weiß, es gibt Farbtontabellen (wurde auch schon ein Link gezeigt in einer der Antworten). Aber wie bei der Grafik habe ich auch hier keine Ahnung, wie das ermittelt wird (auch wenn ich ein Werkzeug - Link - habe).

Auch hier bin ich für Hilfestellung dankbar!

Wo ich es im CSS ändern muss finde ich vermutlich selbst heraus; es geht tatsächlich um den passenden Farbton.

aber sonst? …

Herzliche Grüße

Matthias Scharwies