nicht angemeldet
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
N'Abend ;)
Ich habe mir eine horizontale Navigationsleiste gebastelt, die entsprechende Bereich ausklappt, wenn ich mit der Maus über einen Menüpunkt fahre. So kann man dann zwischen verschiedenen Unterpunkten wählen.
Das funktioniert auch alles einwandfrei, allerdings stehe ich nun vor einem Problem.
Wenn ich über einen besagten Menüpunkt fahre, dann wird dieser anders dargestellt. (Mein Menü besteht aus optischen Gründen aus Bildern. Es wird also ein Bild durch ein anderes ausgetauscht!). Dies ist mein Hover-Effekt. Wenn ich aber nun mit der Maus von diesem Menüpunkt heruntergehe, dann wird selbstverständlich wieder zur normalen Einstellung gewechselt. Dies möchte ich unterbinden, da der Menüpunkt ja noch aktiv ist. Hat da jemand eine Lösung/ einen Ansatz?
Grüße
Quaro
Om nah hoo pez nyeetz, Quaro!
nicht die Bilder tauschen, sondern verschieben
Deine Navigation sollte idealerweise so ausschauen
<ul>
<li><a>1. MP</a>
<ul>
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li><a>2. MP</a></li>
</ul>
Du könntest also den Bildwechsel nicht für das gehoverte a-Element sondern für das li-Element auslösen
li:hover + a
Die zweite Liste befindet sich ja innerhalb des Listenelements, somit bleibt es gehovert, wenn du dich über der subliste befindest.
Deine Frage lässt sich auch noch in eine zweite Richtung interpretieren: Was machen Leute ohne Maus (mobil, Pad, Win8, ...)?
die brauchen :active und da würde ich auf eine nur-Text-Variante zurückgreifen.
Matthias
Om nah hoo pez nyeetz, Quaro!
nicht die Bilder tauschen, sondern verschieben
Deine Navigation sollte idealerweise so ausschauen
<ul>
<li><a>1. MP</a>
<ul>
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li><a>2. MP</a></li>
</ul>
>
> Du könntest also den Bildwechsel nicht für das gehoverte a-Element sondern für das li-Element auslösen
>
> `li:hover + a`{:.language-css}
>
> Die zweite Liste befindet sich ja innerhalb des Listenelements, somit bleibt es gehovert, wenn du dich über der subliste befindest.
>
>
> Deine Frage lässt sich auch noch in eine zweite Richtung interpretieren: Was machen Leute ohne Maus (mobil, Pad, Win8, ...)?
> die brauchen :active und da würde ich auf eine nur-Text-Variante zurückgreifen.
>
>
> Matthias
Danke.
Das gehoverte li-Element war eine sehr gute Idee. Hätte ich aber auch selbst darauf kommen können ;)
Für Geräte ohne Maus verwende ich übrigens ein anderes Stylesheet ("media='handheld'"). Da ist die Website dann ziemlich anders aufgebaut ;)
Das mit dem Bilder wechseln ist ebenfalls sehr hilfreich. Danke auch dafür!
@@Quaro:
nuqneH
Für Geräte ohne Maus verwende ich übrigens ein anderes Stylesheet ("media='handheld'"). Da ist die Website dann ziemlich anders aufgebaut ;)
Das denkst du.
Kaum ein Gerät (wenn überhaupt eins) reagiert auf media='handheld'; (so ziemlich) alle verwenden das screen-Stylesheet.
Ist dein Menü also ohne Maus benutzbar?
Und komm jetzt nicht wieder damit, dass diese Hinweise nicht hilfreich wären.
Qapla'
مرحبا
Ist dein Menü also ohne Maus benutzbar?
Smartphone-Hersteller schlafen nicht, neue Geräte simulieren "Hover" bei onclick.
mfg
@@Malcolm Beck´s:
nuqneH
Smartphone-Hersteller schlafen nicht, neue Geräte simulieren "Hover" bei onclick.
Was nichts an der Falschheit von Quaros Aussage
Für Geräte ohne Maus verwende ich übrigens ein anderes Stylesheet ("media='handheld'"). Da ist die Website dann ziemlich anders aufgebaut ;)
ändert.
Qapla'
مرحبا
Was nichts an der Falschheit von Quaros Aussage
Für Geräte ohne Maus verwende ich übrigens ein anderes Stylesheet ("media='handheld'"). Da ist die Website dann ziemlich anders aufgebaut ;)
ändert.
Ich hatte vergessen, dir in dieser hinsicht zuzustimmen.
mfg
Gut, dann funktioniert das ganze so eben nicht. Diese Info (nix handheld) hätte aber auch früher kommen können ;)
Gemerkt hätte ich es dann beim Testen auf meinem Smartphone und wahrscheinlich dann hier nachgefragt, aber gut.
In diesem Fall danke ich und richte eine m.[domain] mit anderem screen-stylesheet ein.
@@Quaro:
nuqneH
Gut, dann funktioniert das ganze so eben nicht. Diese Info (nix handheld) hätte aber auch früher kommen können ;)
Es funktioniert aber anders. Media-Queries sind schon richtig, nur halt nicht 'screen' vs. 'handheld', sondern per 'min-width' (oder zur Not auch 'max-width'). Responsive Web Design.
In diesem Fall danke ich und richte eine m.[domain] mit anderem screen-stylesheet ein.
Das sollte man nicht tun.
Was passiert, wenn jemand einen Link m.example.net/foo/bar weitergibt (E-Mail, Twitter o.a. soziale Netzwerke), der Empfänger aber mit Desktop-PC unterwegs ist? Oder andersrum: wenn jemand www.example.net/foo/bar weitergibt, der Empänger aber mit Smartphone unterwegs ist?
“There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.”
— Stephen Hay
cf. Stephen Hay und Jeremy Keith via Luke Wroblewski
Qapla'
مرحبا
Und hier nochmal auf Deutsch: Flexibles Design und die Leistung von Medienabfragen nutzen
mfg
Dann werde ich mir diese Artikel mal genauer anschauen. Ich danke euch ;)
Hallo,
Es funktioniert aber anders. Media-Queries sind schon richtig, nur halt nicht 'screen' vs. 'handheld', sondern per 'min-width' (oder zur Not auch 'max-width').
Ich dachte, die Smartphones bekommen eine immer größere Auflösung bei kaum wachsender Bildschirmgröße (Iphone 960 x 640, Galaxy 1280 x 800) . Wenn das Geräte 800px hat, dann wird doch zwangsläufig das scrren-css angezogen, was aber nicht im Sinne des Designers ist, weil er doch eher den kleinen Bildschirm berücksichtigen möchte. Wie soll man also sinnvoll entscheiden? Außerdem kommen ja auch noch die Tablets hinzu, für die man eventuell auch eine eigene Oberfläche und ein eigenes Handling haben möchte.
Gruß,
Siri
مرحبا
Ich dachte, die Smartphones bekommen eine immer größere Auflösung bei kaum wachsender Bildschirmgröße (Iphone 960 x 640, Galaxy 1280 x 800) . Wenn das Geräte 800px hat,
Hier wäre wichtig zu wissen, welche Informationen diese Smartphones senden.
Ich habe bisher in keiner Statistik einen Iphone 960x640 gesehen, wenn dann nur Iphone 320x480.
dann wird doch zwangsläufig das scrren-css angezogen
Das kannst du ja auch mit Media-Querys abfangen.
@media print {
/* specific CSS */
}
@media screen, projection {
/* specific CSS */
}
@media screen and (max-width: 800px) {
/* specific CSS */
}
@media screen and (max-width: 479px) {
/* specific CSS */
}
Du machst ein Gesamt-Layout, und kannst dann mit kleinen Handgriffen "Fehlerkorrekturen" für die einzelnen Geräte und Ausgabe-Optionen vornehmen. Print schreibe ich meist zuerst, da es die wenigsten eingriffe erfordert.
mfg
Hallo,
Das kannst du ja auch mit Media-Querys abfangen.
[code lang=css]@media print {
/* specific CSS */
}
Darauf hab ich mich ja gerade bezogen, dass Gunnarv empfiehlt, die media-querys mit width-angaben zu kombinieren. Und ich hab mich gefragt, wie "sicher" das ist. Gibt ja nicht nur das iPhone.
Gruß,
Siri
مرحبا
Darauf hab ich mich ja gerade bezogen, dass Gunnarv empfiehlt, die media-querys mit width-angaben zu kombinieren. Und ich hab mich gefragt, wie "sicher" das ist. Gibt ja nicht nur das iPhone.
Wenn ein Gerät Media-Querys nicht beherrscht, bekommt der User das Default-Design. Kein Problem.
Du kannst Seperat zum CSS noch einen Link auf deiner Seite einfügen, mit dem man Manuell auf ?media=Smartphone umstellen kann. Diesen Link könntest du mittels Smartphone-Icon in die Seite einfügen. Wäre schön und nützlich.
mfg
Hallo,
Du kannst Seperat zum CSS noch einen Link auf deiner Seite einfügen, mit dem man Manuell auf ?media=Smartphone umstellen kann. Diesen Link könntest du mittels Smartphone-Icon in die Seite einfügen. Wäre schön und nützlich.
Guter Link!
Gruß,
Siri
@@Siri:
nuqneH
Wenn das Geräte 800px hat, dann wird doch zwangsläufig das scrren-css angezogen
Nein. Das iPhone mit Retina-Display reagiert immer noch auf max-width: 480px (und auf -webkit-min-device-pixel-ratio: 2). Du musst zwischen „Device-Pixeln“ und „CSS-Pixeln“ unterscheiden.
Außerdem kommen ja auch noch die Tablets hinzu, für die man eventuell auch eine eigene Oberfläche und ein eigenes Handling haben möchte.
Es wäre schon gut, Geräte nicht nur anhand der Bildschirmgröße und -orientierung unterscheiden zu können, sondern auch anhand anderer Merkmale: hat Touchscreen, GPS, Beschleunigungssensor, … Mal sehen, was die Zukunft bringt.
Qapla'
Hallo Gunnar,
Nein. Das iPhone mit Retina-Display reagiert immer noch auf max-width: 480px (und auf -webkit-min-device-pixel-ratio: 2). Du musst zwischen „Device-Pixeln“ und „CSS-Pixeln“ unterscheiden.
Das ist sehr gut zu wissen!
Es wäre schon gut, Geräte nicht nur anhand der Bildschirmgröße und -orientierung unterscheiden zu können, sondern auch anhand anderer Merkmale: hat Touchscreen, GPS, Beschleunigungssensor, … Mal sehen, was die Zukunft bringt.
Das wäre wünschenswert!
Gruß
Siri
@@Quaro:
nuqneH
Ich habe mir eine horizontale Navigationsleiste gebastelt, die entsprechende Bereich ausklappt, wenn ich mit der Maus über einen Menüpunkt fahre. So kann man dann zwischen verschiedenen Unterpunkten wählen.
Nö, kann „man“ nicht …
Das funktioniert auch alles einwandfrei
Bist du sicher? Wie funktioniert das auf einem Tablet oder Smartphone? Da gibt’s kein Hover. Wie kommt man an die Unterpunkte?
allerdings stehe ich nun vor einem Problem.
Das glaube ich auch.
Qapla'
[...]
Qapla'
Das war wirklich nicht hilfreich. Für Tablets und Smartphones verwende ich ein anderes Stylesheet.
Om nah hoo pez nyeetz, Quaro!
Das war wirklich nicht hilfreich. Für Tablets und Smartphones verwende ich ein anderes Stylesheet.
Doch, war es. Ich habe dich schließlich auch darauf hingewiesen und aus deinem Posting ging nicht hervor, dass die Seite ausschlißlich für Nutzer mit Maus gedacht ist. Die Pseudoklasse :aktive sollte im Sinne der Zugänglichkeit auch in diesem Stylesheet Beachtung finden, denn es gibt gehandikapte Menschen, die zwar eine Tastatur aber keine Maus bedienen können.
Matthias
Doch, war es. Ich habe dich schließlich auch darauf hingewiesen und aus deinem Posting ging nicht hervor, dass die Seite ausschlißlich für Nutzer mit Maus gedacht ist. Die Pseudoklasse :aktive sollte im Sinne der Zugänglichkeit auch in diesem Stylesheet Beachtung finden, denn es gibt gehandikapte Menschen, die zwar eine Tastatur aber keine Maus bedienen können.
Matthias
Ich bin mir bewusst, dass es Geräte ohne Maus gibt! Und diese habe ich bedacht und eine Lösung dafür geschaffen.
Nur ging es mir bei der Fragestellung nicht um die Darstellung auf verschiedenen Plattformen, sondern ausschließlich um die Hover-Version.