nicht angemeldet
Navigation
hallo miteinander :)
ich habe ein kleines / grösseres problem mit einer css-navigation. hoffe, jemand kann mir einen guten tipp geben!
ich habe eine navigation, die mit einem hintergrund unterlegt ist:
********************
******HOMEPAGE****** Zustand A
********************
nun möchte ich, wenn der benutzer darüberfährt, dass sich dieser ändert,
gleichzeitig soll sich aber auch die linkfarbe ändern:
####################
######homepage###### Zustand B
####################
soweit einmal die theorie. der button ist in einer tabelle und wird über eine id "#main-navigation" gesteurt. diese sagt aus, wie Zustand A sein soll. zusätzlich gibt es noch ein "#main-navigation a", die den link definiert, da dieser anders aussieht als auf textseiten. klappt soweit auch.
mit der funktion ":hover" also "#main-navigation:hover" lasse ich den hintergrund in Zustand B übergehen. gleichzeitig geht mit der entsprechenden "a:hover"-funktion auch der link in zustand b - allerdings erst, wenn der benutzer über dem titel "HOMEPAGE" ist.
dies soll aber bereits geschehen, wenn er auf dem hintergrund ist (####). wie mache ich das, dass sich beides gleichzeitig ändert?
ich hoffe, ich konnte mein problem einigermassen klar und anschaulich darlegen.. :)
grüsse - martin e.
-
Hi,
mit der funktion ":hover" also "#main-navigation:hover" lasse ich den hintergrund in Zustand B übergehen. gleichzeitig geht mit der entsprechenden "a:hover"-funktion auch der link in zustand b - allerdings erst, wenn der benutzer über dem titel "HOMEPAGE" ist.
dies soll aber bereits geschehen, wenn er auf dem hintergrund ist (####). wie mache ich das, dass sich beides gleichzeitig ändert?
indem Du das <a>-Element dann veränderst, wenn das #main-navigation-Element im :hover-Zustand ist. Du kannst das eine und das andere, jetzt musst Du nur noch beides zusammen machen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
also mit einem "#main-navigation:hover a"?
wow, klappt! danke vielmals.. das war ja so einfach - aber ich hab den wald vor lauter bäumen - oder den grundaufbau von css vor lauter code.. - nicht mehr gesehen und war schon am verzweifeln.
ein dreifach-hoch auf das self-forum.. hipp-hipp-hurra... ;)
martin e.
Hi,
mit der funktion ":hover" also "#main-navigation:hover" lasse ich den hintergrund in Zustand B übergehen. gleichzeitig geht mit der entsprechenden "a:hover"-funktion auch der link in zustand b - allerdings erst, wenn der benutzer über dem titel "HOMEPAGE" ist.
dies soll aber bereits geschehen, wenn er auf dem hintergrund ist (####). wie mache ich das, dass sich beides gleichzeitig ändert?
indem Du das <a>-Element dann veränderst, wenn das #main-navigation-Element im :hover-Zustand ist. Du kannst das eine und das andere, jetzt musst Du nur noch beides zusammen machen.
Cheatah
-
okay, das problem hat sich ja nun ganz einfach lösen lassen. ich sitz' aber bei meiner navigation nochmals ein wenig auf der leitung.....
links und rechts vom button habe ich *begrenzungslinien*. diese sind in einer eigenen zelle definiert:
| ******************** |
| ******HOMEPAGE****** | Zustand A
| ******************** |auch diese sollen bei entsprechender zustandsänderung (hover) eine andere farbe erhalten:
/ #################### \ / ######homepage###### \ Zustand B
/ #################### \wie lässt sich das nun bewerkstelligen, dass auch diese "devider" mit der id "#main-navigation:hover" reagieren?
danke vielmals für die hilfe.
martin e.
-
Hi,
links und rechts vom button habe ich *begrenzungslinien*.
Du meinst sicher border-left und border-right Deiner <li>-Elemente.
wie lässt sich das nun bewerkstelligen, dass auch diese "devider" mit der id "#main-navigation:hover" reagieren?
Exakt wie bisher.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
ist leider nix mit <li> gemacht.. aufbau in etwa so:
|zelle 1 mit devider links | zelle 2 mit button | zelle 3 mit devider rechts
..und ich verstehe nun nicht, wie ich diese von der mittleren zelle aus bedienen kann.
gruss, martin e.
Du meinst sicher border-left und border-right Deiner <li>-Elemente.
-
Hi,
ist leider nix mit <li> gemacht..
wieso das nicht? Handelt es sich etwa nicht um Listenelemente?
aufbau in etwa so:
Das ist keine Struktur, die irgendwie gezielt mit CSS beeinflussbar wäre.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
ich überdenke das ganze wohl lieber nochmals einen tag.. sollte ja eigentlich kein grosses problem sein. also, wenn ich nicht weiterkommen sollte, melde ich mich morgen wieder.....
vielen dank für all deine hilfe.
martin e.
-
-
-
-
-
-
Vielleicht hilft Dir http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm
-
danke für den tipp! das problem konnte ich ja nun mittlerweile lösen. dafür habe ich nun mit meinen *devidern* ein problem:
https://forum.selfhtml.org/?t=109062&m=680626martin e.
Vielleicht hilft Dir http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm
-
Lieber Martin,
dafür habe ich nun mit meinen *devidern* ein problem:
dieses Problem hast Du, da Du Dein Layout nicht mit CSS alleine, sondern mithilfe einer zweckentfremdeten HTML-Struktur (Tabelle) realisiert hast. Dadurch hast Du das Aussehen nicht vom Inhalt und seiner Struktur getrennt und kannst auch nicht mit CSS Deine *devider* steuern.
Eine Lösung wäre, komplett auf ein CSS-Layout umzusteigen und Deinen HTML-Code auf rein Strukturelles zu reduzieren. Dein Stichwort: Semantisches Markup. Daher kam Cheatah auch auf die Idee mit den <li>-Elementen!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-