grafikrose: Alles auf der Webseite ist verlinkt

problematische Seite

Hallo zusammen!

Ich sitze mal wieder Projektarbeit (Am Montag ist zum Glück Abgabe). Ich habe festgestellt, dass die komplette Webseite verlinkt ist und finde den Fehler einfach nicht. Ich dachte es liegt daran, dass ich in der CSS Datei folgendes angegeben habe:

background: url("../img/slider/rose.jpg")

wenn ich das Bild entferne ist es jedoch noch genau so. Ich weiß einfach nicht waaaarum 😟

Vielen Dank schon mal für die Hilfe!

  1. problematische Seite

    Hello,

    Ich sitze mal wieder Projektarbeit (Am Montag ist zum Glück Abgabe). Ich habe festgestellt, dass die komplette Webseite verlinkt ist und finde den Fehler einfach nicht. Ich dachte es liegt daran, dass ich in der CSS Datei folgendes angegeben habe:

    background: url("../img/slider/rose.jpg")

    Der Fehler ist in Zeile 38. Da ist der Anker (<a ) nicht wieder geschlossen worden.

    Liebe Grüße
    Tom S.

    --
    Die Krawatte ist das Kopftuch des Westens
  2. problematische Seite

    Hi,

    Ich habe festgestellt, dass die komplette Webseite verlinkt ist und finde den Fehler einfach nicht. Ich dachte es liegt daran, dass ich in der CSS Datei folgendes angegeben habe:

    background: url("../img/slider/rose.jpg")

    Ob ein Hintergrundbild vorhanden ist, beeinflußt nicht eine Verlinkung …

    <li><a href="#projekte">PROJEKTE</li>

    Du solltest die Links nicht nur öffnen, sondern auch schließen.

    Andere Elemente auch (da fehlt mind. noch ein </ul>) …

    cu,
    Andreas a/k/a MudGuard

    1. problematische Seite

      Vielen Dank! Ich seh vor lauter Code schon nichts mehr 😂

      1. problematische Seite

        Hallo

        Grade wenn du noch nicht so sattelfest bist solltest du deinen Quelltext immer wieder mit einem Validator prüfen und die Fehler beheben. In deinem Fall weigert sich der Validator sogar die Seite bis zum Ende zu prüfen, weil er die Struktur nicht mehr erkennen kann:

        Cannot recover after last error. Any further errors will be ignored.

        Siehe

        https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.graphicmonkeyz.com%2Froselinde%2Findex.html

        Gruss

        MrMurphy

        1. problematische Seite

          Hi,

          Grade wenn du noch nicht so sattelfest bist solltest du deinen Quelltext immer wieder mit einem Validator prüfen und die Fehler beheben. In deinem Fall weigert sich der Validator sogar die Seite bis zum Ende zu prüfen, weil er die Struktur nicht mehr erkennen kann:

          Cannot recover after last error. Any further errors will be ignored.

          schon ein Blick in den Quelltext im Firefox zeigt viele der Fehler - immer da, wo's rot wird …

          cu,
          Andreas a/k/a MudGuard

        2. problematische Seite

          Danke für den Hinweis, ich habe den Validator irgendwie verdrängt :-) Jetzt sind schon mal die Error-Fehlermeldungen behoben... die "Warnungen" muss ich nicht ändern oder? Sinnvoll wäre es mit Sicherheit, aber er meckert über Dinge wie Überschriften-Kennzeichnung etc.... ich hab grad andere Sorgen :-D

          1. problematische Seite

            Hallo grafikrose,

            Sinnvoll wäre es mit Sicherheit, aber er meckert über Dinge wie Überschriften-Kennzeichnung etc.... ich hab grad andere Sorgen :-D

            Machs einfach. Dann weißt du, was du nicht machen darfst und machst direkt beim Schreiben des HTML diese Fehler nicht mehr. Außerdem hast du dadurch mehr Übersicht im Validator.

            • Sprachkennzeichnung (<html lang="de">) ist wichtig und schnell eingefügt
            • ein Leerzeichen zwischen den Attributen amento,Sansita"rel="stylesheet ist auch schnell eingefügt
            • nimm nicht für alles Überschriften erster Ordnung, „E-Mail“ ist garantiert kein h1 wert... Du solltest mit den Überschriften eine hierarchische Dokumentstruktur abbilden:
            h1 - Grafikdesign Roselinde
              h2 - Leistungen
                h3 - Print
                h3 - Web
              h2 - Kontakt
                h3 - E-Mail
                h3 - Anschrift
            

            Außerdem ist das Zitat „Details sind nicht einfach Details, sie machen das Design.“ keine Überschrift, sondern will ein blockquote sein – wenn du es groß, fett und nicht eingerückt haben willst, mach das mit CSS.

            Es kann nicht zu oft gesagt werden: HTML bestimmt, was etwas ist (Überschrift, Zitat, Liste, Link) und CSS bestimmt, wie es aussieht.

            Gruß
            Julius

            --
            „Unterschätze niemals die Datenübertragungsrate eines mit Bändern vollgeladenen Kombis, der über die Autobahn rast.“
            Andrew S. Tanenbaum
            1. Hallo Julius,

              Es kann nicht zu oft gesagt werden: HTML bestimmt, was etwas ist (Überschrift, Zitat, Liste, Link) und CSS bestimmt, wie es aussieht.

              Ich habe das mal an den relevanten Stellen im Wiki nachgetragen:

              Es gibt bestimmt noch andere Stellen, an denen man etwas so Wichtiges betonen sollte.

              Gruß
              Julius

              --
              „Unterschätze niemals die Datenübertragungsrate eines mit Bändern vollgeladenen Kombis, der über die Autobahn rast.“
              Andrew S. Tanenbaum (Quelle)
              1. Hallo Julius,

                Es gibt bestimmt noch andere Stellen, an denen man etwas so Wichtiges betonen sollte.

                Das ist sogar so wichtig, dass es einen eigenen Artikel verdient hätte. Etwa https://wiki.selfhtml.org/wiki/HTML/Semantik.

                Bis demnächst
                Matthias

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. Hallo Matthias,

                  Es gibt bestimmt noch andere Stellen, an denen man etwas so Wichtiges betonen sollte.

                  Das ist sogar so wichtig, dass es einen eigenen Artikel verdient hätte. Etwa https://wiki.selfhtml.org/wiki/HTML/Semantik.

                  Erledigt: Ich habe den betreffenden Glossar-Eintrag auf das Wesentliche reduziert und HTML/Semantik angelegt.

                  @marctrix @Gunnar Bittersmann könnt ihr bitte checken, ob ich nicht vielleicht stellenweise Unfug geschrieben habe?

                  Gruß
                  Julius

  3. problematische Seite

    Hallo,

    auf die HTML-Fehler wurdest du ja schon hingewiesen. Ich habe noch zwei Design-Probleme anzumerken:

    • Die fixe Navigation liegt beim Scrollen im Text.
    • Das Schriftbild und die Schriftgröße haben verhindert, das ich irgendetwas auf der Seite lesen konnte bzw. wollte.

    Gruß
    Jürgen

    1. problematische Seite

      Das mit der Nav wollte ich ursprünglich anders lösen, ich bin in Javascript leider nicht so fit, hatten dies nur in einer Unterrichtseinheit, und ich blicke noch nicht ganz durch. Sie sollte eigentlich nach dem man über das dunkle Bild gescrollt hat einen Hintergrund in weiß mit einer Opacity haben, aber wie gesagt…

      Das mit dem Schriftbild: Was meinst du genau? Die Schriftart des Fließtext?

      Gruß Grafikrose

      1. problematische Seite

        Hallo

        zur Navigationsleiste habe ich auch rechte keine Idee. Eigentlich finde ich die fixe Navileiste gut, aber sobald das Bild darunter weg gescrollt ist, müsste der Hintergrund auf weiß und die Schrift auf dunkel geschaltet werden.

        Zum Schriftbild: die Schrift im Fließtext ist mir zu klein. Die geringe Größe in Verbindung mit der schnörkeligen Schrift machen den Text für ich fast unlesbar.

        Gruß
        Jürgen

        1. problematische Seite

          Hello,

          Zum Schriftbild: die Schrift im Fließtext ist mir zu klein. Die geringe Größe in Verbindung mit der schnörkeligen Schrift machen den Text für ich fast unlesbar.

          Es ist mir gerade aufgefallen, dass did Schriften auf allen meinen Clients vollkommen unterschiedlich aussehen. Da müssten dann vielleicht noch Webfonts im CSS angegeben wetden?

          Liebe Grüße
          Tom S.

          --
          Die Krawatte ist das Kopftuch des Westens
        2. problematische Seite

          Hallo Jürgen, @grafikrose

          zur Navigationsleiste habe ich auch rechte keine Idee.

          Gunnar hatte mal ein Beispiel gebaut, ich weiß allerdings nicht mehr in welchem Zusammenhang. Ich finde den Effekt des beim Runterscrollen in die Navigationsleiste aufgehenden Bildes schön.

          Gruß
          Julius

          --
          „Unterschätze niemals die Datenübertragungsrate eines mit Bändern vollgeladenen Kombis, der über die Autobahn rast.“
          Andrew S. Tanenbaum (Quelle)
          1. problematische Seite

            Hallo Julius,

            ja, das ist ein schöner Effekt. Aber bei grafikroses Seite ist der Hintergrund dafür mMn zu unruhig.

            Gruß
            Jürgen

            1. problematische Seite

              Hallo Jürgen,

              ja, das ist ein schöner Effekt. Aber bei grafikroses Seite ist der Hintergrund dafür mMn zu unruhig.

              Stimmt, dann doch lieber ein dunkles Blau aus dem Bild der Rose?

              Gruß
              Julius

              --
              „Unterschätze niemals die Datenübertragungsrate eines mit Bändern vollgeladenen Kombis, der über die Autobahn rast.“
              Andrew S. Tanenbaum (Quelle)
          2. problematische Seite

            Stimmt, das hatte ich mir angesehen. Hat mir leider so gar nicht gefallen ehrlich gesagt. Drum muss es jetzt eben so bleiben 😟

            1. problematische Seite

              @@grafikrose

              Stimmt, das hatte ich mir angesehen. Hat mir leider so gar nicht gefallen ehrlich gesagt.

              Kannst du das näher begründen? Warum nicht?

              Ich hatte der Navigation nach dem Scrollen nochmal das hero image als Hintergrund verpasst. Wenn du einen einfarbigen Hintergrund willst, ist das schnell angepasst.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. problematische Seite

                Hallo Gunnar!

                Ich hätte gerne eine Navleiste bei der sich der Hintergrund einfach verfärbt (wie du schon vermutet hast). Anpassen wäre mit Sicherheit keine große Sache :-D... aus "eurer" Sicht, sag ich mal.

                Ich habe zwei Javascript-Funktionen eingebaut, die max 5-zeilig sind - hier verstehe ich noch was passiert und was ich wie anpassen muss! Bei den 12 Zeilen blicke ich leider nicht mehr so ganz durch was was ist und warum. Ich möchte nicht einfach etwas kopieren und dann nicht wissen was da los ist - ist ja meine Projektarbeit die ich dann auch erklären und präsentieren muss. 👀

                Grüße R.

                1. problematische Seite

                  @@grafikrose

                  Ich hätte gerne eine Navleiste bei der sich der Hintergrund einfach verfärbt (wie du schon vermutet hast). Anpassen wäre mit Sicherheit keine große Sache :-D... aus "eurer" Sicht, sag ich mal.

                  Das Einzige, was zu tun war, war die background-Eigenschaft für header::before anzupassen. (Das ist das Ding, was mit position: fixed oben an der Bildschirmkante klebt.) Wie gezeigt.

                  Ich habe zwei Javascript-Funktionen eingebaut, die max 5-zeilig sind - hier verstehe ich noch was passiert und was ich wie anpassen muss! Bei den 12 Zeilen blicke ich leider nicht mehr so ganz durch was was ist und warum.

                  12 Zeilen JavaScript entmystifiziert:

                  window.addEventListener('load', updateHeaderNavHeight);
                  window.addEventListener('resize', updateHeaderNavHeight);
                  

                  Registriert Eventhandler; sorgt dafür dass nach dem Laden der Seite (samt Bildern etc.) sowie bei jeder Änderung der Vieportgröße (wozu auch das Drehen des Smartphones/Tablets zählt) die Funktion updateHeaderNavHeight() aufgerufen wird.

                  var headerNavElement = document.querySelector('body > header > nav');
                  

                  Speichert die Referenz auf das nav-Element in einer Variablen. Es hätte hier vielleicht auch document.querySelector('nav') getan, aber es könnte ja mehrere nav-Elemente auf der Seite geben und es soll nur das im Seitenheader selektiert werden.

                  var headerNavStyleElement = document.createElement('style');
                  document.head.appendChild(headerNavStyleElement);
                  

                  Erzeugt ein style-Element und hängt es ins DOM. Das style-Element wird gebraucht, um die Regel für die Höhe des header::before-Pseudoelements darin unterzubringen.

                  function updateHeaderNavHeight()
                  {
                  	headerNavStyleElement.innerText = 'header::before { height:'
                  		+ headerNavElement.offsetHeight
                  		+ 'px }';
                  }
                  

                  Hier passiert die Magie: Bei jedem Funktionsaufruf (wir erinnern uns: nach dem Laden der Seite sowie bei jeder Änderung der Vieportgröße) wird die Höhe des nav-Elements ausgelesen. Wozu das Ganze? Nun, die Höhe kennt man ja vorher nicht. Man weiß ja bspw. nicht, ob alle Navigationspunkte beim Nutzer in eine Zeile passen; und das kann sich ja bei Änderung der Vieportgröße ändern.

                  Sei die Höhe bspw. 42 (Pixel). Das wird nun eingesetzt und header::before { height: 42px } in das style-Element geschrieben. Damit hat das header::before-Pseudoelement (das für den Hintergrund sorgt) genau die Höhe des nav-Elements.

                  Ich möchte nicht einfach etwas kopieren und dann nicht wissen was da los ist - ist ja meine Projektarbeit die ich dann auch erklären und präsentieren muss. 👀

                  Das ist löblich. Konnte ich helfen?

                  LLAP 🖖

                  --
                  “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          3. problematische Seite

            @@Julius

            Gunnar hatte mal ein Beispiel gebaut, ich weiß allerdings nicht mehr in welchem Zusammenhang.

            Der Zusammenhang ist Navileiste soll sich beim scrollen verfärben.

            Der Zusammenhang sollte eigentlich in der linken unteren Ecke sichtbar sein – in Form eines Links zum betreffenden Posting, wie bei so ziemlich allen CodePens, die ich fürs hiesige oder für andere Dinge erstelle.

            Dazu hatte ich mal ein kleines Script erstellt. Ich hab gerade mit Erschrecken festgestellt, dass es das gerade nicht mehr tut. Ein Blick ins Entwicklertool zeigt ein von CodePen einbebundenes Script //production-assets.codepen.io/assets/common/stopExecutionOnTimeout-<kryptische ID>.js – Hm, und eben ging’s gerade mal wieder. Bummelt mein Server da etwas rum und CodePen hat keine Geduld? Vielleicht sollte ich das Script auf codepen.io packen anstatt von meiner Domain einzubinden?

            @Matthias Apsel: Du verwendest das Script doch auch, oder? Von meinem Server oder hast du es kopiert? Hast du das Problem auch?

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. problematische Seite

              Hallo Gunnar Bittersmann,

              @Matthias Apsel: Du verwendest das Script doch auch, oder? Von meinem Server oder hast du es kopiert? Hast du das Problem auch?

              Ja, von deinem Server. Mir sind noch keine Unregelmäßigkeiten aufgefallen, allerdings bin ich auch nicht wirklich regelmäßig auf CodePen unterwegs und schaue mir meine Pens an.

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.