nicht angemeldet
Der Martin
Matthias Apsel
Matthias Apsel
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Hallo Zusammen
Ich habe eine freaky CSS Frage. Ich möchte dies machen:
a:hover{
color: red;
background-color: #fff;
display: block;
div.test {background-color: #000;}
}
Ich denke dass geht so nicht, und ich muss JavaScript verwenden. Trotzdem die Frage in die Runde, ob man innerhalb einer CSS-Styles (a:hover) den Style eines anderen Objekts definieren kann.
Wenn der Code oben funktionieren würde (und was ich versuche zu machen), dann ist bei einem Hover über einen Link die Farbe des Linkes Rot und die Hintergrundfarbe davon weiss. Zeitgleich wird die Hintergrundfarbe des Divs mit der Klasse "test" schwarz. Wobei das Div irgendwo im Code liegen könnte.
Bin gespannt, aber mach mir nicht allzuviele Hoffnungen ;)
Thx a lot
Mahlzeit,
Bin gespannt, aber mach mir nicht allzuviele Hoffnungen ;)
Das geht z.B. mit Sass. Daraus wird dann "echtes" CSS automatisch gemacht.
ob man innerhalb einer CSS-Styles (a:hover) den Style eines anderen Objekts definieren kann.
Wobei das Div irgendwo im Code liegen könnte.
Das geht z.B. mit Sass. Daraus wird dann "echtes" CSS automatisch gemacht.
Ich habe die Sass-Anleitung jetzt nur überflogen, aber wenn aus Sass, wie du schreibst, nur CSS gemacht wird, dann kannst du logischerweise auch mit Sass nichts machen, was schon mit CSS selbst nicht geht.
Um einem Element B, das vom Element A vollkommen unabhängig ist (d.h. mit CSS-Regeln nicht von A aus erreichbar) eine Eigenschaft zuzuweisen, sobald A aktiv wird (hier: :hover), braucht man Javascript. Anders geht es nicht.
Hallo Ralf
Vielen Dank für deine Antwort. Das habe ich mir eben auch gedacht.
Ich habe aus dem Div nun ein Span-Element gemacht, und dieses in den Link integriert.
Was ich eben versuche zu machen, ist ein aufklappbares Menü, dass ohne JavaScript funktioniert. Ist freaky aber funktioniert so.
Es gibt dabei nur 2 Probleme:
a) Zurzeit sieht man den Link innerhalb des Spans nicht. Mal gucken, ob ich das noch hinkriege. Das wäre natürlich ein Must-Have/Voraussetzung.
b) es geht nur als Alternative zu Javascript. Also wenn jemand JavaScript deaktiviert hat. CSS muss dafür entsprechend via <noscript> eingebunden werden. Der Grund dafür ist, dass es "nur via CSS" sehr Maus-Sensitiv ist. Es funktioniert zwar, aber man muss sehr ruhig über den (ersten) Link fahren. Und welcher Internet User ist schon nicht wild und ungeduldig am herumklicken ;-D
Vielleicht habt ihr zu den beiden Punkten noch Inputs. Ich kann eben leider nicht dass Span-Element unter den Link legen (trotz z-index). Ich denke, dass liegt daran, dass es Teil des Links ist.
Hier noch meine Codes:
<nav id="main">
<a href="" accesskey="1" title="">Ausgangslage<span class="subnav"><a href="" class="a">asdasd</a><span></a>
</nav>
#main{background-color: #000; width: 59.2em; font-size:1em; color:#fff; height:1.6em; z-index:2; vertical-align: baseline; text-align:center; padding:0.2em 0.4em 0em 0.4em; margin:0em 0em 0em 0em; display: block;}
#main a{margin:0em 0.8em 0em 0.8em;font-weight:bold; color:#fff; text-decoration:none; z-index:5;}
#main a:hover{color: #99ccff;}
#main {position: relative; top:0em; }
#main a .subnav, .a {display: none;}
#main a:hover .subnav {display: block; position:absolute; top: 0.1emem; width: 10em; height: 3em; background-color: #000; z-index:2; color:#FFF;}
#main a:hover .subnav .a {display: block; position:absolute; width: 10em; height: 3em; z-index:4; color:#FFF;}
#main a:hover .a {color:#FFF; display: block; z-index:3;}
#main a:hover .a:hover {color:# F00; display: block;}
P.s. ist eigentlich erstaunlich, dass so viel überhaupt geht.... :-) I love CSS :)
Hallo,
<nav id="main">
<a href="" accesskey="1" title="">Ausgangslage<span class="subnav"><a href="" class="a">asdasd</a><span></a>
</nav>
das ist invalides HTML. Zwär hätte HTML 5 sogar erlaubt, ein Blockelement (div) in einen Link zu setzen; du hättest also sogar beim div-Element bleiben können. Was aber nicht erlaubt ist: Ein a-Element \*innerhalb\* eines weiteren a-Elements. Das verbietet sich eigentlich schon von der Logik her: Welchem der beiden Links soll ein Browser beim Anklicken folgen?
Abgesehen davon gibt es zahlreiche CSS-Only-Klappmenüs - ich wundere mich, dass du versuchst, selbst eins auf die Beine zu stellen, anstatt eines der vielen existierenden als Vorlage zu nehmen.
> P.s. ist eigentlich erstaunlich, dass so viel überhaupt geht.... :-) I love CSS :)
Oh ja, die Möglichkeiten von CSS sind beeindruckend-
Ciao,
Martin
--
Politik ist die Kunst, die Menschen so zu bescheißen, dass sie auch noch glauben, sie hätten das selbst so gewollt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
ich wundere mich, dass du versuchst, selbst eins auf die Beine zu stellen, anstatt eines der vielen existierenden als Vorlage zu nehmen.
Aus Spass an der Sache :)
Aber ja, das mit doppel Link ist mir auch aufgefallen :)
Abgesehen davon gibt es zahlreiche CSS-Only-Klappmenüs
Hast du ein gutes Beispiel? Link?
Vielen Dank!
Om nah hoo pez nyeetz, Cssler!
ich wundere mich, dass du versuchst, selbst eins auf die Beine zu stellen, anstatt eines der vielen existierenden als Vorlage zu nehmen.
Aus Spass an der Sache :)
Die Grundidee ist, verschachtelte Listen zu verwenden. http://meine-geburtstage.de/
Hast du ein gutes Beispiel? Link?
wiki JavaScript erhöht in diesem Beispiel lediglich den Komfort.
Matthias
Vielen Dank für den Tipp.
Das Problem:
Listen für Navigation entsprechen nicht dem semantischen Ansatz (Verwende Elemente für was sie gedacht sind). Ich weiss, viele/alle nutzen die Listenelemente für die Navigation. Eine Navigation (im semantischen Webprog., auch oder insbesondere HTML5) besteht aber nur aus Links.... Will Website mittels "Semantic HTML5" umsetzen.
Om nah hoo pez nyeetz, Cssler!
Listen für Navigation entsprechen nicht dem semantischen Ansatz (Verwende Elemente für was sie gedacht sind). Ich weiss, viele/alle nutzen die Listenelemente für die Navigation. Eine Navigation (im semantischen Webprog., auch oder insbesondere HTML5) besteht aber nur aus Links.... Will Website mittels "Semantic HTML5" umsetzen.
Einspruch: Eine Navigation _ist_ eine Liste von Links. Inbesondere wenn du noch eine Hierarchie einbaust.
Matthias
Einspruch: Eine Navigation _ist_ eine Liste von Links. Inbesondere wenn du noch eine Hierarchie einbaust.
Jein, die (Link-) Liste ist ja auf allen Seiten und somit nicht Teil des Inhalts. Aber weiss was du meinst, machte dies früher auch so. Ist nicht (grundsätzlich) falsch. Will es nun aber anders machen (mittels <nav>, welches die "Liste" ersetzt). U.a. auch weil ich Linklisten haben werde, also im Inhalt, welche auch tatsächliche, sichtbare Listen sind (nummerierte Listen).
Befolge diesmals also den semantischen Ansatz ganz streng ;)
Grössere Herausforderung wird übrigens das HTML5-Markup sein, das in alten Browsern (insbesondere IE) nicht geht, da die den body-Tag voraussetzen, welcher in HTML5 nicht mehr notwendig ist.
Kann dir diese Seite dazu (HTML5) empfehlen, sehr schön. Ist ein alter Hut...
The Uncomplicated Web
http://daten.dieweltistgarnichtso.net/tmp/docs/the-uncomplicated-web.html
Kennst du auch reine CSS-Aufklappmenüs ohne Einsatz von Listen (ul und li-HTML-Elemente)?
Viele Grüsse
Om nah hoo pez nyeetz, Cssler!
Jein, die (Link-) Liste ist ja auf allen Seiten und somit nicht Teil des Inhalts.
Deshalb kommt die Navigation ja auch in ein nav-Element, welches nicht die Liste ersetzen soll, wohl aber ersetzen kann. Es könnte beispielsweise auch noch eine Überschrift mit hinein.
U.a. auch weil ich Linklisten haben werde, also im Inhalt, welche auch tatsächliche, sichtbare Listen sind (nummerierte Listen).
Was hat das eine mit dem anderen zu tun?
Befolge diesmals also den semantischen Ansatz ganz streng ;)
Semantik liegt auch im Auge des Betrachters.
Grössere Herausforderung wird übrigens das HTML5-Markup sein, das in alten Browsern (insbesondere IE) nicht geht, da die den body-Tag voraussetzen, welcher in HTML5 nicht mehr notwendig ist.
War er auch in HTML4.01 nicht.
Kennst du auch reine CSS-Aufklappmenüs ohne Einsatz von Listen (ul und li-HTML-Elemente)?
Ich wüsste nicht, warum man eine Funktionalität, die der Einsatz von Listen mitbringt, nachbauen sollte. Theoretisch kannst du die ul- und li- durch div- oder span-Elemente ersetzen, ihnen display block/inline/list-item verpassen. Aber warum sollte man das wollen? Wenn das deine Auffassung von Semantik ist, bitteschön. (Was zum Lesen, falls du magst)
Matthias
Hi Matthias
Was hat das eine mit dem anderen zu tun?
Semantische Website für Suchmaschinen. Wobei Mann auch übertreiben kann :-)
Semantik liegt auch im Auge des Betrachters.
Absolut! Zumindest auf dem Niveau, auf dem wir hier dies gerade besprechen :) Thx!
Aber warum sollte man das wollen? Wenn das deine Auffassung von Semantik ist, bitteschön.
Ist es nicht. Wollte nur versuchen, wie weit ich mit CSS gehen kann und ob ich Listen wirklich brauche. Der Punkt ist ja / war ja gar nicht die Listen, sondern aufklappbare Menüs ohne JS. Wie ich es nun machen kann, weiss ich. Ob ich dazu Listen verwende - mal schauen. Ich denke ich löse es sowieso anders, da ich auch eine Lösung für Mobile am machen bin (wo der Benutzer ja nicht drüberfahren (Hover) fahren kann, sondern klickt und via JS das Menü geöffnet wird). Da gibt es aber schöne Alternativen, für alle (Wenige), welche nicht JS aktiviert haben...
Vielen Dank für die gute inhaltiche und vorallem auch konstruktive Diskussion :-)
Om nah hoo pez nyeetz, Cssler!
Semantische Website für Suchmaschinen. Wobei Mann auch übertreiben kann :-)
Dafür solltest du eine sitemap vorhalten.
Matthias
Mahlzeit,
Ist es nicht. Wollte nur versuchen, wie weit ich mit CSS gehen kann und ob ich Listen wirklich brauche.
Du kannst in einem Auto auch das Lenkrad rausbauen und mit nem 32er Gabelschlüssel fahren.
Willst du das auch versuchen?
Was für ein konstruktiver Beitrag, Lieber M.
Ich wollte es versuchen, weil ICH das wollte.
ich habe nicht gefragt, ob ihr das Sinnvoll findet, sondern bat um Hilfe bei der Umsetzung meines Versuchs.
P.s. ja klar geht das, ich kann das Auto anstelle eines Lenkrades auch mit zwei Schnürren/Kabeln steuern :D
Hallo,
P.s. ja klar geht das, ich kann das Auto anstelle eines Lenkrades auch mit zwei Schnürren/Kabeln steuern :D
Und? Würdest _Du_ das für sinnvoll erachten?
Gruß
Kalk
Hallo M. Hallo Tabellenkalk
Zu euren Fragen:
Ich wollte es verstehen. D.h mit eigenen Worten, Gedanken und somit es nachvollziehen können.
Um beim Beispiel des Autos zu bleiben:
Wenn du ein Auto selber nachbauen willst, ist es hilfreich, wenn du alles verstehst. heute wird oftmals nur von etwas gegeben ausgegangen. Wenn du aber weisst, dass bei Kutschen es zwei Seile gab, um dem Pferd links und rechts anzugeben, so wird dir dies helfen, zu verstehen, wie das Lenkrad des Autos danach auf die Achsen / Räder zugreift, und warum es z.B. dabei eine "Übersetzung" gibt.
Natürlich musst du nicht so weit zurück (zum Pferd, und zur Kuthsche). Aber du darfst, wenn es dir für das Verständnis hilft.
Ich finde es gerade in der heutigen Zeit wichtig zu wissen und zu verstehen, d.h. in eigenen Worten und Gedanken es auszudrücken und somit nachvollziehen können, wie was funktioniert. Frage mal bei Informatiker nach, wie ein PC funktioniert. Wenn du nachhackst und ganz tieft gehst, landest du irgendwann bei simpler Elektronik (Gleich und Wechselstrom etc). Viele werden dir dies dann aber nicht erklären können, sondern gehen irgendwann von was gegeben aus und antworten dir: Es ist nun mal so, warum brauchst du das zu wissen. Das ist gefährlich, da bald wohl niemand mehr weiss, wie das von Menschen erschaffene im Detail funktioniert.
Und noch zu deiner Frae M:
Ich habe dabei gemerkt, auch dank euren vorherigen konstruktiven Antworten, dass es für mich kein Sinn macht. Der Grund dafür sind die mobilen Geräte. Wenn dort das JS deaktiviert ist, geht es auch mit Mouseover nicht (da dies bei Touch-Bedienungen nicht geht). Für das hatte ich aber bereits eine Lösung. Ist mir gestern aber nicht (mehr) in den Sinn gekommen bzw war mir nicht sofort bewusst - und ich hatte mich verkranft auf die Desktop-Version.
Wenn ein User meiner neuen Website also JS deaktiviet hat, bekommt er die Mobile Lösung (bei deaktiviertem JS) auf auf dem Desktop angeboten. Ist nicht neuer Content, sondern einfach die Volle Navigation, die dann bereits pro Seite geöffnet ist (aber nur jeweils nur die Navigationslinks der jeweiligen Hauptkategorie pro Seite)
Mahlzeit,
Wenn du ein Auto selber nachbauen willst, ist es hilfreich, wenn du alles verstehst. heute wird oftmals nur von etwas gegeben ausgegangen. Wenn du aber weisst, dass bei Kutschen es zwei Seile gab, um dem Pferd links und rechts anzugeben, so wird dir dies helfen, zu verstehen, wie das Lenkrad des Autos danach auf die Achsen / Räder zugreift, und warum es z.B. dabei eine "Übersetzung" gibt.
Du willst dabei aber erstmal probieren, ob ein Auto auch funktioniert, wenn die die Räder abmontierst und aufs Dach schnallst.
Dass das nicht funktioniert, musst du nicht testen, das erweitert dein Wissen nicht soweit, dass es den Aufwand kompensiert.
Das sind Dinge, die kannst du dir anlesen ohne mit Gewalt zu versuchen, etwas offensichtlich sinnloses nachzustellen um die Sinnlosigkeit denen zu beweisen, die es schon wissen ;)
Ich finde es gut, etwas verstehen zu wollen, das ist heute viel zu selten. Aber dennoch gilt es IMO abzuwägen, was dabei sinnvoll ist und was nicht. Das Rad gibt es schon, es muss nicht nochmal erfunden werden, da man dessen Funktion auch anders erlernen kann :)
Hallo,
Ich finde es gut, etwas verstehen zu wollen, das ist heute viel zu selten. Aber dennoch gilt es IMO abzuwägen, was dabei sinnvoll ist und was nicht. Das Rad gibt es schon, es muss nicht nochmal erfunden werden, da man dessen Funktion auch anders erlernen kann :)
das unterschreibe ich mit. Ergänzend noch:
Interesse an einer Sache ist gut; eine gewisse Neugier ist hilfreich, wenn nicht gar nötig, wenn man etwas wirklich verstehen will. Und doch sollte man irgendwo eine Grenze ziehen, über die man nicht noch weiter bis zu den Grundlagen vordringen muss.
Diese Grenze liegt natürlich für jeden an einer anderen Stelle, und auch bei derselben Person liegt sie je nach Thema vollkommen unterschiedlich: Als Elektroniker muss ich wissen, wie ein FET funktioniert und wie ich ihn verwende. Wie er hergestellt wird, muss mich aber nicht interessieren - und jemand anders weiß nicht einmal, was das überhaupt ist und ist damit auch zufrieden. Ein Hundezüchter will und muss den Stammbaum seiner Lieblinge einige Generationen in die Vergangenheit verfolgen, für den Hundenarr ist das nebensächlich: "Och ist der süüß! Wie lieb der mich anguckt!"
Was wollte ich damit eigentlich sagen? - Ach ja: Wenn jemand ein Thema bis ins Detail "back to the roots" verfolgen will, mag er das gern tun. Das Rad nochmal erfinden, nur wegen des Erfolgserlebnisses? Bitte, gern. Nur sollte derjenige dann nicht voraussetzen, dass andere ihn mit dem gleichen Enthusiasmus begleiten wollen. Was dem einen Spannung und Kurzweil gibt, ist für den andern vergeudete Zeit.
So long,
Martin
Mahlzeit,
Ich wollte es versuchen, weil ICH das wollte.
Aber auf die Frage, ob du es für sinnvoll hälst, antwortest du nicht? Die Frage war explizit an DICH gerichtet.
@@Cssler:
nuqneH
P.s. ist eigentlich erstaunlich, dass so viel überhaupt geht.... :-) I love CSS :)
Du wirst staunen, was schon ohne CSS geht, wenn du dir die details- und summary-Elemente ansiehst. (Features at risk.)
Qapla'
Mahlzeit,
Ich habe die Sass-Anleitung jetzt nur überflogen, aber wenn aus Sass, wie du schreibst, nur CSS gemacht wird, dann kannst du logischerweise auch mit Sass nichts machen, was schon mit CSS selbst nicht geht.
Wer sagt denn, dass es per CSS gar nicht geht?
Es ging doch um die Verschachtelung, die CSS nicht kann, aber von Sass nach CSS umgesetzt wird.
Oder hab ich irgendwo überlesen, dass das Problem mit CSS generell nicht lösbar ist?
Hallo,
Oder hab ich irgendwo überlesen, dass das Problem mit CSS generell nicht lösbar ist?
ja, möglicherweise. Im Startposting findet man den unscheinbaren Hinweis:
Zeitgleich wird die Hintergrundfarbe des Divs mit der Klasse "test" schwarz. Wobei das Div irgendwo im Code liegen könnte.
Mit anderen Worten: Der Cssler möchte im Falle von a:hover auch Eigenschaften eines anderen Elements ändern, das aber im DOM keine Beziehung zum gehoverten Link hat.
Oder hast du eine Idee, wie das doch mit CSS allein möglich ist? Also ich nicht.
Ciao,
Martin
Mahlzeit,
Oder hast du eine Idee, wie das doch mit CSS allein möglich ist? Also ich nicht.
Stimmt, das hab ich echt überlesen.
Ich möchte dies machen:
a:hover{
...
div.test {background-color: #000;}
}
CSS bedeutet Cascading Style Sheets, es gibt also Objekte ausserhalb der Cascade, die mit CSS nicht erreichbar sind.
Trotzdem die Frage in die Runde, ob man innerhalb einer CSS-Styles (a:hover) den Style eines anderen Objekts definieren kann.
Ja, wenn es Teil der eigenen Cascade ist. So funktionieren geschachtelte CSS-Menüs. Wenn man die oberste Schachtel mit der Maus überstreicht, werden die untergeordneten Schachteln eingeblendet.
Bin gespannt, aber mach mir nicht allzuviele Hoffnungen ;)
Wie immer, muss man die eigene Umgebung verstehen und nutzen.
Linuchs
Ich möchte dies machen:
a:hover{
...
div.test {background-color: #000;}
}CSS bedeutet Cascading Style Sheets, es gibt also Objekte ausserhalb der Cascade, die mit CSS nicht erreichbar sind.
Mit der Kaskade sind eigentlich nicht die CSS-Regeln bzw. -Selektoren gemeint (sonst würde es Cascading Style Rules oder Selectors heissen), sondern die Möglichkeit, an mehreren Stellen Angaben machen zu können, die sich ergänzen bzw. überschreiben: Die Gestaltungsvorgaben des Browsers werden überschrieben von den Vorgaben, die der Browser-Benutzer macht, dann von denen, die im Dokument eingebunden werden und jenen, die im Dokument selbst angegeben sind und schließlich jene beim Element selbst (style-Attribut).
Siehe http://www.w3.org/TR/CSS21/intro.html#design-principles, "Flexibility"
@@Linuchs:
nuqneH
es gibt also Objekte ausserhalb der Cascade, die mit CSS nicht erreichbar sind. […]
Ja, wenn es Teil der eigenen Cascade ist. So funktionieren geschachtelte CSS-Menüs. Wenn man die oberste Schachtel mit der Maus überstreicht, werden die untergeordneten Schachteln eingeblendet. […]
Wie immer, muss man die eigene Umgebung verstehen und nutzen.
Ähm ja. Und ich glaube nicht, dass du verstanden hast, was „Kaskade“ bedeutet.
Du verwechselst Kaskade mit DOM-Baum.
Qapla'