mit einem hover zwei stellen im doc ändern

[bebbi]

hi zusammen,
leider finde ich nicht den richtigen code für mein problem.
ich habe drei navigationsbuttons untereinander und eine überschrift. gefordert ist das sich bei einem mousovereffekt a, die schrift und hintergrundfarbe des buttons ändert und b, das gleiche bei der überschrift. d.h. jeder der drei buttons muß in sich die farbe ändern können aber gleichzeitig auch die der immer gleichen überschrift. den code für die drei buttons habe ich schon hinbekommen - das mit der überschrift funzt nicht...
hier der code bis jetzt:
ul#nav {
width : 115px;
margin : 0;
padding : 0;
position : absolute;
top : 46px;
left : 221px;
}

* html ul#nav {
width : 115px;
w\idth : 115px;
}

ul#nav li {
list-style : none;
}

ul#nav a {
display : block;
height : 17px;
text-decoration : none;
font-family : Helvetica, Arial, sans-serif;
font-size : 11px;
color : #00339B;
line-height : 17px;
padding-left : 8px;
background-color : #E1F0FF;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #FAFCFF;
}

* html ul#nav a {
width : 100%;
w\idth : 115px;
}

ul#nav a:hover {
background-color : #C4E1FF;
}

und html eben:

<ul id="nav">  
	<li><a href="unter.html">Philosophie</a></li>  
	<li><a href="diens.html">Arbeitsweise</a></li>  
	<li><a href="diens.html">Team</a></li>  
</ul>  

überschrift wäre sowas wie unternehmen...
siehe url:
http://www.earthquake-productions.com/unter.html

auf den dann ausgewählten seiten hebe ich die buttons dann mit <span> hervor.

erstmal tausend dank - vielleicht geht das ja überhaupt nicht

grüße aus dem süden der republik
frank

[Matthias Apsel]

Om nah hoo pez nyeetz, bebbi!

* html ul#nav {
width : 115px;
w\idth : 115px;
}

wo hast du denn das ausgegraben? Unterstützung für IE < 6 kannst du nun wirklich sein lassen. Dein Vorhaben funktioniert auch nicht, da CSS nicht rückwärts selektieren kann. Du könntest auf Javascript ausweichen oder folgenden Ansatz weiter verfolgen (der im IE6 allerdings nicht funktioniert, da dieser die Pseudoklasse :hover nur für a-Elemente unterstützt):

<div id="nav">  
  <h2>Navigation</h2>  
  <ul>  
    <li><a href=>...</a></li>  
    <li>...</li>        <!-- aktuelle Seite -->  
    <li><a href=...>...</a></li>  
  </ul>  
</div>

im CSS

#nav:hover h2 {...}

#nav a:hover {...}

dann ändert sich die Farbe der Überschrift bereits, wenn man sich auf der Überschrift oder einem Link befindet.

Matthias

[bebbi]

hi matthias, merci für das schnelle posting,

Om nah hoo pez nyeetz, bebbi!

was n das? :-))

* html ul#nav {
width : 115px;
w\idth : 115px;
}

wo hast du denn das ausgegraben? Unterstützung für IE < 6 kannst du nun wirklich sein lassen. Dein Vorhaben funktioniert auch nicht, da CSS nicht rückwärts selektieren kann. Du könntest auf Javascript ausweichen oder folgenden Ansatz weiter verfolgen (der im IE6 allerdings nicht funktioniert, da dieser die Pseudoklasse :hover nur für a-Elemente unterstützt):

soll ich das ganze teil einfach weglassen? ich hab das seit jahren so bzw. so ähnlich in alle meine css skripts eingebaut :-))

<div id="nav">

<h2>Navigation</h2>
  <ul>
    <li><a href=>...</a></li>
    <li>...</li>        <!-- aktuelle Seite -->
    <li><a href=...>...</a></li>
  </ul>
</div>

>   
> im CSS  
>   
> #nav:hover h2 {...}  
>   
> #nav a:hover {...}  
>   
> dann ändert sich die Farbe der Überschrift bereits, wenn man sich auf der Überschrift oder einem Link befindet.  
  
das ist die frage - bzw. ist die umsetzung so wie es jetzt ist (siehe link) in css überhaupt möglich ist. eigentlich soll sich ja nichts ändern wenn mann mit der maus auf die überschrift geht. jetzt ist es mit js gemacht - das soll aber geändert werden. kann man die verschiedenen divs in css nicht direkt ansprechen wie in js - vielleicht steh ich auch heute auf der leitung :-)  
auf jeden fall werd ich deine idee morgen auch mal verfolgen :-))  
  

>   
> Matthias  

dito from the very south of the republik....  

[Matthias Apsel]

Om nah hoo pez nyeetz, bebbi!

soll ich das ganze teil einfach weglassen? ich hab das seit jahren so bzw. so ähnlich in alle meine css skripts eingebaut :-))

* html für IE 6 ist ok.

<div id="nav">

<h2>Navigation</h2>
  <ul>
    <li><a href=>...</a></li>
    <li>...</li>        <!-- aktuelle Seite -->
    <li><a href=...>...</a></li>
  </ul>
</div>

> >   
> > im CSS  
> >   
> > #nav:hover h2 {...}  
> >   
> > #nav a:hover {...}  
> >   
> > dann ändert sich die Farbe der Überschrift bereits, wenn man sich auf der Überschrift oder einem Link befindet.  
  

> jetzt ist es mit js gemacht - das soll aber geändert werden. kann man die verschiedenen divs in css nicht direkt ansprechen wie in js -  
  
Ja, aber du kannst kein Element in Abhängigkeit seiner Kind-Elemente (oder im DOM folgende) selektieren.  
  

> das ist die frage - bzw. ist die umsetzung so wie es jetzt ist (siehe link) in css überhaupt möglich ist. eigentlich soll sich ja nichts ändern wenn mann mit der maus auf die überschrift geht.  
  
Lösungsvorschlag (obige HTML-Struktur, in HTML 5 besser <nav> statt <div id="nav">):  
  
~~~css
#nav a:hover:[link:http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Elemente_f.C3.BCr_generierten_Inhalt@title=after]  
{  
  display: block;  
  content: 'Überschrift';  
  color: ...;  
  [link:http://selfhtml.apsel-mv.de/position/position.html@title=position: absolute;]  
  top: ...;  
  left: ...;  
}  

Matthias

[ChrisB]

Hi,

Lösungsvorschlag (obige HTML-Struktur, in HTML 5 besser <nav> statt <div id="nav">):

#nav a:hover:[link:http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_%28Selektoren%29#Elemente_f.C3.BCr_generierten_Inhalt@title=after]

{
  display: block;
  content: 'Überschrift';

  
So einen wichtigen Bestandteil der Dokumentstruktur aus dem Dokument entfernen, und nur per CSS einfügen? Keine gute Idee.  
  

> Ja, aber du kannst kein Element in Abhängigkeit seiner Kind-Elemente (oder im DOM folgende) selektieren.  
  
Aber nachfolgende Siblings in Abhängigkeit von einem gehoverten Element.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Matthias Apsel]

Om nah hoo pez nyeetz, ChrisB!

So einen wichtigen Bestandteil der Dokumentstruktur aus dem Dokument entfernen, und nur per CSS einfügen? Keine gute Idee.

nein, die Überschrift dort lassen und die gehoverte über die originale legen.

Aber nachfolgende Siblings in Abhängigkeit von einem gehoverten Element.

du meinst

<nav>  
  <ul>...</ul>  
  <h2>...</h2>  
</nav>

und

ul + h2?

Matthias

[ChrisB]

Hi,

nein, die Überschrift dort lassen und die gehoverte über die originale legen.

Ach, OK.
Das funktioniert aber wohl nur, wenn man die Position des Originals „kennt“.

Aber nachfolgende Siblings in Abhängigkeit von einem gehoverten Element.

du meinst

<nav>

<ul>...</ul>
  <h2>...</h2>
</nav>

>   
> und  
>   
> `ul + h2`{:.language-css}?  
  
Damit hätte man ja noch keine unterschiedlichen Zustände für die einzelnen Menüpunkte.  
  
Damit ein sibling combinator verwendet werden kann, muss die Überschrift allerdings auf gleicher Ebene stehen wie die Menüpunkte – also auch nicht wirklich optimal.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[Matthias Apsel]

Om nah hoo pez nyeetz, ChrisB!

nein, die Überschrift dort lassen und die gehoverte über die originale legen.

Ach, OK.
Das funktioniert aber wohl nur, wenn man die Position des Originals „kennt“.

sollte man wohl bei der Struktur <nav><h2></h2><ul>...

Aber nachfolgende Siblings in Abhängigkeit von einem gehoverten Element.

du meinst

<nav>

<ul>...</ul>
  <h2>...</h2>
</nav>

> >   
> > und  
> >   
> > `ul + h2`{:.language-css}?  
>   
> Damit hätte man ja noch keine unterschiedlichen Zustände für die einzelnen Menüpunkte.  
  
eben  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[ChrisB]

Hi,

Damit hätte man ja noch keine unterschiedlichen Zustände für die einzelnen Menüpunkte.

eben

Das sollte nicht heißen, dass es damit nicht machbar wäre – nur nicht so, wie du es vorgeschlagen hast :-)

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

nein, die Überschrift dort lassen und die gehoverte über die originale legen.

Ach, OK.
Das funktioniert aber wohl nur, wenn man die Position des Originals „kennt“.

Und auch nur, wenn man den Text des Originals „kennt“. Soll heißen: Bei Änderung des Inhalts im Markup muss man auch das Stylesheet ändern. Auch nicht der Weisheit letzter Schluss.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, bebbi!

Wenn du tatsächlich planst, Internetlösungen zu verkaufen, solltest du _dringend_ an deinem know-how arbeiten!

* Tabellendesign
* Grafiken für Hintergründe, die nicht notwendig sind
* valides HTML
* JavaScript, das Browserabstürze verursacht
* fehlerhafter Doctype impliziert Quirksmodus

Matthias

[MudGuard]

Hi,

* Tabellendesign
* Grafiken für Hintergründe, die nicht notwendig sind
* valides HTML
* JavaScript, das Browserabstürze verursacht
* fehlerhafter Doctype impliziert Quirksmodus

* es wird ein Java-Applet gestartet

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

* Tabellendesign
* Grafiken für Hintergründe, die nicht notwendig sind
* valides HTML
* JavaScript, das Browserabstürze verursacht
* fehlerhafter Doctype impliziert Quirksmodus

* es wird ein Java-Applet gestartet

* kein zuängliches Impressum (nur per JavaScript, nur ohne Firebug)

Qapla'

[bebbi]

hi zusammen,
soviel mitgefühl ehrt mich...
diese site stammt aus den tiefen des letzten jahrhunderts und hob sich seinerzeit wohltuend vom generatoren schrott ala frontpage - was seinerzeit durchaus üblich war - ab. wir waren hauptsächlich an vrml interessiert und arbeiteten mit homesite - das alle gibt es heute nicht mehr... nach vielen jahren von diversen projekten und anderen prioritäten habe ich mich jetzt entschlossen das teil - hauptsächlich zu übungszwecken - neu aufzusetzen. eigentlich will ich mir später typo3 oder ähnliches was es früher nicht gab anschauen.
über jegliche anregung freue ich mich - um so besser wird das endprodukt :-))
die neue site enthält:

• kein tabellenlayout
• kein js
• keine gestückelten pics
• natürlich den korrekten doctype
• und natürlich ein ohne js zugängliches impressum

grüße aus dem morgentlichen süden
bebbi

ps.: ich finde es super wie hier im forum nicht nur auf das angesproche problem geschaut wird sonder auch über den tellerrand hinaus - tausend dank
das hover problem werde ich später nochmal angehen...

pps.: die site soll garkein aushängeschild sein - das war sie vor bald 20jahren und ob man heute noch damit was verdienen kann wage ich zu bezweifeln...

@@MudGuard:

nuqneH

* Tabellendesign
* Grafiken für Hintergründe, die nicht notwendig sind
* valides HTML
* JavaScript, das Browserabstürze verursacht
* fehlerhafter Doctype impliziert Quirksmodus

* es wird ein Java-Applet gestartet

* kein zuängliches Impressum (nur per JavaScript, nur ohne Firebug)

Qapla'

[bebbi]

hi again,

hier ist schon mal die überarbeitete startseite - irgendwelche verbesserungsvorschläge (code)
das mit dem applet hab ich schon versucht - soll ja als object aufgerufen werden - habs aber noch nicht so richtig zum laufen gebracht...

grüße
bebbi

[Matthias Apsel]

Om nah hoo pez nyeetz, bebbi!

das mit dem applet hab ich schon versucht - soll ja als object aufgerufen werden - habs aber noch nicht so richtig zum laufen gebracht...

weg damit!

Matthias