nicht angemeldet
Alles auf der Webseite ist verlinkt
TS
MudGuard
Julius
Matthias Apsel
JürgenB
Gunnar BittersmannHallo 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!
-
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
-
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-
Vielen Dank! Ich seh vor lauter Code schon nichts mehr 😂
-
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
-
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 -
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
-
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="stylesheetist auch schnell eingefügt - nimm nicht für alles Überschriften erster Ordnung, „E-Mail“ ist garantiert kein
h1wert... Du solltest mit den Überschriften eine hierarchische Dokumentstruktur abbilden:
h1 - Grafikdesign Roselinde h2 - Leistungen h3 - Print h3 - Web h2 - Kontakt h3 - E-Mail h3 - AnschriftAußerdem ist das Zitat „Details sind nicht einfach Details, sie machen das Design.“ keine Überschrift, sondern will ein
blockquotesein – 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-
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:
- HTML/Textstrukturierung/Überschrift – Überschriften richtig einsetzen
- HTML/Regeln/Guter HTML-Stil – Semantisch sinnvoller Code
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)-
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-
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
-
- Sprachkennzeichnung (
-
-
-
-
-
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-
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
-
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-
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
-
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)-
Hallo Julius,
ja, das ist ein schöner Effekt. Aber bei grafikroses Seite ist der Hintergrund dafür mMn zu unruhig.
Gruß
Jürgen-
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)
-
-
Stimmt, das hatte ich mir angesehen. Hat mir leider so gar nicht gefallen ehrlich gesagt. Drum muss es jetzt eben so bleiben 😟
-
@@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-
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.
-
@@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ürheader::beforeanzupassen. (Das ist das Ding, was mitposition: fixedoben 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 auchdocument.querySelector('nav')getan, aber es könnte ja mehrerenav-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. Dasstyle-Element wird gebraucht, um die Regel für die Höhe desheader::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 dasstyle-Element geschrieben. Damit hat dasheader::before-Pseudoelement (das für den Hintergrund sorgt) genau die Höhe desnav-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
-
-
-
-
@@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-
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
-
-
-
-