Menü in Tabelle & Mouseover.

[Chris]

Hi an die gesamte Selfhtml-community,

Situation:

Ich habe ein Tabellen-menü erstellt welches durch die Funktion onmouseover die Hintergrundfarbe ändert.

Probleme:

1. Der definierte Link soll sich über die gesamte Tabellen_reihe_ erstecken - momentan ist dies nur für das Wort "Startseite" der Fall. Das nervt, da der User genau auf das Wort klicken muss. Meine Vorstellung wäre also ein Menü, bei dem es egal ist, wo der User in der Tabellenspalte klickt.

2. Etwas scheint nicht zu stimmen mit meiner CSS-Datei. Ich möchte gleichzeitig zu dem Wechsel der Hintergrundfarbe auch die Farbe des Textes ändern, wenn sich der Mauszeiger darüber bzw. nicht darüber befindet. Wegen des besseren Kontrasts ;-) Nun habe ich folgendes in der CSS:

body { background-color:#8b4513 }
table { width:99%; font-family:arial, helvetica; font-size:1em; color:#000000; background-color:#fafad2 }
a { font-family:arial, helvetica; font-size:1em; color:#000000; text-decoration:none }
.mausdrueber{ color:#ffffff; background-color:#ffcc00; text-decoration:underline }
.mausweg { color:#000000; background-color:#fafad2; text-decoration:none }

******************************************
Durch "color:#farbe" müsste sich doch auch die Farbe der Schrift ändern, oder? Was mach' ich falsch?
******************************************

Der Html/java-script-Code (Excerpt):

...
<tr>
<td onmouseover="this.className='mausdrueber'" onmouseout="this.className='mausweg'">
<a href="./blabla.htm" target="inhalt" title="blabla">Startseite</a>
</td>
</tr>

Danke für eure Hilfe ;-)

Gruß

Chris

[Ingo Turski]

Hi,

Ich habe ein Tabellen-menü erstellt welches durch die Funktion onmouseover die Hintergrundfarbe ändert.

und warum nutzt Du keine Liste? Die ist passender und läßt sich wesentlich vielseitiger formatieren.

1. Der definierte Link soll sich über die gesamte Tabellen_reihe_ erstecken

Du suchst display:block i.V. mit einer passenden Weite ür den Link - unabhängig davon, in welchem Element er sich befindet.

<td onmouseover="this.className='mausdrueber'" onmouseout="this.className='mausweg'">

das ist ja nun wirklich Blödsinn. Wieso machst Du diesen Umstand und verhinderst damit auch noch den hover-Effekt für Besucher ohne Javascript. a:hover im CSS reicht doch nun wirklich.

freundliche Grüße
Ingo

[Chris]

Hi,

Ich habe ein Tabellen-menü erstellt welches durch die Funktion onmouseover die Hintergrundfarbe ändert.
und warum nutzt Du keine Liste? Die ist passender und läßt sich wesentlich vielseitiger formatieren.

1. Der definierte Link soll sich über die gesamte Tabellen_reihe_ erstecken
   Du suchst display:block i.V. mit einer passenden Weite ür den Link - unabhängig davon, in welchem Element er sich befindet.

<td onmouseover="this.className='mausdrueber'" onmouseout="this.className='mausweg'">
das ist ja nun wirklich Blödsinn. Wieso machst Du diesen Umstand und verhinderst damit auch noch den hover-Effekt für Besucher ohne Javascript. a:hover im CSS reicht doch nun wirklich.

freundliche Grüße
Ingo

=================================
Vielen Dank für die ganzen Tips!

Gruß

Chris

[Zeromancer]

Hallo,

Ich habe ein Tabellen-menü erstellt welches durch die Funktion onmouseover die Hintergrundfarbe ändert.

Das ist nicht nötig.

... Meine Vorstellung wäre also ein Menü, bei dem es egal ist, wo der User in der Tabellenspalte klickt.

Nimm ein <div>, formatiere es mit CSS und weise den darin befindlichen Links die Eigenschaft display:block zu. Gib Ihnen noch Höhe und Breite und du kannst die Verweise 'hovern'

Durch "color:#farbe" müsste sich doch auch die Farbe der Schrift ändern, oder? Was mach' ich falsch?

a:link
a:visited
a:hover

sind in dem Fall deine Freunde. Dein Javascript kannst du erst mal vergessen. Du solltest dich mit HTML und CSS auseinandersetzen. Wenn du das kannst, dann erst solltest du mit JS spielen.

Mit freundlichen Grüßen

André

[Ingo Turski]

Hi,

Nimm ein <div>

bitte nicht! Welchen Sinn soll das denn machen? Es ist schon dumm genug, bei CSS immer gleich an DIVs zu denken, aber vorgeschlagen werden sollte das dann doch nicht.

freundliche Grüße
Ingo

[Zeromancer]

Hallo,

bitte nicht! Welchen Sinn soll das denn machen? Es ist schon dumm genug, bei CSS immer gleich an DIVs zu denken, aber vorgeschlagen werden sollte das dann doch nicht.

Deine Meinung...

Mit freundlichen Grüßen

André

[Cheatah]

Hi,

bitte nicht! Welchen Sinn soll das denn machen? Es ist schon dumm genug, bei CSS immer gleich an DIVs zu denken, aber vorgeschlagen werden sollte das dann doch nicht.
Deine Meinung...

fachlich fundiert.

Cheatah

[Struppi]

bitte nicht! Welchen Sinn soll das denn machen? Es ist schon dumm genug, bei CSS immer gleich an DIVs zu denken, aber vorgeschlagen werden sollte das dann doch nicht.

Deine Meinung...

Nein, nicht nur seine.

Das Div ist absolut unnötig (und es als display:block zu formatieren ist unötig das es bereist ein Blockelement ist).

Du solltest, um das Problem des Fragers zu vermeiden, die Links (am sinnvollsten innerhalb einer Liste) als Blockelemente deklarieren.

Struppi.

[Zeromancer]

Ach liebster Struppi,

von Dir:

Das Div ist absolut unnötig (und es als display:block zu formatieren ist unötig das es bereist ein Blockelement ist).

von mir:

Nimm ein <div>, formatiere es mit CSS und weise _den_darin_befindlichen_Links die Eigenschaft display:block zu. Gib Ihnen noch Höhe und Breite und du kannst die Verweise 'hovern'

Ich habe dich auch _lieb_

Mit freundlichen Grüßen

André

[H2O]

Hallo.

1. Der definierte Link soll sich über die gesamte Tabellen_reihe_ erstecken - momentan ist dies nur für das Wort "Startseite" der Fall. Das nervt, da der User genau auf das Wort klicken muss. Meine Vorstellung wäre also ein Menü, bei dem es egal ist, wo der User in der Tabellenspalte klickt.

Benutze display:block:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

2. Etwas scheint nicht zu stimmen mit meiner CSS-Datei. Ich möchte gleichzeitig zu dem Wechsel der Hintergrundfarbe auch die Farbe des Textes ändern, wenn sich der Mauszeiger darüber bzw. nicht darüber befindet. Wegen des besseren Kontrasts ;-) Nun habe ich folgendes in der CSS:

Also auch für den ersten Punkt kann ich dir nur raten statt Tabellen CSS zu nutzen.
Und der zweite Punkt ist nicht so gut mir JS zu machen.
Benutze besser hover:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus

Lese dir wirklich mal das CSS-Tutorial von SelfHTML durch.

Ich hoffe ich konnte helfen, H2O