Problem mit Script

[thementholist]

Hey Leute!

Ich habe ein Pop-Up Menu erstellt mit Icons die mit dem hover effect ausgestattet sind. Das Problem is nur: Ich sollte ne One Page Seite machen und sobald ich ein html tag in die CSS einfüge und der dann einen height wert von 100% gebe, geht der hover effekt verloren.

Ich bin erst Anfänger aber was bitte hat die Größe der Seiten mit dem hover effekt zu tun?

Der Code: https://codepen.io/thementholist/pen/pBYWbV

LG TM

[Rolf B]

Hallo thementholist,

Links setzt man in <spitze Klammern>, dann sind sie auch klickbar. Ich habe das bei Dir geändert.

Rolf

[Felix Riesterer]

Lieber thementholist,

es hat überhaupt keinen Sinn Dir zu helfen, weil Du nie wieder in Deinen ursprünglichen Thread schaust, sondern zu jedem neuen Fitzelchen an Unklarheit einen neuen startest. Du wurdest bereits darauf hingewiesen, dass Du bitte in Deinem ursprünglichen Thread bleiben sollst.

Liebe Grüße,

Felix Riesterer.

[Rolf B]

Hallo Felix,

ich bin gespannt, ob diesmal ein Dialog zu Stande kommt oder der Thread wieder verwaist...

Rolf

[thementholist]

Ich habe erwähnt das ich gerade mal vor ner Woche angefangen habe. Bringt mir nichts wenn Profis sich unter meinem Thread über die Struktur der Webseite mit komplizierten Begriffen darüber diskutieren die mir (wie man sich vorstellen kann) sowieso überhaupt nichts sagen. Ich habe versucht mitzukommen aber mein Kopf ist dabei durchgebrannt daher habe ich das so stehen lassen. Diesmal bitte in einer Sprache die Jemand verstehen kann der gerade neu damit begonnen hat.

[dedlfix]

Tach!

Bringt mir nichts wenn Profis sich unter meinem Thread über die Struktur der Webseite mit komplizierten Begriffen darüber diskutieren die mir (wie man sich vorstellen kann) sowieso überhaupt nichts sagen. Ich habe versucht mitzukommen aber mein Kopf ist dabei durchgebrannt daher habe ich das so stehen lassen.

Es ist dann an dir, ein wenig steuernd ins Geschehen einzugreifen. Nicht in dem Sinne, die andere Diskussion abzuwürgen, sondern wieder mehr Augenmerk auf deine Sache zu lenken. Dabei darf man durchaus auch mal nachfragen, wenn man etwas nicht versteht. Aus einer Nichtantwort kann man nämlich nicht entnehmen, aus welchen Gründen sie unterblieb.

Diesmal bitte in einer Sprache die Jemand verstehen kann der gerade neu damit begonnen hat.

Wir wissen nicht, welche du bereits kennst und welche nicht, und du wirst die Fachbegriffe lernen müssen. Fachbegriffe sind da, damit man effizient und meist auch effektiv kommunizieren kann. Auf Begriffe zu verzichten, die eventuell nicht verstanden werden könnten, macht die Kommunikation umständlich. Deshalb bitte nachlesen und nachfragen, wir erklären es dann.

dedlfix.

[Rolf B]

Hallo thementholist,

zuerst mal ein paar Hinweise.

1. es wird sicherlich daran liegen, dass Du deine Seite einfach in den Pen kopiert hast - aber normalerweise setzt man JavaScript in den Script-Bereich des CodePen. Aber es funktioniert ja auch so.

2. zu deinen Menütexten: HOME, SERVICE, und so weiter. Falls Du die Seite irgendwann bedienbar (= für alle bedienbar, auch Leute mit Screen-Readern) haben willst, dann ändere diese Text in normale Schreibung, und zeige den Text mittels CSS als Großbuchstaben an. Dafür fügst Du der Regel für .text noch die Eigenschaft text-transform: uppercase; hinzu.

3. statt <div id="header"><div class="header">...</div></div> ist sicherlich ein einzelnes <header> Element besser. Das div mit id="header" scheint mir auch von nichts angesprochen zu werden, es müsste unnötig sein.

4. Dein Header ist fixed. Das bedeutet, dass er aus dem normalen Seitenfluss herausgenommen ist und deine Inhalts-Sections dahinter erscheinen. Entweder gibst Du deinen Inhaltssections einen passenden margin-top, oder Du überlegst Dir eine andere Art der Seitenaufteilung (z.B. ein Grid).

Zu deinem Problem: Wo ist es denn? Das Menü verhält sich auf Mausbefehle so, wie es vermutlich soll. Was funktioniert nicht? Zeig doch mal eine Codepen-Variante, die Probleme macht.

Rolf

[thementholist]

Das hier ist die variante, die mir probleme bereitet:

https://codepen.io/thementholist/pen/pBYWbV

Hier habe ich lediglich "html" zu dem bodytag(html,body) im css hinzugefügt um eine Height von 100% zu haben. Wieso? Weil ich das auf einem Tutorial auf Youtube gesehen habe (wie man eine One-Page erstellt) Wie du siehst ist hier aber der hover effekt nun verloren gegangen. Ich würde es nicht nur gerne gelöst haben..sondern auch verstehen wieso zum Teufel das passiert. Wieso beeinflusst die Größe der Seite überhaupt den menu hover effekt ?!?

[thementholist]

https://codepen.io/thementholist/pen/NmmgxB

und hier die variante wo der hover effekt verloren geht:

https://codepen.io/thementholist/pen/PggjzE

[Felix Riesterer]

Lieber thementholist,

Du bleibst also nicht in Deinem Ursprungsthread. Schade. Aber na gut. Ich habe eine Variante gebaut, die Du gerne testen kannst:

[tastaturbedienbares Honeycomb-Menü]

Liebe Grüße,

Felix Riesterer.

[thementholist]

VIELEN VIELEN DANK!!!! Seit 2 Tagen bin ich schon dran..ich weiß zwar nicht wieso es mit dem anderen menu nicht geklappt hat..aber mit deinem scheint es zu funktionieren(mit 100% height). Ich küsse deine Augen!

[thementholist]

Wie kann ich dieses Menü in die Mitte der Seite plazieren?

[Gunnar Bittersmann]

@@Felix Riesterer

[tastaturbedienbares Honeycomb-Menü]

Ein paar Anmerkungen:

• Der Zustand des Toggle-Buttons sollte in seinem aria-expanded-Attribut festgehalten werden, dann haben auch Nutzer assisitver Technologien (wie Screenreader) was davon. Das lässt sich dann auch zum Stylen verwenden; eine Klasse "open" braucht man nicht. Fürs ul-Element auch nicht; das lässt sich als nachfolgendes Geschwisterelement des Buttons selektieren.

• Deine Animation läuft wegen der Änderung des z-Indexes nicht flüssig. Besser geht’s so: dafür sorgen, dass der Button immer vor den Menüpunkten ist und die sich einfach dahinterschieben. Die dürfen dann natürlich nicht −1 als z-Index haben, da die Links ja clickbar sein müssen. Button und Listitems in denselben Stapelkontext bringen, dann genügt z-index: 1 für den Button.

• Deine Sechsecke sind darüber und darunter nicht clickbar, wohl aber neben den Schrägen (rechteckige Clickfläche). Die Sechsecke setzt man besser (und einfacher!) mit clip-path: polygon() um – und dann ist auch nur die Sechseckfläche clickbar.

• Bei Tastatursteuerung sind die Links bei dir auch bei geschlossenem Menü in der Tab-Folge; das sollten sie aber nicht sein. Entweder man setzt bei geschlossenem Menü für alle Links tabindex="-1" und bei geöffnetem Menü tabindex="0" – oder man versteckt das Menü richtig (hidden-Attribut), sodass die Links nicht mehr erreichbar sind. (Das aber nicht gleich beim Click auf den Button, denn die Transition soll ja erstmal laufen. Da muss man auf Transition-Events lauschen.)

• Deine Transition läuft um einiges zu langsam. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen.

Ich hab die Überlegungen in ☞ mein Beispiel beehive navigation einfließen lassen. Anmerkungen dazu:

• Von den Berechnungen der Breite und Positionen der Sechsecke stehen nicht die Ergebnisse in nicht nachvollziehbaren Zahlen im Code, sondern die Formeln selbst – mit custom properties. So lassen sich --height und --gap an einer Stelle ändern, ohne dass irgendwas anderes angepasst werden muss. (Auch der Wert √3 ist als custom property hinterlegt. Statt --SQRT3 hätte ich übrigens auch --√3 schreiben können. Auf die Berechnung der Wurzel mit CSS hab ich hier verzichtet. Wie das geht, hab ich in der letzten Viertelstunde meines Vortrags auf dem Webkongress Erlangen erzählt.)

• Da das nur in Browsern funktioniert, die custom properties unterstützen (also nicht im IE ≤ 11), wird ebendies mit @supports() abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (progressive enhancement). Und da das Auf-/Zuklappen nur mit JavaScript funktioniert, erfolgt das Styling über den Attributsensor [data-javascript-enabled="true"] nur, wenn das JavaScript auch ausgeführt wird und dieses Attribut gesetzt wurde. Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

• Zur Änderung der Position der Menüpunkte beim Auf-/Zuklappen muss nicht die transform-Eigenschaft geändert werden, sondern lediglich --radius. (Bei transition muss allerdings transform angegeben werden.)

• Damit die Transition funktioniert, darf das Ausblenden des Menüs nicht über display: none erfolgen (Default für [hidden]), sondern über visibility: hidden.

• Damit die Transition funktioniert, darf das hidden-Attribut für die Dauer der Transition nicht gesetzt sein. Deshalb wird es beim transitionrun-Event gelöscht (da kein Delay im Spiel ist, ginge auch transitionstart) und erst beim Eintreten von transitionend auf den entsprechenden Folgewert gesetzt. Das funktioniert im Firefox, aber nicht im Chrome 73, der zwar transitionend kennt, aber nicht transitionrun und transitionstart.

  Das Löschen des hidden-Attributs darf man aber nicht einfach ans click-Event des Buttons binden, da dies nur geschen darf, wenn die Transition wirklich ausgeführt wird, nicht aber, wenn z.B. ein Nutzer in seinem Browser Animationen ausgestellt hat. Ansonsten würde – da dann ja kein transitionend feuert – der Folgewert nicht gesetzt werden. Als möglichen Workaround hatte ich bei transitionend ein Flag gesetzt und damit ab dem zweiten Aufklappen die Transition ermöglicht.

  Der entsprechende Code ist jetzt auskommentiert; nach Update auf 74 kann auch Chrome transitionrun und transitionstart. Update des Safari steht noch aus, ebenso der Test im Edge.

LLAP 🖖

[Felix Riesterer]

Lieber Gunnar,

Ein paar Anmerkungen:

vielen Dank! Wieder etwas dazu gelernt.

• Der Zustand des Toggle-Buttons sollte in seinem aria-expanded-Attribut festgehalten werden, dann haben auch Nutzer assisitver Technologien (wie Screenreader) was davon. Das lässt sich dann auch zum Stylen verwenden; eine Klasse "open" braucht man nicht. Fürs ul-Element auch nicht; das lässt sich als nachfolgendes Geschwisterelement des Buttons selektieren.

Da sieht man, dass ich in Sachen ARIA (oder a11y) noch recht unbeleckt bin. Natürlich kann man sich so die Klasse sparen, aber assistive Technologien haben davon noch viel mehr als ich.

• Deine Animation läuft wegen der Änderung des z-Indexes nicht flüssig. Besser geht’s so: dafür sorgen, dass der Button immer vor den Menüpunkten ist und die sich einfach dahinterschieben. Die dürfen dann natürlich nicht −1 als z-Index haben, da die Links ja clickbar sein müssen. Button und Listitems in denselben Stapelkontext bringen, dann genügt z-index: 1 für den Button.

Ähm, das verstehe ich nicht. Wie bringe ich sie in denselben Stapelkontext?

• Deine Sechsecke sind darüber und darunter nicht clickbar, wohl aber neben den Schrägen (rechteckige Clickfläche). Die Sechsecke setzt man besser (und einfacher!) mit clip-path: polygon() um – und dann ist auch nur die Sechseckfläche clickbar.

Diese Tricks sind mir noch unbekannt. Ich gestalte mit CSS nicht auf diesem künstlerischen Niveau. Mein Beispiel basiert völlig auf dem CSS-Code des OP. Und wie sieht es mit der Unterstützung durch die Browser aus? Wie sieht hier z.B: eine graceful degradation aus?

• Bei Tastatursteuerung sind die Links bei dir auch bei geschlossenem Menü in der Tab-Folge; das sollten sie aber nicht sein.

Warum nicht? Wer nix sieht, braucht auch den Klapp-Mechanismus nicht. Dann dürfen die Links gerne durch-tab-bar sein. Findest Du nicht?

Entweder man setzt bei geschlossenem Menü für alle Links tabindex="-1" und bei geöffnetem Menü tabindex="0" – oder man versteckt das Menü richtig (hidden-Attribut), sodass die Links nicht mehr erreichbar sind. (Das aber nicht gleich beim Click auf den Button, denn die Transition soll ja erstmal laufen. Da muss man auf Transition-Events lauschen.)

Ist das den Aufwand wirklich wert?

• Deine Transition läuft um einiges zu langsam. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen.

Auch hier blieb ich bei der Vorgabe durch den Code im OP. Aber gut zu wissen, dass es diese Faustregel gibt!

Ich hab die Überlegungen in ☞ mein Beispiel beehive navigation einfließen lassen.

Sehr chic! Gefällt mir sehr gut.

• Von den Berechnungen [...] die Formeln selbst – mit custom properties.

Wie sieht es hier mit der Browser-Unterstützung aus? Und wie degradiert das gracefully?

• Da das nur in Browsern funktioniert, die custom properties unterstützen (also nicht im IE ≤ 11), wird ebendies mit @supports() abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (progressive enhancement).

Aha! Sehr wichtiger Hinweis. Finde ich gut. Wer IE will, will keinen neumodischen Schnickschnack, sondern leiden. :-/

Und da das Auf-/Zuklappen nur mit JavaScript funktioniert, erfolgt das Styling über den Attributsensor [data-javascript-enabled="true"] nur, wenn das JavaScript auch ausgeführt wird und dieses Attribut gesetzt wurde.

Ja, so weit bin ich in meinem Beispiel leider noch nicht gegangen. Das hätte ich aber sollen.

Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

Warum nicht mit JS ins DOM gesetzt?

• Zur Änderung der Position der Menüpunkte beim Auf-/Zuklappen muss nicht die transform-Eigenschaft geändert werden, sondern lediglich --radius. (Bei transition muss allerdings transform angegeben werden.)

Also kann man auch custom properties transformieren lassen... cool!

• Damit die Transition funktioniert, darf das hidden-Attribut für die Dauer der Transition nicht gesetzt sein. Deshalb wird es beim transitionrun-Event gelöscht (da kein Delay im Spiel ist, ginge auch transitionstart) und erst beim Eintreten von transitionend auf den entsprechenden Folgewert gesetzt. Das funktioniert im Firefox, aber nicht im Chrome 73, der zwar transitionend kennt, aber nicht transitionrun und transitionstart.

Ohweh, das sind für mich noch alles böhmische Dörfer.

Der entsprechende Code ist jetzt auskommentiert; nach Update auf 74 kann auch Chrome transitionrun und transitionstart. Update des Safari steht noch aus, ebenso der Test im Edge.

Ich sehe also, dass die Unterstützung für alle Browser in Deinem Beispiel nicht gegeben ist. Aber ob meines in einem IE läuft, habe ich auch nicht getestet. War mir irgendwie völlig egal... ;-)

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer

Jetzt muss ich mir doch endlich mal ein paar Minuten Zeit nehmen zu antworten. Ich bin noch nicht dazu gekommen, an dem Ding weiterzubauen und auch auf @1unitedpower⁠s Anmerkungen einzugehen. Man hat ja neben der Arbeit auch noch andere Baustellen. 😉

Button und Listitems in denselben Stapelkontext bringen, dann genügt z-index: 1 für den Button.

Ähm, das verstehe ich nicht. Wie bringe ich sie in denselben Stapelkontext?

Wenn ich das wüsste! Irgendwie war es mir geglückt. Eine position an der richtigen Stelle? (No pun intended.)

clip-path: polygon() Und wie sieht es mit der Unterstützung durch die Browser aus?

Schlechter als ich dachte. Edge ist noch nicht dabei.

Wie sieht hier z.B: eine graceful degradation aus?

Man könnte die Schrägen visuell irgendwie hinfrickeln (z.B. mit linear-gradient). Die rechteckigen Schaltflächen könnten sich aber doch als Problem erweisen, insb. wenn die Sechsecke so dicht zusammen sind, dass sich die Rechtecke überlagern. Dann kann ein Click auf ein vermeintliches Sechseck auf ein falsches Rechteck gehen – miserable UX, wenn man nicht dort landet, wo man hin wollte.

Man könnte aber auch mal Sechs(eck)e gerade sein lassen. (No pun intended wirst du mir hier nicht glauben?) Die Wabendarstellung ist progressive enhancement; Browser, die das nicht können, stellen das Menü als Liste dar. Betrifft wohl hauptsächlich IE (geschenkt) und Edge – letzteres wird sich wohl erledigt haben, wenn Edge demnächst ein Chromium wird.

• Bei Tastatursteuerung sind die Links bei dir auch bei geschlossenem Menü in der Tab-Folge; das sollten sie aber nicht sein.

Warum nicht? Wer nix sieht, braucht auch den Klapp-Mechanismus nicht.

Was hat nix sehen mit Tastatursteuerung zu tun? Viele, die nichts sehen, werden vermutlich Tastatursteuerung verwenden (aber auch anderes ist denkbar: Sprachsteuerung bspw.). Aber nur ein kleiner Teil derer, die Tastatursteuerung verwenden, sieht nichts.

Auch nur ein Teil derer, die Screenreader verwenden, sieht nichts. Die Bandbreite geht von nichts sehen bis uneingeschränkt sehen, aber bspw. Legastheniker oder Analphabet.

Dann dürfen die Links gerne durch-tab-bar sein. Findest Du nicht?

Nein. Das verwirrt sehende Tastaturnutzer.

Entweder man setzt bei geschlossenem Menü für alle Links tabindex="-1" und bei geöffnetem Menü tabindex="0" – oder man versteckt das Menü richtig (hidden-Attribut), sodass die Links nicht mehr erreichbar sind.

Ist das den Aufwand wirklich wert?

Wenn man das Öffnen/Schließen animieren möchte, muss man den Aufwand wohl betreiben. Wenn man ihn scheut, muss man auf die Animation verzichten.

custom properties.

Wie sieht es hier mit der Browser-Unterstützung aus?

Inzwischen sehr gut. IE nicht, na und?

Und wie degradiert das gracefully?

Nicht. Fallback auf Listendarstellung.

Wer IE will, will keinen neumodischen Schnickschnack, sondern leiden. :-/

Eben. Oder anders gesagt: eben nicht! Der IE-Nutzer leidet ja nicht unter einer voll benutzbaren Seite, sondern freut sich seines Lebens, dass er alles bedienen kann.

Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

Warum nicht mit JS ins DOM gesetzt?

Geht auch. Ist vielleicht aber mehr Aufwand. Und ein Attribut eines im DOM vorhandenen Elements umzuschalten dürfte performanter sein als ein Element erst ins DOM zu setzen.

So, Arbeit ruft. Und mit der CSSBattle komme ich auch nicht so richtig voran …

LLAP 🖖

[1unitedpower]

• Da das nur in Browsern funktioniert, die custom properties unterstützen (also nicht im IE ≤ 11), wird ebendies mit @supports() abgefragt und das Menü nur in modernen Browsern als Bienenwabe gestylt (progressive enhancement). Und da das Auf-/Zuklappen nur mit JavaScript funktioniert, erfolgt das Styling über den Attributsensor [data-javascript-enabled="true"] nur, wenn das JavaScript auch ausgeführt wird und dieses Attribut gesetzt wurde. Weil der Button ohne JavaScript keine Funktion hat, wird dieser erst mit JavaScript eingeblendet.

Was ist mit dem Fall, dass der Browser keine Custom-Properties unterstüzt, aber das JavaScript ausgeführt wird. Dann könnte man den Button erst nach einer Feature-Abfrage aktivieren:

button.hidden = !CSS.supports('--custom-property: 0')

Oder man verzichtet auf Custom-Properties und benutzt stattdessen einen Preprozessor, das spart die Feature-Abfrage in CSS und in JavaScript und man dürfte damit noch ältere Browser erreichen.

[thementholist]

Habe gelernt wie ich das Menü in die Mitte platzieren kann und das scrolling ebenso ignoriert wird. Allerdings neues Problem : Die obere Hälfte steht im Hintergrund.☹

Habe auch probiert dem nav.honey eine z-index 1-100 zu geben..vergeblich steht immer noch im Hintergrund. Das seltsame ist das wenn Ich die Position auf absolute stelle, bleiben die Elemente dort wo sie bleiben müssen.

https://codepen.io/pen

Lg TM

[thementholist]

ups das ist der codepen: https://codepen.io/thementholist/pen/LvorYJ

Edit: Schon wieder verlinkt. Das nächste mal machst du das selbst.

[Rolf B]

Hallo thementholist,

okay, mit Felix' Lösung bin ich an einer Stelle noch unglücklich: die Waben flackern in Chrome und Firefox (nicht in Edge), wenn sich das Menü öffnet oder schließt. Das liegt am

nav.honey ul.open li {
	z-index: 0;
}

in honey-navi.css. Nimmt man die Regel weg, flackert nichts mehr (Chrome, FF, Edge). Ich weiß aber nicht, welcher Sonderfall von dieser Regel abgedeckt wurde, es mag unterm Strich bei anderen Browsern kontraproduktiv sein.

Der Unterschied zwischen deiner Lösung und der von Felix ist position:fixed vs position:relative. In einem position:relative-Element lassen sich child-Elemente offenbar per z-order hinter das Container-Element legen, in einem position:fixed-Element nicht. Es müsste ein spec Speci wie @Gunnar Bittersmann her, um zu erklären, warum das so ist oder ob das ein Bug ist. Ich weiß es nicht.

Muss es denn position:fixed sein? Ggf. kannst Du einen Container um die Navigation herumlegen, der fixed ist, und darin ist dann das - hoffentlich - funktionierende Menü mit position:relative.

Rolf

[thementholist]

nav.honey ul.open li {

z-index: 0;

}

in honey-navi.css. Nimmt man die Regel weg, flackert nichts mehr (Chrome, FF, Edge). Ich weiß aber nicht, welcher Sonderfall von dieser Regel abgedeckt wurde, es mag unterm Strich bei anderen Browsern kontraproduktiv sein.

Wenn ich das wegnehme geht der hover effekt verloren. bei position: relative .

Und bei position: "sticky" und "absolute" funktioniert es auch ohne "z-index: 0;" Aber da habe ich eben wieder das selbe Problem das die child-Elemente(die schwarzen honeycombs halt😂) wieder im oberen Container überlappen.

Muss es denn position:fixed sein?

Eigentlich schon. Ich hätte gerne dass, das Menü beim scrollen mitfolgt. Wäre es ansonsten vielleicht möglich die nav per position "sticky" so zu benützen das es nicht wegscrollt und immer unter meinem header bereich bleibt(wäre ja dann das selbe denke ich..aber was weiß ich schon)

Ggf. kannst Du einen Container um die Navigation herumlegen, der fixed ist, und darin ist dann das - hoffentlich - funktionierende Menü mit position:relative.

Wie macht man den genau so einen Container? Und soll dieser Container dann in meine honey-navi.css ,die main css oder im html eingesetz werden? Tut mir leid ich kenn mich wirklich leider 0 aus..habe bisher fast Alles mit Guides ausm Internet und eurer Hilfe erstellt.

[Rolf B]

Hallo thementholist,

du könntest das Folgende machen - aber ich bin noch nicht überzeugt, dass da am Ende eine gute Bedienbarkeit rauskommt. Ein Menü, dass ständig in der Mitte sitzt? Willst Du den Inhalt systematisch drum herumfummeln, so dass das Menü keine Inhalte verdeckt? Aber das ist deine Sache...

1. Einen Container um das nav Element herumlegen. Dem gebe ich die Klasse "beeHive", denn Honig findet man bekanntlich im Bienenstock 🐝🐝🐝. Das Innere des <nav> habe ich jetzt nicht abgeschrieben und durch ... angedeutet.

  <div class="beeHive">
    <nav>
       ...
    </nav>
  </div>

2. Den Bienenstock platzieren wir mit CSS fixed in die Bildschirmmitte:

   .beeHive {
      position: fixed;
      left: calc(50vw - 80px);
      top: calc(50vh - 70px);
   }

calc ist eine CSS Funktion zum Berechnen von CSS Maßen. Das Minus muss von Leerzeichen umgeben sein! calc(50vw - 80px) bedeutet: 50% der Viewportbreite (Anzeigebereich vom Browser) minus 80 Pixel. Der linke Rand des .beeHive ist damit 80px links von der Fenstermitte, und weil das nav.honey 160px breit ist (ohne die hinausgeschobenen Menüpunkte), ist es damit genau horizontal zentriert. Wegen der Höhe von 140px berechnen wir den oberen Rand dementsprechend mit calc(50vh - 70px). Die Größe des beeHive gebe ich nicht an, die ermittelt sich automatisch über den Inhalt. Wenn Du das Menü an einer anderen Stelle haben willst, ändere die Berechnung.

3. Das nav.honey und nav.honey ul ändern wir so:

nav.honey {
	border-bottom: 70px solid #fd4;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	position: relative;
	width: 80px;
}

nav.honey ul {
	list-style-type: none; 
  margin: 0;
  padding: 0;
}

Die nav.honey ul Regel ist bei Dir drin, aber vom nav.honey etwas entfernt. Such sie dir raus und ändere sie, nicht einfach meine Regel hineinkopieren.

Dem ul Element habe ich margin und padding 0 gegeben, weil sonst der Default-Margin des ul das Menü um einige Pixel nach unten schiebt und die Berechnung von top vermasselt.

Und wie gesagt, das Folgende scheint unnötig. Wenn ich es entferne, ändert sich aus meiner Sicht kein Hover-Effekt. Ich bemerke in deinem Pen aber auch keinen Flackereffekt mehr. Keine Ahnung was da passiert.

nav.honey ul.open li {
	z-index: 0;
}

Beachte auch bitte, dass das navi-js so gestrickt ist, dass es alle Klassen, die für nav.honey nötig sind, dynamisch nachlädt. Du musst diese Änderungen also in deiner Kopie von honey-navi.css machen.

Ich hoffe, ich habe nichts vergessen 🤕

Rolf

[Felix Riesterer]

Lieber Rolf,

Ich hoffe, ich habe nichts vergessen 🤕

vielleicht nur die Frage, ob das Verschachteln in ein umgebendes <div> wirklich notwendig oder sinnvoll ist.

Liebe Grüße,

Felix Riesterer.

[Rolf B]

Hallo Felix,

https://forum.selfhtml.org/self/2019/apr/29/problem-mit-script/1747761#m1747761

Problem war, dass mit position:fixed das Verhalten von z-order anders ist als mit position:relative. Wenn Du es besser hinbekommst, zeig mal bitte.

Rolf

[Felix Riesterer]

Lieber Rolf,

Problem war, dass mit position:fixed das Verhalten von z-order anders ist als mit position:relative. Wenn Du es besser hinbekommst, zeig mal bitte.

ich kann dieses Problem nicht lösen. Will man, dass das Menü immer sichtbar bleibt, dann hat man auf kleinen Viewports eben ein massives Problem. Wer so eine Spielerei haben muss, der will das eben so.

Liebe Grüße,

Felix Riesterer.

[Rolf B]

Hallo Felix,

reden wir aneinander vorbei?

Du hast gefragt, warum ich ein Extra <div> um den <nav> Bereich vorgeschlagen habe. Ich habe das mit dem Nichtfunktionieren der z-order bei position:fixed erklärt, so dass ich position:fixed und das Honeycomb-Menü, das position:relative für die Flyouts braucht, trennen kann.

Wenn Du nun sagst, dass Du für dieses Problem keine bessere Lösung hast, warum stellst Du dann den Sinn des Extra-<div> in Frage?

Wenn Du den Sinn eines position:fixed Honeycomb-Menüs in Frage stellen willst, dann bin ich sofort bei Dir (steht auch irgendwo weiter oben). Das muss der OP für sich entscheiden. Aber wenn er's unbedingt will, dann weiß ich nur diese Lösung.

Rolf

[Felix Riesterer]

Lieber Rolf,

Wenn Du nun sagst, dass Du für dieses Problem keine bessere Lösung hast, warum stellst Du dann den Sinn des Extra-<div> in Frage?

wie Du korrekt vermutet hast, hatte ich Dich in diesem Detail nicht richtig verstanden.

Wenn Du den Sinn eines position:fixed Honeycomb-Menüs in Frage stellen willst, dann bin ich sofort bei Dir (steht auch irgendwo weiter oben).

Dann sind wir uns ja einig.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Rolf B

Problem war, dass mit position:fixed das Verhalten von z-order anders ist als mit position:relative. Wenn Du es besser hinbekommst, zeig mal bitte.

In meinem Bienenstock kann ich problemlos relative durch fixed ersetzen. (gegenwärtig Zeile 20 im CSS).

LLAP 🖖

[thementholist]

Danke Danke Danke!! Hat funktioniert! Ich will die seite so gestalten das die Mitte immer frei bleiben wird.(wegen dem PopupMenü halt). Und die Elemente würde ich dann jeweils links und rechts platzieren auf jeder Seite.

Will man, dass das Menü immer sichtbar bleibt, dann hat man auf kleinen Viewports eben ein massives Problem

Oh nein was für ein Problem den? 😟

[Gunnar Bittersmann]

@@thementholist

Ich will die seite so gestalten das die Mitte immer frei bleiben wird.(wegen dem PopupMenü halt). Und die Elemente würde ich dann jeweils links und rechts platzieren auf jeder Seite.

Wo genau meinst du mit „links und rechts“?

LLAP 🖖

[thementholist]

hahahahhaha 😂 Ich sehe wo das Problem ist und arbeite daran!

[Gunnar Bittersmann]

@@Rolf B

1. Einen Container um das nav Element herumlegen.

Buh!

Dem gebe ich die Klasse "beeHive", denn Honig findet man bekanntlich im Bienenstock 🐝🐝🐝.

… auf Bäumen.

Eines Tages, als er einen Spaziergang machte, kam er an eine freie Stelle inmitten des Waldes, und inmitten dieser Stelle stand eine große Eiche, und vom Wipfel des Baumes kam ein lautes Summgeräusch. Winnie-der-Pu setzte sich an den Fuß des Baumes, steckte den Kopf zwischen die Pfoten und begann zu denken.
Zuallererst sagte er sich: »Dieses Summgeräusch hat etwas zu bedeuten. Es gibt doch nicht so ein Summgeräusch, das so einfach summt und summt, ohne daß es etwas bedeutet. Wenn es ein Summgeräusch gibt, dann macht jemand ein Summgeräusch, und der einzige Grund dafür, ein Summgeräusch zu machen, den ich kenne, ist, daß man eine Biene ist.«
Dann dachte er wieder lange nach und sagte: »Und der einzige Grund dafür, eine Biene zu sein, den ich kenne, ist, Honig zu machen.«
Und dann stand er auf und sagte: »Und der einzige Grund, Honig zu machen, ist, damit ich ihn essen kann.«
Also begann er, den Honig-Baum hinaufzuklettern.
(A.A. Milne, Pu der Bär)

2. Den Bienenstock platzieren wir mit CSS fixed in die Bildschirmmitte:

   .beeHive {
      position: fixed;
      left: calc(50vw - 80px);
      top: calc(50vh - 70px);
   }

Wo kommen die 80px und 70px her?

Verständlicherer Code dürte das sein:

{
	left: 50%;
	top: 50vh;
	transform: translate(50%, 50%);
}

Die Prozentangaben beziehen sich auf Breite bzw. Höhe des Elements.

Und bei left muss die Angabe in %, nicht vw sein, wenn das Ding auch in der Mitte sein soll, wenn eine Scrollbar einen Teil der Breite beansprucht.

LLAP 🖖

[thementholist]

Hi! Also Ich habe mich mit meinem Onkel hingesetzt und alles nochmals besprochen. Der Header soll doch fixed sein..habe ich umgestellt. Es wäre okey wenn der Button kleiner wäre und nicht unbedingt in der Mitte. Also habe ich die nav.honey verkleinert und im Header reingepackt. Jetzt stehen wir vor dem nächstem Problem: nachdem man auf den button klickt, erscheinen zwar die anderen buttons, jedoch ist die schöne Animation dadurch verloren gegangen.

Habe ein Video gemacht damit ihr seht was ich meine (im Codepen habe ich es nicht geschaft): https://youtu.be/4Ioffp1-62U

Und hier trotzdem noch die Codes: CODEPEN (Ich habe leider keine Ahnung wie ich auf Codepen 2 CSS Dateien anzeigen soll, weshalb ich einfach beide reingepackt habe)

Liebe Grüße

TheMentholist

[Rolf B]

Hallo thementholist,

ich lache mich tot. "TheMentholist" steht in Youtube, na klar. Was habe ich hier im Forum immer daraus gemacht: "Themen Tho List" - und mich gewundert, was das extra-h da sollte. Aua.

Dein Codepen funktioniert nicht weil es das JavaScript nicht findet.

<script src="js/mobile-menu.js"></script>

Diese js Datei steht ja auf deinem PC. Du musst das Script an dieser Stelle inline in den HTML Bereich setzen, oder das Script in den JS Bereich des Pen kopieren.

Das gleiche gilt für

<script src="./honey-navi/honey-navi.js"></script>

Wie Du es genau machen musst, hängt von den Scripten ab. Codepen stellt den Inhalt des JS Fensters an das Ende des <body>. Wenn das für Dich nicht taugst, musst Du die Script inline an die passende Stelle in den HTML Bereich schreiben.

Bei Felix' honey-navi.js ist es, wenn ich das richtig sehe, egal wo es steht.

Das Zusammenkopieren der CSS Dateien ist kein Problem, das kann man machen. Problematisch kann es sein, wenn CSS auf diese Weise aus einem anderen Verzeichnis geladen wird und Ressourcen aus dem CSS relativ angesprochen werden (z.B. dein Hintergrundbild), aber das ist im Pen jetzt egal.

Rolf

[thementholist]

Habe es probiert aber sieht immer noch gleich aus: https://codepen.io/thementholist/pen/zQvzoq Kriege es nicht hin 😕

Lg Thementholist

[Rolf B]

Hallo thementholist,

wenn Du nicht tust worum ich gebeten habe, sondern was anderes, dann kann das auch nichts werden (leider ist die Umkehrung nicht zwingend richtig...).

Im JS Bereich wird kein HTML erwartet und schon gar nicht verstanden.

<script src="blabla.js"></script> ist HTML. Das hat im JS Bereich nichts zu suchen. Da muss der Inhalt der blabla.js Datei hin.

Und nun die erweiterte Anleitung 😀:

Achtung, das mit dem Kopieren gilt nicht für jQuery. Das lädst Du schon aus einer Internet-Ressource, und die kann man direkt einbinden. Dazu klickst Du auf das kleine Zahnrad oben links neben JS. Du bekommst einen Dialog mit 4 Eingabemöglichkeiten.

(1) JavaScript Preprocessor: Den lässt Du leer.
(2) Search CDNjs: Das Eingabefeld ist ein Fest für Gunnar 😂. Lass es leer. Da ist zwar auch ein jQuery bei, aber eine andere Version. Über Versionsinkompatibilitäten müssen wir nicht anfangen zu grübeln.
(3) Zwei Eingabefelder für andere Ressourcen. Trage in einem davon

https://code.jquery.com/jquery-1.12.4.min.js  

ein.

Den Inhalt der beiden anderen Scripte kopierst Du hintereinander in das JS Feld. Vielleicht passt dann noch was nicht, aber das kriegen wir hoffentlich raus.

Im HTML Bereich nimmst Du die beiden <link href="..." rel="stylesheet"> Elemente von Google Fonts und kopierst sie in die Zwischenablage (ins Clipboard). Dann öffnest Du das Zahnrad-Menü von HTML und fügst das im Bereich "Stuff for <head>" ein.

Und nun löschst Du alles im HTML Bereich von <!doctype> bis <body>. Am Ende des HTML Bereichs löschst Du </body> und </html>.

JETZT hast Du einen Codepen. Du bekommst nämlich von codepen.io alles außer dem Body-Inhalt vorgegeben.

Rolf

[thementholist]

Vielen Dank! 😀👍 So hier nun der richtige Code: CODEPEN

LG TM

[thementholist]

Ich kann meinen Beitrag nicht bearbeiten daher tuts mir Leid für den Doppelpost. Ich habe gerade auch bemerkt dass das scrollen auch nicht mehr so flüssig läuft. Keine Ahnung was ich da wieder verbockt habe..

[Rolf B]

Hallo thementholist,

Ja. Das tut mir leid. Wegen des Editierens (dafür muss man 2500 Karmapunkte gesammelt haben), und wegen Deines Problems.

Mehr kann man wohl nicht tun - es sei denn, der Codepen von vorgestern (KLdrNL) soll das Problem zeigen. Soll er?

Rolf

[thementholist]

Hi Rolf! Das Problem besteht komischerweise nur auf meiner Live-Vorschau-Seite. Ich vermute das das am Bild liegt, bin mir aber nicht sicher da der Pop-up ja auch spinnt 😕.

>So sieht das ganze aus<

Liebe Grüße TM✌️

[thementholist]

Hey Leute! Ich soll heute die Seite registrieren da nun auch schon die Autokennzeichen raus sind habe ich es ein wenig eilig. Ich befürchte man könnte den Link klauen.. Könnt ihr mir eine gute Seite empfehlen?(Domain heißt das ganze wenn ich mich nicht irre?)

Liebe Grüße TheMentholist

[Felix Riesterer]

Lieber thementholist,

im Wiki steht ne ganze Menge, das Dir weiterhelfen sollte.

Liebe Grüße

Felix Riesterer

[Bernd]

Ich persönlich kann dir https://all-inkl.com/webhosting/privatplus/ empfehlen. Hier ist alles dabei was du benötigst. Wenn es ein Anbieter aus Österreich sein soll, dann diesen: https://www.world4you.com/

Ein Webspace ist in der Regel innerhalb von Minuten eingerichtet und startklar, dann kannst du deine Domain registrieren und musst dir keine Gedanken mehr machen dass diese dir weggeschnappt wird.

Wenn du nur einen Anbieter suchst um erst einmal deine Domain zu sichern kann ich dir https://www.do.de/ empfehlen.

[thementholist]

Vielen Dank! Ich habe nun die domain registrierung gekauft und bei der gleichen Seite (easyname.at) das Webhosting gekauft. Bin mal gespannt ob ich das morgen hinbekomme..und falls nicht melde ich mich nochmals!^^

[Matthias Apsel]

Hallo thementholist,

Ich habe nun die domain registrierung gekauft

Zuckerberg: Was, meine WhatsApp-Gebühren sind fällig?

Bis demnächst
Matthias

[Bernd]

Ich habe gerne damals 0,99 Euro für WhatsApp bezahlt!
Aber was hat dein Beitrag jetzt mit Webhosting und Domain zu tun?

[thementholist]

Muss ich das verstehen? 😂 Na wie dem auch sei..die Seite ist nun live: prime-performance.at Allerdings habe ich leider bisher kaum wirklich große Fortschritte machen können..hänge immer noch am verlorenen Pop-Up Effekt. Und für die "laggs"(nenn ich mal jetzt so) beim scrollen habe ich auch keine Lösung gefunden. LG TM

[Felix Riesterer]

Lieber thementholist,

hänge immer noch am verlorenen Pop-Up Effekt.

Du solltest zuerst die Fehler beheben. Dann kann man weitersehen.

Und für die "laggs"(nenn ich mal jetzt so) beim scrollen habe ich auch keine Lösung gefunden.

Könnte durch die Fehler oben bedingt sein.

Liebe Grüße

Felix Riesterer

[thementholist]

Hi Felix,

habe leider nicht so gute Englischkenntnisse und auch keinen deutschen Validator(?) gefunden.

Liebe Grüße TM

[Rolf B]

Hallo thementholist,

einiges davon kann man sich auch mit schlechten Kenntnissen zusammenreimen.

Zeile 4: <meta charset="utf-utf-8"> - das charset heißt utf-8

Zeile 28:

• Semikolons hinter HTML Attributen? Niemals nicht!

• Das img Element will height und width in Pixeln. Wenn Du Breite und Höhe in % angeben willst, muss das per Style geschehen. Entweder in der CSS Datei, oder als inline-style. In deiner CSS Datei hast Du für Breite und Höhe aber bereits ganz andere Werte stehen. Du musst Dich schon entscheiden, was Du willst 😀

Ganz oft:

• "consecutive hyphens" - also mehrere Bindestriche hintereinander. Das ist nur eine Warnung bezüglich XML, aber die kriegt man schnell weg. Ersetze deine Bindestrichfolgen durch Gleichheitszeichen, Punkte, Unterstriche, sonst was. Aber nicht --. Das hat für Kommentare eine Sonderbedeutung.

Das war's doch eigentlich schon, bis auf das fehlende Heading-Element (h1, h2, etc) für die ErsteSeite-Section. Hier hast Du ohnehin noch ein todo - deine Seite sollte EIN h1 Element haben, und es sollte den Inhalt "Prime Performance" haben. Du kannst es dann visuell verstecken (z.B. margin:0; padding:0; font-size: 0), denn sehende Benutzer bekommen ja dein Bild neben dem Honey-Menü. Es ist nur für Screenreader-Nutzer.

Die übrigen Sections sollten dann h2 Überschriften bekommen. Wobei ich mir nicht ganz sicher bin, wie sauber das ist. Jedenfalls ist die Auswahl von h1 bis h6 nicht dazu da, sich die gewünschte Schriftgröße auszusuchen, sondern es soll die Dokumentgliederung darstellen. Schriftgrößen passt man mittels CSS an.

Aber all das erzeugt meiner Meinung kein Lagging. Ich muss mir das nochmal zu Hause anschauen (bin noch im Büro auf einer virtuellen Maschine, die laggt eh).

Rolf

[Rolf B]

Hallo thementholist,

ok, done. Ich finde, die Seite scrollt glatt. Welche Form von Lagging empfindest Du? Auf welcher Hardware, welchem OS, welchem Brauser?

Rolf

[thementholist]

Hallo thementholist,

ok, done. Ich finde, die Seite scrollt glatt. Welche Form von Lagging empfindest Du? Auf welcher Hardware, welchem OS, welchem Brauser?

Also der Laptop ist wirklich sehr schlecht..habe sogar unten aufgeschnitten und extra enterne kühler unter den Lüftern angebracht, damit sie beim arbeiten nicht überhitzt 😀 Auf meinem Handy scheint es auch nicht zu laggen habe ich festgestellt. Der Browser ist Google Chrome und das Betriebssystem Windows 10. Ach ja und ich glaube ich habe alle Fehler, bis auf den Teil mit dem "consecutive hyphens". Habe da nicht ganz verstanden was ich zu tun habe. <meta charset="utf-utf-8"> habe ich auf <meta charset="utf-8"> umgeändert, ist das jetzt richtig so?

Mal gucken, wann er wieder Zeit für seine Seite hat.

Zeit habe ich genug, nur bin ich zu dämlich alle Aufgaben zu kapieren und muss mir nebenbei meist weitere Guides dazu ansehen..selbst bei Begriffen wie "Semikolons". 😂

Hintergrundbild landing.jpg (Bienenwaben): 5.3 MB. Nicht webtauglich. Reduziere die >Dateigröße auf ein Hundertstel dessen (53 kB)!

Ich habe das Bild nun per "https://compressjpeg.com/de/" auf 386 KB verkleinern können. Dann habe ich probiert das selbe Bild nochmals zu verkleinern aber scheint nicht mehr möglich zu sein.

Was für ein Geschäft führst du denn?

Das Geschäft ist von meinem Onkel und er betreibt Chiptuning.

LLAP 🖖

Artikel (englisch):

The HTML5 placeholder attribute is not a substitute for the label element ↩

Don't use placeholder text as labels ↩

Don’t Use The Placeholder Attribute ↩

Vielen Dank für die Artikeln, werde ich mir gleich ansehen.

Und ja Leute ihr habt recht..klar ist es dämlich ohne Wissen so etwas anzufangen. Habe auch nie wirklich darum gebeten und anfangs hat es auch Spaß gemacht aber sobald es zu komplex wurde habe ich schon etwas die Motivation verloren ^↑ Da habe ich mir wohl zu viel zugemutet...hätte vielleicht doch einen Baukasten nehmen sollen.

Liebe Grüße

TM🖖

[Gunnar Bittersmann]

@@thementholist

Könntest du bitte jeweils auf das Posting antworten, auf das du dich beziehst? Dann bleibt der Thread übersichtlich.

Hintergrundbild landing.jpg (Bienenwaben): 5.3 MB. Nicht webtauglich. Reduziere die >Dateigröße auf ein Hundertstel dessen (53 kB)!

Ich habe das Bild nun per "https://compressjpeg.com/de/" auf 386 KB verkleinern können. Dann habe ich probiert das selbe Bild nochmals zu verkleinern aber scheint nicht mehr möglich zu sein.

Bild runtergeladen, in Photoshop geöffnet, von 6574 × 3747 (viel zu groß) auf 1440 × 821 runterskaliert, web-optimiert als JPEG exportiert (Qualität 40 sollte völlig reichen): 44 kB. Nochmal durch ImageOptim gejagt: 42 kB.

LLAP 🖖

[Bernd]

Hallo,

Bild runtergeladen, in Photoshop geöffnet, von 6574 × 3747 (viel zu groß)

wenn Apple seinen neuen Mac inkl. Bildschirm vorstellt der am Montag vorgestellt wurde dann werden wir in Zukunft solche Große Bilder benötigten.

[thementholist]

Hi Gunner, Der Laptop stürzt leider ab bei Photoshop da er dabei überhitzt. Daher habe ich diese Art von Arbeiten auf dem Computer meines Freundes erledigen müssen. Habe ich sonst noch irgendeine andere Möglichkeit?

LG TM

[Rolf B]

Hallo thementholist,

nicht für alles braucht man Photoshop. Für einfache Skalierungen und JPG-Kompression ist IrfanView eines der besten Tools. Es nennt sich Bildbetrachter, kann aber mehr.

Rolf

[thementholist]

Bin mit der Skalierung und Comprimierungsdingsbums auf 65,7 KB gekommen. Könnte ja eigentlich noch weniger werden..aber ist das nicht schon genug? ACHJA die Laggs sind nun wirklich weg! Danke an Allen an dieser Stelle <3

[Bernd]

Ich kann dir https://www.photopea.com/ empfehlen

[thementholist]

Wow die Seite muss ich mir merken..is ja fast wie Photoshop😀 Danke dafür!

[Bernd]

Wenn es ein wenig professioneller sein soll, dann Affinity Photo:
https://affinity.serif.com/de/photo/

Derzeit 20% auf alles. Das ganze kostet dich derzeit knapp 44 € einmalig. Kommt natürlich an Photoshop nicht ran, aber für eine einfache Bildbearbeitung reicht es völlig aus.

[Gunnar Bittersmann]

@@thementholist

Muss ich das verstehen? 😂 Na wie dem auch sei..die Seite ist nun live: prime-performance.at Allerdings habe ich leider bisher kaum wirklich große Fortschritte machen können..hänge immer noch am verlorenen Pop-Up Effekt. Und für die "laggs"(nenn ich mal jetzt so) beim scrollen habe ich auch keine Lösung gefunden.

Beim Scrollen? Die laggt (nenn ich mal jetzt so) beim Laden. Gewaltig.

Hintergrundbild landing.jpg (Bienenwaben): 5.3 MB. Nicht webtauglich. Reduziere die Dateigröße auf ein Hundertstel dessen (53 kB)!

Logo Biene + „prime performance“: 121 kB. Auch zu groß. Reduziere die Dateigröße auf ein Zehntel dessen (12 kB)!

Die Reihenfolge der Menüpunkte im DOM sollte der visuellen Reihenfolge entsprechen, ansonsten springt der Fokus bei Tastaturbedienung wild auf dem Bildschirm umher, wie es bei deiner Seite der Fall ist.

Bei geschlossenem Menü sollten die Menüpunkte nicht per Tastatur anwählbar sein. Wir sprachen drüber.

Die Eingabefelder haben keine Beschriftung (label), sollten sie aber haben. Placeholder sind kein Ersatz für label.^{[1] [2]}

Placeholder sind i.a.R. zu gar nichts gut. Weg damit!^[3]

Unten auf der Seite: Geschäftsführer Blablabla..fsdff sdfasdfjlsakdfjöaslkfdhösalkdj fölasjdfölaskdjflaskdfj

Was für ein Geschäft führst du denn?

LLAP 🖖

Artikel (englisch):

---

1. The HTML5 placeholder attribute is not a substitute for the label element ↩︎

2. Don't use placeholder text as labels ↩︎

3. Don’t Use The Placeholder Attribute ↩︎

[Rolf B]

Hallo Gunnar,

auf das utf-utf-8 Encoding hatte ich ihn gestern schon hingewiesen. Mal gucken, wann er wieder Zeit für seine Seite hat.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Mal gucken, wann er wieder Zeit für seine Seite hat.

Wenn ich er wäre, würde ich die Zeit erstmal in die Grundlagen stecken.

• Die Seite bedienbar zu machen (incl. per Tastatur), gehört zu den Grundlagen.

• Die Bilder auf erträgliche Dateigrößen zu reduzieren, gehört zu den Grundlagen.

• Ein Aufklappmenü gehört nicht zu den Grundlagen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wenn ich er wäre, würde ich die Zeit erstmal in die Grundlagen stecken.

So wie du das sagst, klingt es so demotivierend. Auch wenn du in der Sache unbestritten recht hast.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Wenn ich er wäre, würde ich die Zeit erstmal in die Grundlagen stecken.

So wie du das sagst, klingt es so demotivierend.

Soll es auch. 😉

Man sollte Anfänger davon abbringen, zuerst die Tüpfelchen auf noch gar nicht vorhandene ı malen zu wollen und stattdessen ihre Motivation in die richtigen Bahnen lenken: auf das Wesentliche.

Danach können wir gerne darüber sprechen, ob es î, ĩ oder gar ḯ sein darf.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Logo Biene + „prime performance“: 121 kB. Auch zu groß. Reduziere die Dateigröße auf ein Zehntel dessen (12 kB)!

Ergänzung dazu: alt="HEADERIMG" ist sinnfrei. Im alt-Attribut muss eine textuelle Alternative stehen, die für das Bild steht, wenn es nicht angezeigt wird bzw. nicht gesehen werden kann. In dem Fall wäre das wohl sowas wie alt="prime performance".

LLAP 🖖