"MouseOver" über gesamtem button statt nur überm T Einstellungen

[Gast_Ace_NoOne_*]

Hallo erstmal.

Ich hab' mir ein Nav-Menü geschrieben, das dynamisch Untermenüs aufklappt, wenn man mit der Maus über den jeweiligen Menübutton fährt (=> JavaScript - "onMouseOver"; betrifft logischerweise auch den grafischen Effekt, den ich mit CSS und ":HOVER" erzeugt habe).
Das Problem ist jetzt, dass die buttons teilweise deutlich breiter sind als der Text. Dadurch wird das jeweilige Untermenü nur aktiviert, wenn man genau über den Text fährt, was natürlich etwas störend wirkt.
Natürlich könnte ich jetzt mit Leerzeichen 'auffüllen', sodass der "Text" auf den buttons immer bis zum Rand reicht - aber das wäre erstens ungenau und zweitens unsauber...

Wäre dankbar für Hilfestellungen.

[Conny]

Hi,
wenn die Seite bereits Online ist, dann stelle einen Link zu der Seite ein.
Dann haben wir die Möglichkeit uns den Quelltext mal an zu sehen.
Eine andere Möglichkeit wäre Du Postest Auszüge aus dem Queltext hier im Forum.
cu
Conny

[Gast_Ace_NoOne_*]

Die Seite online stellen kann ich nicht, da der Inhalt nicht für die Öffentlichkeit bestimmt ist. Aber den Quelltext kann ich in Auszügen posten:

Also, die Menüleiste, aus der heraus man die Untermenüs aufrufen kann, besteht aus einer einzeiligen Tabelle (jaja ich weiß, tables sind dafür nicht gedacht ):

QUELLTEXT

<table class="menuBar">

<tr>

 <td class="menuButton" id="menu1"><a class="noLink" href="#" onMouseOver="button_press('menu1'); show_subMenu('subMenu1');" onMouseOut="button_release('menu1')">Menü 1</a></td>

 <td class="menuButton" id="menu2"><a class="noLink" href="#" onMouseOver="button_press('menu2'); show_subMenu('subMenu2');" onMouseOut="button_release('menu2')">Menü 2</a></td>

</tr>

</table>

Die zugehörigen CSS-Definitionen sehen folgendermaßen aus:

QUELLTEXT

table.menuBar {

position: absolute;

top: 0px;

left: 0px;

table-layout: fixed;

border: 1px solid;

border-color: #F0F0F0 #BBBBBB #BBBBBB #F0F0F0;

background-color: #DDDDDD;

z-index: 10; }



td.menuButton {

width: 75px;

height: 20px;

font-family: Arial, sans-serif;

font-size: 8pt;

text-align: center;

background-color: #CCCCCC;

border: 2px outset;

border-color: #F0F0F0 #909090 #909090 #F0F0F0; }



a.noLink:link,

a.noLink:visited,

a.noLink:hover,

a.noLink:active {

color: #000000;

text-decoration: none;

background-color: transparent; }

Und die JavaScript-Funktionen:

QUELLTEXT

function button_press(element_id) {

document.getElementById(element_id).className = "menuButton_depressed"; }



function button_release(element_id) {

document.getElementById(element_id).className = "menuButton"; }



function menuItem_activate(element_id) {

document.getElementById(element_id).className = "menuItem_active"; }



function menuItem_reset(element_id) {

document.getElementById(element_id).className = "menuItem"; }



function show_subMenu(menu_id) {

show_element(menu_id); }

Ich hoffe, das hilft... !?


PS: Bei den Untermenüs gibt's auch noch zwei kleine Probleme. Erstens interpretiert der IE offenbar den CSS "min-width"-Befehl nicht; gibt's dafür eine Entsprechung, die auch der IE kennt? Und zweitens hängen in Mozilla die (absolut positionierten) Untermenüs nicht mehr genau unter den jeweiligen buttons der Menüleist, sondern fangen zu weit links an (je weiter rechts der button, desto stärker die Abweichung) - was kann ich dagegen tun?
[/list]

[Conny]

Hi,
soweit ich es überblicken kann, sind Deine Buttons eigentlich keine Buttons sondern TD-Feldern die aussehen wie Buttons!
Aus'm Bauch heraus wurde ich sagen, entweder kleine Grafiken in doppelterausführung Basteln (ein für OnClick ein für release) und dann diese ansprechen, oder wirkliche Buttons a la <form type="button" value="What Ever" OnClick="" etc... > in diese Tabelle einsetzen.

Übrigens anstatt eine Tabelle könnetst Du auch eine Liste -ohne Listenpunkte- nehmen...

cu
Conny

[Gast_Ace_NoOne_*]

Yep, es sind lediglich TDs - hätte ich vielleicht eher erwähnen sollen. :oops:
Wenn es wirklich keine (einfache) Möglichkeit gibt, den HOVER-Bereich zu erweitern, muss ich wohl tatsächlich auf Grafiken zurückgreifen - was ich aber eigentlich vermeiden wollte...

Das mit den Listenpunkten ginge übrigens nicht (glaube ich... ), da die buttons in der Menüleiste horizontal, nicht vertikal angeordnet sind.

[Netizen]

Also, die Menüleiste, aus der heraus man die Untermenüs aufrufen kann, besteht aus einer einzeiligen Tabelle (jaja ich weiß, tables sind dafür nicht gedacht )

Und in diesem Fall auch nicht notwendig, es geht einfacher.

Benutze statt der Tabelle eine unordered list (ul) und style die Links darin mit display: block, Beispiel (ohne JS):
HTML:

QUELLTEXT

<ul id="menu">

<li><a href="...">...</a></li>

<li><a href="...">...</a></li>

<li><a href="...">...</a></li>

...

</ul>

CSS:

QUELLTEXT

#menu {

 margin: 0;

 padding: 0;

 width: ...

}



#menu li {

 margin: 0;

 padding: 0;

 list-style-type: none

}



#menu li a {

 display: block;

}



...

Damit kannst Du die ganzen Menulinks wie Buttons stylen, ganz ohne Grafiken.

Noch was zu Deinem Code:

width: 75px;
height: 20px;
font-family: Arial, sans-serif;
font-size: 8pt;

Eine feste Höhe bzw. Breite in Verbindung mit einer festen Schriftgröße führt früher oder später zwangsläufig zu Problemen, obendrein ist die Einheit pt für die Bildschirmausgabe ungeeignet. Benutze wann immer möglich em oder %, px höchstens für Ränder und Abstände.

a.noLink:link,
a.noLink:visited,
a.noLink:hover,
a.noLink:active {
color: #000000;
text-decoration: none;
background-color: transparent; }

Nur mal eine Frage: Für was ist diese Webseite gedacht? Es ist i. A. nicht sinnvoll, wenn Links nicht als solche zu erkennen sind und obendrein besuchte sich nicht von unbesuchten unterscheiden. Auf einer "normalen" Webseite wäre obiger Code eine Benutzbarkeits-Katastrophe.

HTH
n!

[Gast_Ace_NoOne_*]

Mit <ul> und "display: block;" geht's nicht, weil - wie bereits erwähnt - die buttons in der Menüleiste horizontal, nicht vertikal angeordnet sind!?
Das mit der pt-Angabe stimmt wohl, aber ... naja, werd's mal über %-Angaben versuchen (die Bedeutung der em-Angabe versteh' ich nicht ganz; ist das nicht das gleiche wie Angaben in Prozent?).
Was die links angeht: Ist mir bewußt, dass das im Normalfall ein Fall für die usability-Polizei wäre, und mein Professor (Informationswissenschaft) würde mich killen - aber es ist eben keine normale website, sondern eher eine Art 'internes Dokument'... Trotzdem danke für die Fürsorge!

[Netizen]

Mit <ul> und "display: block;" geht's nicht, weil - wie bereits erwähnt - die buttons in der Menüleiste horizontal, nicht vertikal angeordnet sind!?

Oops, hatte ich überlesen. Sollte aber trotzdem gehen:
[list]mit display: block für die Links und float: left sowie einer Breitenangabe für die Listenelemente, oder

[*]die einzelnen Listenelemente mit display: inline in eine Reihe bringen[list]
Eines der Probleme mit pt ist, daß die resultierende Schriftgröße zum Teil vom Betriebssystem abhängt (bzw. von dessen dpi-Wert, mit dem intern gerechnet wird).

werd's mal über %-Angaben versuchen (die Bedeutung der em-Angabe versteh' ich nicht ganz; ist das nicht das gleiche wie Angaben in Prozent?).

Im Prinzip ja: 1em = 100% = Standardschriftgröße des Benutzers. In der Praxis gibts dennoch Unterschiede, die aber auf Bugs zurückzuführen sind (IE rechnet z.B. manchmal falsch mit em, während alte Operas Probleme mit Angaben in % haben).

Gruß
n!

[Conny]

Hallo Ace,
ich denke so könnte man Dein Problem lösen :idea: :

QUELLTEXT

<HTML>

<HEAD>

<TITLE>Testseite</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<META NAME="author" CONTENT="Conrad Beck">

<META NAME="generator" CONTENT="Phase5³">

<STYLE TYPE="text/css">

body    {

       margin: 0%;

       font-family: serif;

       color: #000000;

       font-style: bolder;

       font-size: 14px;

       background-color: #FF7F7F;

}



a.link {

       display:block;

       width:100px;

       height:50px;

       border:1px solid #000000;

       background-color:#cdcdcd;

       text-align: center;

       padding-top: 15;

}



a.link:hover {

      background-color:#ffffff;

}



</STYLE>

</HEAD>



<BODY>

<P>&nbsp;</P>

<P>&nbsp;</P>





<TABLE align="center">

<TR>

<TD><A CLASS="link" HREF="#">Link 1</A></TD>

<TD><A CLASS="link" HREF="#">Link 2</A></TD>

<TD><A CLASS="link" HREF="#">Link 3</A></TD>

<TD><A CLASS="link" HREF="#">Link 4</A></TD>

</TR>

</TABLE>



</BODY>

</HTML>

Kopiere es zunächst mal als neuer Seite, passe es deinen Bedürfnisse an und füge es dann erst in die eigemtliche Seite ein.
Die lösung liegt in 'Display: block;' mit höhen und weiten Angaben.
Merke: die schriftgröße (14px -Body-) steht im direktem Verhältnis zum Padding top und höhen Angabe bei 'a.link'.

Und Ja, ich habe das mit der Tabelle -widerwillig- übernommen :wink:

cu
Conny (heute mal wieder genial! )

PS. geht bei IE 5.5, IE6.0, Opera 7 und Netscape/ Mozilla >4

[Gast_Ace_NoOne_*]

Danke!! Sieht gut aus so; werde es bei Gelegenheit implementieren (hab' momentan wenig Zeit ).

[Google Bot]