![]() |
Willkommen, Gast ( Anmelden | Registrierung )
![]() |
Gast_Ace_NoOne_* |
![]()
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. |
|
|
![]() |
![]()
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 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! |
|
|
![]() ![]() |
![]() |
Vereinfachte Darstellung | Aktuelles Datum: 14.05.2025 - 6:53 |