Verschiebung von Buttons

[Centrino]

In der Menüleiste kommt es beim Hovern über die Buttons zu Verschiebungen. Das heißt ein Button schiebt den anderen zur seite. Das sieht ziemlich blöd aus und ich hab absolut keine Idee wie ich dieses Problem beheben kann. Ein anderes Problem befindet sich in der Galerie. Dort sind das in der mittleren Spalte links und rechte Bild bei laden der Seite kleiner als die anderen. Wenn man wiederrum in Firefox das Element untersucht wird das Bild genauso groß wie die anderen. Auch dafür gibt es für mich keinen ersichtlichen Grund.

Wie kann ich diese Probleme beheben?

Danke im Vorraus mit freundlichen Gruß Centrino

(P.S. Seite funktioniert nur in Firefox XD)

[beatovich]

hallo

(P.S. Seite funktioniert nur in Firefox XD)

Erst mal solltest du die Seite validieren lassen.

[Matthias Apsel]

Hallo Centrino,

In der Menüleiste kommt es beim Hovern über die Buttons zu Verschiebungen. Das heißt ein Button schiebt den anderen zur seite. Das sieht ziemlich blöd aus und ich hab absolut keine Idee wie ich dieses Problem beheben kann.

Du änderst das Schriftgewicht von normal auf fett. Dadurch wird mehr Platz benötigt.

PS: Deine Seite ist ziemlich kaputt. Schau dir mal den Quelltext an (STRG+U) und anschließend das Grundgerüst (nur mit zwei r).

(P.S. Seite funktioniert nur in Firefox XD)

Es ist ziemlich sinnfrei, den UserAgentString abzufragen. Der kann beliebig manipuliert werden.
Niemand wird sich wegen deiner Seite den Firefox herunterladen.

Gibt es einen Grund, warum du Formulare statt einfacher Links verwendest?

Bis demnächst
Matthias

[Centrino]

Du änderst das Schriftgewicht von normal auf fett. Dadurch wird mehr Platz benötigt.

Bringt leider nix. Hast du noch andere Ideen?

PS: Deine Seite ist ziemlich kaputt. Schau dir mal den Quelltext an (STRG+U) und anschließend das Grundgerüst (nur mit zwei r).

Das Grundgerüst mit doppel r wird ignoriert und inwiefern ist die Seite kaputt.

Es ist ziemlich sinnfrei, den UserAgentString abzufragen. Der kann beliebig manipuliert werden.
Niemand wird sich wegen deiner Seite den Firefox herunterladen.

Es geht grundlegend darum mit dem Script meinen Info-Lehrer zu verarschen XD

Gibt es einen Grund, warum du Formulare statt einfacher Links verwendest?

naja ich benutzte die Form weil ich nicht nur den Text als link haben will, sondern das ganze Feld. Da war die Form das einfachste, somal ich da einfach den Link reinpacken kann.

Trotzdem Danke

[J o]

Hey,

Niemand wird sich wegen deiner Seite den Firefox herunterladen. Es geht grundlegend darum mit dem Script meinen Info-Lehrer zu verarschen XD

Trotzdess, ein absolutes "no go!", was dir hoffentlich bewusst ist.

Gibt es einen Grund, warum du Formulare statt einfacher Links verwendest? naja ich benutzte die Form weil ich nicht nur den Text als link haben will, sondern das ganze Feld. Da war die Form das einfachste, somal ich da einfach den Link reinpacken kann.

Das funktioniert auch mit einem Link, am einfachsten etwa so.

Gruß
Jo

[Gunnar Bittersmann]

@@J o

Das funktioniert auch mit einem Link, am einfachsten etwa so.

:hover zu verwenden, aber nicht :focus, ist das Gegenteil von „funktioniert“.

Und leider gibt es immer noch welche, die das nicht wissen und solche Postings positiv bewerten.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

:hover zu verwenden, aber nicht :focus, ist das Gegenteil von „funktioniert“.

Nicht unbedingt. Es handelt sich ja nur um eine Hervorhebung und da könnte der gepünktelte Rahmen bei Focus ausreichend sein.

Und leider gibt es immer noch welche, die das nicht wissen und solche Postings positiv bewerten.

wahrscheinlich wegen der Aufforderung, nicht den Infolehrer zu verarschen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

da könnte der gepünktelte Rahmen bei Focus ausreichend sein.

Du meinst den, der an der Grenze zwischen Grün und Weiß visuell untergeht?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Du meinst den, der an der Grenze zwischen Grün und Weiß visuell untergeht?

Nein, ich meine den, der in einem weißen Kästchen auffällt. 😀

Bis demnächst
Matthias

[Centrino]

Lieber LLAP, :focus ist nicht gesucht. Ich möchte schon :hover haben.

[JürgenB]

Hallo,

:focus ist nicht gesucht. Ich möchte schon :hover haben.

du bist dir also absolut sicher, das die Seite nie von einem Besucher ohne Maus aufgerufen wird?

Gruß
Jürgen

[Gunnar Bittersmann]

@@Centrino

Lieber LLAP,

??

:focus ist nicht gesucht. Ich möchte schon :hover haben.

Nein. Du möchtest beides.

LLAP 🖖

[Centrino]

Sorry ich hab gedacht LLAP ist irgendwie dein Name. und wie muss ich das jetzt irgendwie beides einsetzen?

[Gunnar Bittersmann]

@@Centrino

und wie muss ich das jetzt irgendwie beides einsetzen?

Um bei Jos Beispiel zu bleiben:

a:focus, a:hover {
  background-color: red;
}

Bei dir ist der gepunktete Rahmen besser zu erkennen, es schadet aber trotzdem nicht, den :focus-Status ebenso wie den :hover-Status aussehen zu lassen.

Wenn du eine andere Kennzeichnung des :focus-Status vorgenommen hast, dann dürftest du auch die dann nicht mehr notwendige gepunktete Linie entfernen (outline: none).

LLAP 🖖

[J o]

Hallo Gunnar,

Das funktioniert auch mit einem Link, am einfachsten etwa so.

:hover zu verwenden, aber nicht :focus, ist das Gegenteil von „funktioniert“.

Und leider gibt es immer noch welche, die das nicht wissen und solche Postings positiv bewerten.

Ja, es ging mir lediglich darum zu zeigen, dass der Link auch größer werden kann und nicht um das :hover oder :focus.

Zudem „funktioniert“ auch beides, unabhängig vom CSS.

Gruß
Jo

[Gunnar Bittersmann]

@@J o

Ja, es ging mir lediglich darum zu zeigen, dass der Link auch größer werden kann und nicht um das :hover oder :focus.

Nein, „es ging mir lediglich darum“ ist keine Ausrede. Andere übernehmen Beispielcode hier aus dem Forum komplett – der ist dann nutzbar oder nicht nutzbar.

Es ist also angesagt, hier immer nutzbaren Code zu posten – allgemein nutzbaren, auch per Tastatur.

LLAP 🖖

[J o]

Hey,

Nein, „es ging mir lediglich darum“ ist keine Ausrede. Andere übernehmen Beispielcode hier aus dem Forum komplett – der ist dann nutzbar oder nicht nutzbar.

Richtig.

Es ist also angesagt, hier immer nutzbaren Code zu posten – allgemein nutzbaren, auch per Tastatur.

Funktioniert ein HTML Dokument bei dir nur mit CSS? Bei mir ist die Funktionalität nicht mit dem Aussehen gekoppelt.

Lieber solltest du bemängeln, dass der Link nicht funktioniert, bzw. keine Tastatursteureung möglich ist, wenn kein href Attribut und, respektive oder kein tabindex, gesetzt ist.

Gruß
Jo

[Gunnar Bittersmann]

@@J o

Funktioniert ein HTML Dokument bei dir nur mit CSS?

Nein, das sollte ohne CSS funktionieren. Das ist Grundvoraussetzung dafür, dass es auch mit Screenreader funktioniert.

Man kann mit CSS aber einiges kaputtmachen. Bei deinem Beispiel war die Outline kaum zu erkennen.

Lieber solltest du bemängeln, dass der Link nicht funktioniert, bzw. keine Tastatursteureung möglich ist, wenn kein href Attribut und, respektive oder kein tabindex, gesetzt ist.

Darüber hab ich mal großzügig hinweggesehen. 😉

LLAP 🖖

[Rolf B]

Hallo Centrino,

Es geht grundlegend darum mit dem Script meinen Info-Lehrer zu verarschen XD

Statt ihn zu vera... hättest Du besser mal zugehört als er über Grids gesprochen hat.

1. Ist ein Grid zweidimensional, darum ist es das falsche Mittel wenn es um ein einzeiliges Menü geht. Hier wäre Flexbox besser.

2. Solltest Du nicht so viel Auto fahren, vor allem nicht in der Column-Definition des Grid. Auto heißt: Lieber Browser, mach's so breit wie der Inhalt erfordert. Und wenn der Text fett wird, erfordert der Inhalt mehr Breite. Besser wäre hier eine Einteilung in vier Viertel, also grid-template-columns: repeat(4, 1fr). Oder flex: 1 1 25% bei Flexbox. Und bei schmalem Viewport (Handy) fällt deine Navigation auseinander, da wäre eine Media Query angesagt die dann eine andere Darstellung wählt.

3. Ach ja, Navigation. `<div class="menu-grid"> ist schlecht. Aus zwei Gründen. Erstens beschreibt der Klassenname eine Layout-Idee. Das sollen Klassennamen nicht tun, sie sollen ein Element fachlich beschreiben. Der Klassenname müsste also "navigation" oder "menü" heißen. Und damit kommen wir zum zweiten Grund: Für sowas gibt's ein spezielles Element: <nav>. Der Inhalt eines nav ist typischerweise eine Liste von Menüpunkten, d.h. bekommt markup mit ul und li, darin die Navigationslinks. Der Liste musst Du margin und padding wegnehmen und list-style:none verpassen. Und das ul Element stylest Du dann als Flexbox oder Hamburger-Menü, je nach Viewportbreite.

4. Deine Galerie möchte wohl lieber ein Grid oder eine Flexbox (mit wrap) sein; Tabellenlayout war aktuell als Du gerade geboren wurdest.

Rolf

[klawischnigg]

Hi there,

In der Menüleiste kommt es beim Hovern über die Buttons zu Verschiebungen. Das heißt ein Button schiebt den anderen zur seite. Das sieht ziemlich blöd aus und ich hab absolut keine Idee wie ich dieses Problem beheben kann.

Du darfst die Schrift im gehoverten Button nicht fett setzen, dann ist (zumindest) dieses Problem verschwunden…

[Tabellenkalk]

Hallo,

Du darfst die Schrift im gehoverten Button nicht fett setzen, dann ist (zumindest) dieses Problem verschwunden…

Patient zum Zahnarzt: "Bitte tun Sie was gegen meine Zahnlücke!"
Zahnarzt: "Das ist einfach: Hören Sie auf zu grinsen!"

Gruß
Kalk

[klawischnigg]

Hi there,

Du darfst die Schrift im gehoverten Button nicht fett setzen, dann ist (zumindest) dieses Problem verschwunden…

Patient zum Zahnarzt: "Bitte tun Sie was gegen meine Zahnlücke!"
Zahnarzt: "Das ist einfach: Hören Sie auf zu grinsen!"

Wenn Du aus dieser bescheuerten, belanglosen und unwichtigen Seite eine Vorzeige-Webpage für Design- und Markup-Grundsatzfragen mit Folgewirkung bis zur übernächsten Generation machen möchtest, dann ist Deine Antwort witzig, wichtig und richtig…