CSS Style bei onmouseover ändern

[Mario]

Hallo zusammen

ich habe schon einige zeit nichts mehr mit html / css / php gemacht.
allerdings hat es mich heute gepackt, und ich woltle die navigation einer seite neu gestatlten mit css.
ich habe angefangen "rumzubasteln" und komme nun nicht mehr weiter :(
(das problem sind brwoserinkompatibiläten zwischen ie und firefox, und e.v. auch noch anderen)

ich habe in meiner style.css folgende sachen:

.menueelement{
 background-color: #858585;
 border-right: #858585 1px solid;
 border-bottom: #858585 1px solid;
 border-left: #858585 1px solid;
 border-top: #858585 1px solid;
 }

.menueelementover{
 color: #AEAEAE;
 background-color: #474747;
 border-right: #CCCCCC 1px solid;
 border-bottom: #CCCCCC 1px solid;
 border-left: #CCCCCC 1px solid;
 border-top: #CCCCCC 1px solid;
 }

und in der index.php wo das menue drinnen ist sieht es folgendermassen aus:

<tr >
<td class="menueelement" onmouseover=this.className='menueelementover' onmouseout=this.className='menueelement'>
<a href="index.php?site=main" >
<div align="right">Home</div></a>
</tr>

ich will also per onmouseover und onmouseout den css ändern.
beim Firebird funktioniert das gut so!
das problem ist aber, dass ich bei IE ich den code so haben muss:

<tr > <a href="index.php?site=main" >
<td class="menueelement" onmouseover=this.className='menueelementover' onmouseout=this.className='menueelement'>
<div align="right">Home</div></a>
</tr>

der einzige unterschied ist die postion des linkes ( <a href.. )
einmal ist sie nach dem <td> und für die ie muss sie vor dem <td> sein.

wie kann ich dieses problem am einfachsten lösen?
(muss man diese änderung überhautp per css machen, oder geht das auch sonst wie?)
oder soll ich den browsertype per php abfragen und dann eine andere navigation laden?

das sind ganz viele fragen und ich bin für jede antwort dankbar!

gruess
mario

[Thomas Luethi]

Hallo,

<td class="menueelement" onmouseover=this.className='menueelementover' onmouseout=this.className='menueelement'>

Was sagt der Validator dazu?
Pack die Attribute unbedingt in Anfuehrungszeichen!

<td class="menueelement" onmouseover="this.className='menueelementover'" onmouseout="this.className='menueelement'">

<tr > <a href="index.php?site=main" >
<td class="menueelement" onmouseover=this.className='menueelementover' onmouseout=this.className='menueelement'>
<div align="right">Home</div></a>

Das ist hoechstgradig invalide.
TR darf nicht direkt A enthalten.
A darf kein TD enthalten.
Das haette Dir auch der Validator gesagt...

wie kann ich dieses problem am einfachsten lösen?

Fuer anstaendige Browser (z.B. Mozilla & Co) waere gar kein JavaScript
notwendig, weil sie :hover auf alle Elemente anwenden.

Statt einer extra Klasse und einem Klassenwechsel mit JS koenntest Du
gleich folgendes schreiben:
td.menueelement:hover { }

Vielleicht kriegst Du hier noch ein paar Ideen:
http://www.tiptom.ch/homepage/faq.html?q=zellelink

HTH, mfg,
Thomas

[Jeena Paradies]

Hallo,

Fuer anstaendige Browser (z.B. Mozilla & Co) waere gar kein JavaScript
notwendig, weil sie :hover auf alle Elemente anwenden.

So wie ich das sehe will er doch eh einen Rahmen um den Link machen, die Farbe dessen und die Hintergrundfarbe ändern. Das kann man doch alles am <a> selbst machen da braucht man doch auch keine Tabelle außenrum a:hover reicht schon und sogar der IE kommt damit zurecht. Schon gar nicht braucht man JS für solche allerweltssachen.

Da geht noch einiges anderes sogar im IE guck mal was ich gebastelt habe: http://jeenaparadies.servebeer.com/open/Webs/introware/

Aber das weißt du ja selbst noch besser wenn ich mir http://www.tiptom.ch/homepage/faq.html?q=zellelink ansehe :)

Grüße
Jeena Paradies

[Mario]

Hallo Thomas

danke mal für deine antwort!
es hat leider noch nicht ganz geklappt...
ich habe die page mal kurzerhand online gestellt unter:

http://www.tv-recherswil.ch/temp/

(es geht nur um die navigation, der rest ist noch nicht angepasst!)

im Mozilla geht nur der erste link richtig, der zweite wird zwar korrekt dargestellt, ist aber nicht anklibar.

im ie gehen die weiteren link, aber beim ersten link wird die linkfarbe nur geändert wenn man über den text fährt. allerdings sollte er auf der ganzen tabelle geändert werden.

hast du(oder jemand anderes) mir vieleicht noch einen anderen vorschlag?

guss
mario

[Jeena Paradies]

Hallo,

hast du(oder jemand anderes) mir vieleicht noch einen anderen vorschlag?

Ich habe dir doch beschrieben wie du das machen sollt [pref:t=76678&m=441860]. Du willst genau das gleiche machen wie ich es auf dieser Seite gemacht habe: http://jeenaparadies.de/test/rosaroter-panther/ oder?

Grüße
Jeena Paradies

[Mario]

Ich habe dir doch beschrieben wie du das machen sollt [pref:t=76678&m=441860]. Du willst genau das gleiche machen wie ich es auf dieser Seite gemacht habe: http://jeenaparadies.de/test/rosaroter-panther/ oder?

ja so in dieser art...
also wenn ich auf deinen link gehe mit meinem ie 5.5 habe ich keine navigation auf der rechten seite...!

deinen vorschlag habe ich versucht umzusetzen, hat leider aber auch nichts gebracht (sprich ist nicht gegangen)

gruss

mario

[Jeena Paradies]

Hallo,

also wenn ich auf deinen link gehe mit meinem ie 5.5 habe ich keine navigation auf der rechten seite...!

Wie meinst du das? Es gibt doch dort nur eine Navigation.

deinen vorschlag habe ich versucht umzusetzen, hat leider aber auch nichts gebracht (sprich ist nicht gegangen)

Wie gesagt war das ungetestet und ich habe einen Fehler gemacht in dem ich für das CSS eine Klasse genommen habe aber im markup eine id; außerdem habe ich noch einen Strichpunkt vergessen.

Jetzt habe ich mal eine testdatei erstellt wo es funktioniert: http://jeenaparadies.servebeer.com/open/selfbilder/mario.html

Ist das so wie du dir das gedacht hast?

Grüße
Jeena Paradies

[Ingo Turski]

Hi,

ich habe die page mal kurzerhand online gestellt unter:

http://www.tv-recherswil.ch/temp/

wie Jeena schon sagte: der Einsatz von JS hier ist völliger Murks.
Davon abgesehen ist eine solche Schachtelung:
  <a href="index.php?site=main" ><div align="right">Home</div></a>
unzulässig.

freundliche Grüße
Ingo

[Thomas Luethi]

Hallo,

http://www.tv-recherswil.ch/temp/

(</faq/#Q-19>) => http://www.tv-recherswil.ch/temp/

Wie schon Ingo und Jeena schrieben:

• Eine Tabelle ist fuer diese Navigationsleiste ueberhaupt nicht notwendig
• JavaScript erst recht nicht
• Bitte schreib korrektes, valides HTML, bevor Du Dich
    ueber "Browser-Fehler" beschwerst.
    http://validator.w3.org/

Genau so etwas, wie Jena fuer Dich gemacht hat:
http://jeenaparadies.servebeer.com/open/selfbilder/mario.html
haette ich auch vorgeschlagen, naemlich eine einfache Liste im Stil
<ul>
  <li><a href="...">Linktext1</a></li>
  <li><a href="...">Link2</a></li>
  <!-- u.s.w. -->
</ul>

Zum Thema Listen-Formatierung mit CSS:
http://www.subotnik.net/style/list-box-test.html
http://devedge.netscape.com/viewsource/2002/list-indent/
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listamatic/

Bitte informiere Dich mal ueber den Unterschied zwischen
Block-Level-Elementen (z.B. <p>, <div>, <li> u.s.w.) und
Inline-Elementen (<a>, <span> u.s.w.)
Ein wesentlicher Punkt ist, dass Inline-Elemente (normalerweise)
keine Block-Level-Elemente enthalten duerfen.
<a> darf weder <a>, noch <tr> oder <td>, noch
Block-Level-Elemente enthalten.

Block-Level- und Inline-Elemente in HTML:
http://www.w3.org/TR/html401/struct/global.html#h-7.5.3
http://selfhtml.teamone.de/html/referenz/elemente.htm#block_elemente
http://www.htmlhelp.com/reference/html40/block.html
http://www.htmlhelp.com/reference/html40/inline.html
Block-Level- und Inline-Elemente sowie display-Eigenschaft in CSS:
http://www.w3.org/TR/REC-CSS2/visuren.html#q5
http://www.w3.org/TR/REC-CSS2/visuren.html#q7
http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop (CSS 2.0)
http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html#display-prop (CSS 2.1 vom 25.02.2004)
http://www.w3.org/TR/CSS21/visuren.html#display-prop (CSS 2.1 jeweils aktuell)
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#display

Gruesse,

Thomas

[XaraX]

Hallo mario

mein Lösungsansatz wäre über eine Funktion:

<script>
function neu(v)
   {
   if(v.style.background!="#858585")
      {
      v.style.background="#858585"
      v.style.border="#858585 ipx solid"
      }
   else
      {
      v.style.background="#474747"
      v.style.border="#CCCCCC 1px solid"
      }
   }
</script>

...

<td class="menueelement" onmouseover='neu(this)' onmouseout='neu(this)'>

...

Gruß aus Berlin!
eddi

[Jeena Paradies]

Hallo,

.menueelement{
 background-color: #858585;
 border-right: #858585 1px solid;
 border-bottom: #858585 1px solid;
 border-left: #858585 1px solid;
 border-top: #858585 1px solid;
 }

Das würde ich zusammenfassen:

.menue a {
 background-color: #858585;
 border: #858585 1px solid;
}

.menueelementover{
 color: #AEAEAE;
 background-color: #474747;
 border-right: #CCCCCC 1px solid;
 border-bottom: #CCCCCC 1px solid;
 border-left: #CCCCCC 1px solid;
 border-top: #CCCCCC 1px solid;
 }

Das würde ich so machen:

.menue a:hover {
 color: #AEAEAE;
 background-color: #474747
 border: #CCCCCC 1px solid;
}

<tr >
<td class="menueelement" onmouseover=this.className='menueelementover' onmouseout=this.className='menueelement'>
<a href="index.php?site=main" >
<div align="right">Home</div></a>
</tr>

Das ist schon etwas unsinnig wie du das hier machst oder? Erstens denke ich dass du da keine Tabelle Brauchst sondern eine Liste. Zweitens brauchst du dafür gar kein JavaScript sondern :hover auf den Link. Das kappiert sogar der IE.

das problem ist aber, dass ich bei IE ich den code so haben muss:

<tr > <a href="index.php?site=main" >
<td class="menueelement" onmouseover=this.className='menueelementover' onmouseout=this.className='menueelement'>
<div align="right">Home</div></a>
</tr>

Ganz bestimmt nicht. Lass einfach die Tabelle Weg und mach das doch so:

<ul id="menu">
 <li><a href="index.php?site=main">Home</a></li>
 <li><a href="index.php?site=
 [...]
</ul>

/* CSS Datei */
ul.menue {
 text-align: center;
 width: 8em;
 list-style-type: none;
}
.menue a {
 background-color: #858585;
 border: #858585 1px solid;
}
.menue a:hover {
 color: #AEAEAE;
 background-color: #474747
 border: #CCCCCC 1px solid;
}

Alles zwar ungetestet aber müsste überall (außer vieleicht NS4.x) funktionieren.

So hast du nebenbei auch viel saubereren Code.

Grüße
Jeena Paradies