IPB

Willkommen, Gast ( Anmelden | Registrierung )

> "MouseOver" über gesamtem button statt nur überm T
Gast_Ace_NoOne_*
Beitrag 25.01.2004 - 19:30
Beitrag #1





Gäste






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.
Go to the top of the page
 
+Quote Post
 
Start new topic
Antworten
Netizen
Beitrag 26.01.2004 - 0:31
Beitrag #2


Ausnahme Poster
*

Gruppe: User
Beiträge: 150
Mitglied seit: 24.10.2003
Wohnort: Berlin
Mitglieds-Nr.: 1.544



ZITAT
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 tongue.gif )
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:

ZITAT
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.

ZITAT
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!
Go to the top of the page
 
+Quote Post

Beiträge in diesem Thema


Reply to this topicStart new topic
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:

 



RSS Vereinfachte Darstellung Aktuelles Datum: 14.05.2025 - 6:53

taschenkalender
expertise-panel IPS Driver Error

IPS Driver Error

There appears to be an error with the database.
You can try to refresh the page by clicking here