Navigator
franzsen
Navigator
franzsen
Matthias Apsel
Gunnar Bittersmann
Auge
TabellenkalkMir ist aufgefallen, daß es einen Unterschied macht ob der Selector mit oder ohne "ul" geschrieben wird, aber nur in diesem Fall. In allen anderen Gestaltungen der Navigation mit CSS spielt es keine Rolle. Wenn ich also "ul#navigation li" verwende erhalte ich zwischen den Listenpunkten einen Abstand von 3px. Schreibe ich aber nur "#navigation li" passiert überhaupt nichts. Woher kommt das? Der id-Selector gilt doch für das Element "ul"?
<!doctype html>
<html lang="de">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<title></title>
<style>
ul#navigation, ul#navigation li {
margin: 0;
padding: 0;
list-style: none;
}
ul#navigation {
width:200px;
float:left;
}
ul#navigation li {
margin-bottom: 3px;
}
ul#navigation li a {
background-color: #444;
color: #fff;
font-weight:bold;
text-decoration:none;
}
ul#navigation a:hover {
background-color: #a33;
color:#fff;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href="indes.htm">Startseite</a></li>
<li><a href="impressum.htm">Impressum</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
</ul>
</body>
</html>
--
LG Franz
LG Franz
-
Hallo,
das liegt an der Spezifität.
Du hast
ul#navigation lizweimal im CSS. In diesem Fall greift die im Quelltext spätere Anweisung, da beide die gleiche Spezifität haben.
Wenn du beim zweiten Eintrag ul entfernst hat die Anweisung eine geringe Spezifität und die zweite Anweisung kann die erste nicht überschreiben.
http://www.peterkropff.de/site/css/spezifitaet.htm
Gruss
MrMurphy
-
Hallo,
das liegt an der Spezifität.
Du hast
ul#navigation lizweimal im CSS. In diesem Fall greift die im Quelltext spätere Anweisung, da beide die gleiche Spezifität haben.
Wenn du beim zweiten Eintrag ul entfernst hat die Anweisung eine geringe Spezifität und die zweite Anweisung kann die erste nicht überschreiben.
Also wird die Spezifität des Selectors durch das Anhängen des Elementes verstärkt? Zu achten ist also immer darauf, ob eine Anweisung mehrmals vorkommt? Zwecks Lesbarkeit sollte der ganze Code eine einheitliche Schreibweise bekommen; also ul#Nav... oder #Nav...?
Ist es überhaupt erforderlich, daß zum Selector noch das Element angeführt wird? Die Identität des Elementes wird ja durch den Selector eindeutig festgestellt? In manchen Tutorien wird das aber so gehandhabt.
Ich habe ein paar mal gelesen, daß Smartphones den hover-Effekt nicht kennen. Mangels eines Solchen kann ich das nicht feststellen. Wenn nun die Webseite für Smartphones geeignet sein soll, sollte man dann diesen weglassen oder wird das mit "@media" gesteuert?
--
LG Franz-
Hallo franzsen,
Also wird die Spezifität des Selectors durch das Anhängen des Elementes verstärkt?
Guckst du hier: https://wiki.selfhtml.org/wiki/CSS/Kaskade
Zu achten ist also immer darauf, ob eine Anweisung mehrmals vorkommt?
Guckst du ebenfalls hier: https://wiki.selfhtml.org/wiki/CSS/Kaskade
Zwecks Lesbarkeit sollte der ganze Code eine einheitliche Schreibweise bekommen; also ul#Nav... oder #Nav...?
Gründe der Lesbarkeit sind zweitranging.
Ist es überhaupt erforderlich, daß zum Selector noch das Element angeführt wird? Die Identität des Elementes wird ja durch den Selector eindeutig festgestellt? In manchen Tutorien wird das aber so gehandhabt.
Das kann man so nicht sagen. Allerdings: Überspezifizierte Selektoren möchte man vermeiden.
Ich habe ein paar mal gelesen, daß Smartphones den hover-Effekt nicht kennen. Mangels eines Solchen kann ich das nicht feststellen. Wenn nun die Webseite für Smartphones geeignet sein soll, sollte man dann diesen weglassen oder wird das mit "@media" gesteuert?
Das lässt sich mit Media so nicht steuern, allerdings kannst du festlegen, dass auf dem Smartphone eine andere Navigation gezeigt wird.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) -
@@franzsen
Ich habe ein paar mal gelesen, daß Smartphones den hover-Effekt nicht kennen. […] Wenn nun die Webseite für Smartphones geeignet sein soll, sollte man dann diesen weglassen […]?
Nein. Falschrum gedacht. Nicht weglassen, sondern hinzufügen – für Geräte, die Hover unterstützen. Das ist das Prinzip von progressive enhancement.
Bei Geräten, auf denen nicht gehovert werden kann, stört eine Angabe zum Hovereffekt (Farbwechsel) nicht. Auf diesen Geräten findet solch ein Effekt halt nicht statt.
Sollte deshalb bei Geräten, auf denen gehovert werden kann, auf einen Hovereffekt verzichtet werden? Nein. Es gibt keinen Grund, warum die nicht in den Genuss eines solchen kommen sollten.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Hallo
Nein. Falschrum gedacht.
Ich denke franzsen meint keine optischen Spielereien, sondern Funktionen, die mit hover ausgelöst werden und auf Touchscreens zu Schwierigkeiten führen können. Besucher mit Touchscreens kommen also nicht an alle Informationen einer Seite.
Klassische Beispiele:
Ein Aufklappmenü, in welchem die "Überschriften" bereits verlinkt sind und die sich durch den hover-Zustand aufklappen. Wenn die Überschrift angeklickt / angetippt wird öffnet sich nicht das Menü, sondern es wird direkt auf eine andere Seite gewechselt.
Oder beim hovern auf ein Bild erscheinen schriftliche Informationen zu dem Bild. Die Informationen könnten zwar auch durch klicken / tippen erscheinen, aber dann hat der Besucher seine Hand vor den Informationen.
Einige Touchscreen-Browser versuchen zwar solche Probleme zu erkennen und zu umgehen, aber davon kann man halt nicht ausgehen.
Gruss
MrMurphy
-
@@MrMurphy1
Ich denke franzsen meint keine optischen Spielereien, sondern Funktionen, die mit hover ausgelöst werden und auf Touchscreens zu Schwierigkeiten führen können.
Das würde ich bei
ul#navigation a:hover { background-color: #a33; color:#fff; }nicht denken.
Besucher mit Touchscreens kommen also nicht an alle Informationen einer Seite.
Klassische Beispiele:
Ein Aufklappmenü, in welchem die "Überschriften" bereits verlinkt sind und die sich durch den hover-Zustand aufklappen. Wenn die Überschrift angeklickt / angetippt wird öffnet sich nicht das Menü, sondern es wird direkt auf eine andere Seite gewechselt.
Wieso sollte das ein „klassisches Beispiel“ für „Besucher mit Touchscreens kommen also nicht an alle Informationen einer Seite“ sein?
Sie kommen doch ran, wenn sich auf der anderen Seite, die dann geöffnet wird, die Links zu den Unterpunkten befinden.
Es ist vielmehr ein Beispiel für progressive enhancement: bei Geräten, bei denen man hovern kann, kommt man auch gleich ohne den Umweg zu den Unterpunkten.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar) -
Hallo
Nein. Falschrum gedacht.
Ich denke franzsen meint keine optischen Spielereien, sondern Funktionen, die mit hover ausgelöst werden und auf Touchscreens zu Schwierigkeiten führen können. Besucher mit Touchscreens kommen also nicht an alle Informationen einer Seite.
Klassische Beispiele:
Ein Aufklappmenü, in welchem die "Überschriften" bereits verlinkt sind und die sich durch den hover-Zustand aufklappen. Wenn die Überschrift angeklickt / angetippt wird öffnet sich nicht das Menü, sondern es wird direkt auf eine andere Seite gewechselt.
Oder beim hovern auf ein Bild erscheinen schriftliche Informationen zu dem Bild. Die Informationen könnten zwar auch durch klicken / tippen erscheinen, aber dann hat der Besucher seine Hand vor den Informationen.
Einige Touchscreen-Browser versuchen zwar solche Probleme zu erkennen und zu umgehen, aber davon kann man halt nicht ausgehen.
Genau das meinte ich. Welche Farbe Texte oder sonst etwas bekommt ist nicht so wichtig denn der link funktioniert ja auch ohne hover. Hauptsächlich assoziiert man hover ja mit aufklappbaren Menüs und zu denen gelangt ja ein Smartphone-Benutzer damit nicht mehr.
Die Frage ist, wie kommen Benutzer von Normalcomputern und Smartphones in den Genuß von hover bzw. Folgeseiten?--
LG Franz-
Hallo franzsen,
Genau das meinte ich. Welche Farbe Texte oder sonst etwas bekommt ist nicht so wichtig denn der link funktioniert ja auch ohne hover. Hauptsächlich assoziiert man hover ja mit aufklappbaren Menüs und zu denen gelangt ja ein Smartphone-Benutzer damit nicht mehr.
Die Frage ist, wie kommen Benutzer von Normalcomputern und Smartphones in den Genuß von hover bzw. Folgeseiten?Indem der Oberpunkt verlinkt ist. Durch Klick darauf öffnet sich eine Seite -idealerweise die des ersten/wichtigsten Unterpunktes- , die die Unterpunkte als Menüleiste enthält.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
@@Matthias Apsel
Die Frage ist, wie kommen Benutzer von Normalcomputern und Smartphones in den Genuß von hover bzw. Folgeseiten?
Indem der Oberpunkt verlinkt ist. Durch Klick darauf öffnet sich eine Seite -idealerweise die des ersten/wichtigsten Unterpunktes- , die die Unterpunkte als Menüleiste enthält.
Das wäre die Grundfunktionalität.
Progressive enhancement: JavaScript. Der Link zur anderen Seite wird abgefangen, stattdessen klappt das Menü beim Click auf den Oberpunkt aus.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
-
-
-
-
-
Hallo
Ist es überhaupt erforderlich, daß zum Selector noch das Element angeführt wird? Die Identität des Elementes wird ja durch den Selector eindeutig festgestellt? In manchen Tutorien wird das aber so gehandhabt.
Bei deinem Fall, der Benennung des Navigationsblocks als „navigation“, kannst du das Element getrost weglassen. Das Element wird durch seine ID und die vermutlich auf allen Seiten gleichartige Struktur projektweit erkannt. Das trifft auf die meisten Anwendungsfälle von ID zu.
Es kann aber auch sein, dass ein Element mit der ID „ergebnis“ für ein Berechnungsergebnis auf einer Seite eine Tabellenzelle ist und auf einer anderen Seite ein Listenpunkt. Die können nun unterschiedliche Regeln benötigen, die das jeweils andere Element nicht haben soll. Hier wäre die Nennung des Elementtyps notwendig.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“-
Tach!
Ist es überhaupt erforderlich, daß zum Selector noch das Element angeführt wird? Die Identität des Elementes wird ja durch den Selector eindeutig festgestellt.
Ein weiterer Fall wäre, wenn man eine höhere Spezifität braucht, um eine andere Regel überschreiben zu können. In der Theorie kommt das zwar nicht vor, weil man da die eigentliche Regel anpassen kann, aber in der Praxis hat man beispielsweise ein nicht selbst geschriebenes CMS und will da lediglich eine individuelle Note reinbringen, ohne gleich ein komplettes Theme neu zu entwickeln. Dafür muss man einen Weg finden, stärker als die ursprüngliche Regel zu sein, ohne dass man in den fremden Quellen rumschraubt, denn man will sich üblicherweise die Update-Fähigkeit erhalten, ohne dass dabei die eigenen Anpassungen flöten gehen. Man kann da zwar meist den !important-Hammer draufschlagen, aber dann hat man vielleicht gleich zu viel Spezifität hinzugefügt und bekommt unter Umständen Folgeprobleme.
dedlfix.
-
Hallo dedlfix,
[…] aber in der Praxis hat man beispielsweise ein nicht selbst geschriebenes CMS und will da lediglich eine individuelle Note reinbringen, ohne gleich ein komplettes Theme neu zu entwickeln. Dafür muss man einen Weg finden, stärker als die ursprüngliche Regel zu sein, ohne dass man in den fremden Quellen rumschraubt, denn man will sich üblicherweise die Update-Fähigkeit erhalten, ohne dass dabei die eigenen Anpassungen flöten gehen. Man kann da zwar meist den !important-Hammer draufschlagen, aber dann hat man vielleicht gleich zu viel Spezifität hinzugefügt und bekommt unter Umständen Folgeprobleme.
Wenn man die Reihenfolge der Einbindung beeinflussen kann, genügen auch Selektoren derselben Spezifität. Da hat man die geringsten Nebenwirkungen zu erwarten.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
Hallo Matthias Apsel,
Wenn man die Reihenfolge der Einbindung beeinflussen kann, genügen auch Selektoren derselben Spezifität. Da hat man die geringsten Nebenwirkungen zu erwarten.
Wenn man die Reihenfolge der Einbindung beeinflussen kann, genügen dieselben Selektoren. Da hat man die geringsten Nebenwirkungen zu erwarten.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
-
-
-
-
-
-
@@franzsen
ul#navigation, ul#navigation li { margin: 0; padding: 0; list-style: none; }Spezifität des Selektors
ul#navigation li: 102ul#navigation li { margin-bottom: 3px; }Dito. Da diese Regel nach der oberen steht, gewinnt sie; damit 3px Abstand.
Schreibst du stattdessen
#navigation li, ist die Spezifität 101, also geringer als die der oberen Regel. Damit gewinnt jene, also 0px Abstand.Du müsstest also
ul#navigationin allen Selektoren durch#navigationersetzen.Solltest du auch. Selektoren sollten nur so spezifisch wie nötig und so unspezifisch wie möglich sein.
ul#navigation li a {Hierfür also
#navigation a(ohneulund ohneli).LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar) -
Hallo,
komisch, dass noch niemand das eine Meta-Element angemeckert hat, das sich fälschlicherweise außerhalb des Head-Elements verlustiert.
Gruß
Kalk -
@@franzsen
ul#navigation li a { background-color: #444; color: #fff; font-weight:bold; text-decoration:none; } ul#navigation a:hover { background-color: #a33; color:#fff; }Wenn du dich fragst, warum du keinen Hover-Effekt siehst: Das liegt ebenfalls an der Spezifität der Selektoren, '
ul#navigation li a' gewinnt gegen 'ul#navigation a:hover'.Für
:hoversolltest du nur die Änderungen angeben,color:#fffmuss da weg.LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)