Alles auf der Webseite ist verlinkt
grafikrose
- css
- links
0 TS0 MudGuard1 JürgenB- css
- design
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!
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.
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.
<html lang="de">
) ist wichtig und schnell eingefügtamento,Sansita"rel="stylesheet
ist auch schnell eingefügth1
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
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
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
Hallo,
auf die HTML-Fehler wurdest du ja schon hingewiesen. Ich habe noch zwei Design-Probleme anzumerken:
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.
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
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
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 🖖
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ü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 🖖
@@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 🖖
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