nicht angemeldet
Linkeigenschaften / FX
1 0 0 0 0 
Gunnar Bittersmann
0 0 0 Gunnar Bittersmann
0
0
Linkeigenschaften / FX
Hallo zusammen,
Auf meiner im bau befindlichen Homepage
http://www.vam-shop.com/menu.htm
Möchte ich Text und dahinter Links anbringen (Grosse weisse Box).
Ich habe mir sowas vorgestellt:
blablabla link a
blablabla > link b <
blablabla link c
blablabla link d
Das heisst die Spitzklammer soll bei hover an den überflogenen Link erscheinen. Also hier wäre jetz link b ausgewählt.
Kann man im CSS
#navioben a:hover {
text-decoration: underline;
}
das underline umformatieren, so dass Anstelle der Unterstreichung die besagten Spitzklammern vor und hinter dem Link auftauchen?
Oder wird die Sache ähnlich kompliziert wie bei den Navibutton unten?
Viele Grüsse
gary
-
Mahlzeit,
Das heisst die Spitzklammer soll bei hover an den überflogenen Link erscheinen. Also hier wäre jetz link b ausgewählt.
Du meinst ungefähr so?
<html> <head> <title>Test</title> <style type="text/css"> [code lang=css] body { font-family: Arial; } a { text-decoration: none; } a span { visibility: hidden; } a:hover span { visibility: visible; }</style>
</head><body>
blablabla <a href="foobar.html"><span>></span> dideldei <span><</span></a>
</body>
</html>
[/code]MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Hallo Ekki, (und so schnell !)
Du meinst ungefähr so?
Ja genau so!
Das a und das a:hover habe ich aber bereits in der invmenu.css verbaut. Kann ich auch a's eine Klasse geben und gleichermassen a:hover ?
Sorry Anfänger eben...
Viele Grüsse
gary
PS.: Was ist in dem Fall besser: Das style element im html oder auch in die gleiche css packen?
-
Hallo nochmal,
Habe vor lauter Euphorie vergessen mich anständig zu bedanken:
Vielen, vielen Dank. War eine 100 Punkte Antwort. :-)
Grüsse gary
-
Moin!
Das a und das a:hover habe ich aber bereits in der invmenu.css verbaut. Kann ich auch a's eine Klasse geben und gleichermassen a:hover ?
aber sicher.
a.bla:hover
PS.: Was ist in dem Fall besser: Das style element im html oder auch in die gleiche css packen?
style-Elemente sollten (möglichst) gar nicht verwendet werden. Vermischung von Markup und Gestaltung und man muß Änderungen wieder an verschiedenen Stellen machen statt zentral.
Cü,
Kai
--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]-
Hi Kai,
a.bla:hover
Gut verstanden - wird heute abend in einer ruhigen Minute getestet.
style-Elemente sollten (möglichst) gar nicht verwendet werden. Vermischung von Markup und Gestaltung und man muß Änderungen wieder an verschiedenen Stellen machen statt zentral.
Ja, mach ich eigentlich auch immer so. Weis gar nicht, warum ich sowas frage...
Grüsse
gary
-
-
@@gary:
Das a und das a:hover habe ich aber bereits in der invmenu.css verbaut.
Na und?
Du kannst in einem Stylesheet sowohl mehrere Regeln mit gleichem Selektor haben
foo {eigenschaft1: wert1} bar {eigenschaft2: wert2} foo {eigenschaft3: wert3} /* neu hinzugekommene Regel */als auch Deklarationen im bestehenden Stylesheet ergänzen (was der Übersichtlichkeit des Stylesheets zugutekommen dürfte)
foo { eigenschaft1: wert1; eigenschaft3: wert3; /* neu hinzugekommene Deklaration */ } bar { eigenschaft2: wert2; }Kann ich auch a's eine Klasse geben und gleichermassen a:hover ?
Wozu??
PS.: Was ist in dem Fall besser: Das style element im html oder auch in die gleiche css packen?
Wenn du schon ein externes Stylesheet hast, dann machst du Ergänzungen natürlich dort, nicht im HTML-Dokument.
Es sei denn, es gibt CSS-Regeln, die nur in einem Dokument gelten sollen; nicht aber in anderen, die mit demselben externen Stylesheet formatiert werden. Dann könnten die Abweichungen im 'style'-Element stehen. Aber auch im externen Stylesheet:
<body id="baz">#baz foo {eigenschaft: wert}bzw.
<body class="quz">.quz foo {eigenschaft: wert}Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
-
-
-
Yerf!
#navioben a:hover {
text-decoration: underline;
}das underline umformatieren, so dass Anstelle der Unterstreichung die besagten Spitzklammern vor und hinter dem Link auftauchen?
Das underline umformatieren nicht... aber mittels Pseudoelementen könnte man vor und nach dem Link zusätzlichen Text generieren. "Könnte" deshalb, weil der IE das mal wieder nicht kann...
Oder wird die Sache ähnlich kompliziert wie bei den Navibutton unten?
Hm, man könnte ein entsrechendes Hintergrundbild verweden, das muss dann alerdings immer an die Länge des Linktextes angepasst werden.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Hi Harlequin,
Das underline umformatieren nicht... aber mittels Pseudoelementen könnte man vor und nach dem Link zusätzlichen Text generieren. "Könnte" deshalb, weil der IE das mal wieder nicht kann...
EKKI hat < und > verwendet. Das müsste doch auch der IE anzeigen, oder?
In deinem Link "Pseudoelement" heisstes lediglich das die Zeichen < = \2039 sowie > = \203A im IE nicht unterstütz werden.
Lange Rede kurzer Sinn: Geht die von EKKI gezeigte Methode auch im IE?
Viele Grüsse
gary
-
@@gary:
In deinem Link "Pseudoelement" heisstes lediglich das die Zeichen < = \2039 sowie > = \203A im IE nicht unterstütz werden.
Schau nochmal nach!
Was steht da unter „Beachten Sie:“?
Und siehst du in der Liste der Icons der Browser, die das unterstützen, das IE-Icon?
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)-
Hi Gunnar,
Da geht es um automatische Anführungszeichen und um "after" und "before".
Ekki kleidet aber den Link in HTML-Zeichen < sowie >. Die zeigt doch auch der IE an oder?
Ich kann es, da der andere PC nicht da ist (der mit IE) nicht testen...
Grüsse gary
-
@@gary:
Da geht es um automatische Anführungszeichen
?? Bist du einen Abschnitt zu tief gerutscht?
und um "after" und "before".
Eben. Lies nochmal nach: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after (Icons, „Beachten Sie“)
Live long and prosper,
Gunnar--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)-
Hi Gunnar,
und um "after" und "before".
Eben. Lies nochmal nach: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after (Icons, „Beachten Sie“)
Da ist kein IE Logo. Und laut Text gehen diese Dinge nicht im IE. Aber über span steht dort nichts. Das heisst span geht im IE?
Viele Grüsse
gary
-
Hi Gunnar,
Jetzt habe ich was gefunden:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#
Das Problem ist nicht die Spitzklammer oder das span, sondern der hover. Der nämlich geht bis Version 6 nicht. Und ohne hover auch keine span-Einlage.
Viele Grüsse
gary
-
Hi,
Jetzt habe ich was gefunden:
Jetzt musst du nur noch irgendwann mal lernen, Gefundenes auch in den richtigen Kontext einzuordnen und dann richtig zu verstehen :-) (Ja, diesmal fuer dich mit Smilie.)
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#
Das Problem ist nicht die Spitzklammer oder das span, sondern der hover. Der nämlich geht bis Version 6 nicht. Und ohne hover auch keine span-Einlage.
:hover fuer Linkelemente koennen auch IEs <= 6.
Und um genau das geht's hier doch, dein Thema war ja "Linkeigenschaften".Und der Nachfahrenselektor "unterhalb" eines gehoverten Links funktioniert im IE <= 6 auch - mit kleinen Einschraenkungen bzw. einer kleinen Nachhilfe, siehe u.a. http://www.quirksmode.org/css/ie6_purecsspopups.html
MfG ChrisB
-
Hallo ChrisB,
Der quirksmode- Link ist mal gespeichert. Damit ich den IE, falls Probleme auftauchen, auch noch bearbeiten kann.
Nun, eure Vorschläge wurden mal entsprechend angepasst und teils in die CSS, teils in den Html-Code eingebaut:
http://www.vam-shop.com/menu.htm
Nun sind die beiden Pfeilchen rechts und links nett anzusehen. Aber aufgrund der Textlänge gehen die fast unter. Deshalb habe ich mir folgendes gedacht:
1. Ich könnte den Linktext bei hover zusätzlich komplett hinterleuchten, so wie mit einem Textmarker makiert.
2. Ich könnte den Linktext bei hover zusätzlich oben und unten mit einer Linie versehen.
In beiden Fällen müsste ich wahrscheinlich die Links in eine Tabelle packen?
Bei 1. dann bei hover den entsprechenden Tabellenhintergrund ändern. Dies hiesse für jede Tabellenzelle eine id und einen zugehörigen hover-Befehl...
Bei 2. mit der CSS-Tabelleneigenschaft border-top und border-bottom
bei hover aktivieren...Sehe ich das so richtig, das man für solche zusätzlichen Hervorhebungen eine Tabelle braucht?
Viele Grüsse
gary
-
Mahlzeit,
In beiden Fällen müsste ich wahrscheinlich die Links in eine Tabelle packen?
Wieso?
Bei 1. dann bei hover den entsprechenden Tabellenhintergrund ändern. Dies hiesse für jede Tabellenzelle eine id und einen zugehörigen hover-Befehl...
Bei 2. mit der CSS-Tabelleneigenschaft border-top und border-bottom
bei hover aktivieren..."background-color:" und "border:" funktionieren auch mit "a" als Selektor!
a:hover { background-color: #fcc; border-top: 1px solid #00f; border-bottom: 1px solid #00f; }Sehe ich das so richtig, das man für solche zusätzlichen Hervorhebungen eine Tabelle braucht?
Nein. Wieso denkt bloß immer jeder sofort an Tabellen, wenn es um gestalterische Dinge geht ...
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Hallo EKKi,
Super! Jetzt hast du mir schon zweimal das leben gerettet ;-)
Und das innerhalb nur eines Thread's ;-)
Ich habe es jetzt online. So ist es viel besser mit der Erkennung was selektiert wurde.
Warum alle immer an Tabellen denken?
Keine Ahnung - weil Tabelen umrandet werden können,mit Rahmen-border... vielleicht deswegen. Ich hätte auch nicht gedacht, das a-Element auf background reagieren. Von der Logik her will der Mensch immer ein abgegrenztes Objekt haben (Tabelle/Div-Box). Wie gesagt - ich kann da nur spekulieren.
Dein Vorschlag arbeitet auf jeden Fall bestens! Vielen Dank nochmals...
Herzliche Grüsse
gary
-
-
-
-
-
-
-
-
-
Yerf!
EKKI hat < und > verwendet. Das müsste doch auch der IE anzeigen, oder?
Das kann auch der IE
In deinem Link "Pseudoelement" heisstes lediglich das die Zeichen < = \2039 sowie > = \203A im IE nicht unterstütz werden.
Hm, der Artikel sollte eigentlich aussagen, dass :before und :after (also die Pseudoelemente an sich) im IE nicht gehen.
Lange Rede kurzer Sinn: Geht die von EKKI gezeigte Methode auch im IE?
Sollte sie eigentlich, da sie ohne diese Pseudoelemente auskommt. Ehrlich gesagt bin ich selbst überrascht, diese Variente war mir noch nicht bekannt.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
CSS Teil
#hover2 a:hover{
text-decoration:underline;}#hover2 a .hover2a{display: none;}
#hover2 a:hover .hover2a{
display:inline;}Der HTML-Teil:
<p id="hover2">
<a href="#">
Das ist der TESTLINK <span class="hover2a">>Das ist der Testlink<</span>
</a>
</p>kannst das ja noch deinen wünschen entsprechend anpassen ;) ... zB bei active statt hover oder so
mfg,
markus