Menüleiste verschiebt sich bei Rollover-Effekt

Hallo allerseits,

Mir stellt sich folgendes Problem:

Ich möchte ein Textmenü horizontal anordnen. Die Gestaltung dieses Menüs wird über das eingehängte Stylesheet vorgenommen. Soweit so gut. Bei der Betrachtung im Browser ergibt sich allerdings ein kleiner Schönheitsfehler, denn wenn man einen der mittleren Menüeinträge "overrollt", verschieben sich die rechts davon stehenden Menüeinträge, da der "overrollte" Menüeintrag natürlich ein bisschen dicker dargstellt wird. Geht man mit dem Mauszeiger wieder weg von dem mittleren Menüeintrag, rücken die anderen Menüeinträge auch wieder nach links ein.

Der angestrebte Zustand soll allerdings so aussehen, dass die Menüeinträge unabhängig voneinander sind und wenn einer der mittleren Menüenträge angeklickt werden, soll nur dieser ein wenig hervorgehoben werden, ohne dass die rechts von ihm stehenden Einträge sich mitbewegen.

Würde mich über eure Tipps sehr freuen, im Anhang meine verwendeten Codekomponenten.

10.marks.MENUE = HMENU
10.marks.MENUE.special = directory
10.marks.MENUE.special.value = 1
#10.marks.MENUE.entryLevel = 0
10.marks.MENUE.1 = TMENU
10.marks.MENUE.1.NO = 1
10.marks.MENUE.1.NO.ATagParams = class = "navi"
10.marks.MENUE.1.NO.linkWrap=  | ||*|
                        | ||*| 
                        |                       
      
10.marks.MENUE.1.ACT = 1
10.marks.MENUE.1.ACT.ATagParams = class = "navi_active"
10.marks.MENUE.1.ACT.linkWrap =  | ||*|
                        | ||*| 
                        |

        .navi 
        {
                color: #333; 
                font-size: 11px; 
                font-family: Verdana; 
                text-decoration: none 
         }
         
         .navi:hover 
         { 
                 color: #333; 
                 font-weight:bold;
                 font-size: 11px; 
                 font-family: Verdana 
          }

         .navi_active 
         { 
                color: #333; 
                font-weight:bold;
                font-size: 11px; 
                font-family: Verdana; 
                text-decoration: none 
          }

Hi,

ich denke mal, du müßtest dem einzelnen Menüpunkt eine feste Breite zuweisen, die der Ausdehnung beim RO bzw. ACT genug Raum läßt.

kaktus

Danke für deine Antwort.

Hast du vielleicht auch noch einen Tip parat, wie man diese feste Breite zuweisen kann?

chrissuperstar

 marks.MENU1 = HMENU
        marks.MENU1.special = list
        marks.MENU1.special.value = 208,216,209,218
        marks.MENU1.1 = TMENU
        marks.MENU1.1 {
                  wrap =  |
                  NO {
                          ATagParams = class ="navi"
                          beforeImg =  fileadmin/user_upload/_temp_/slash_1F.gif |*|
                          beforeImgTagParams = align="middle"
                          afterImg = |*| |*|  fileadmin/user_upload/_temp_/slash_1F.gif
                          afterImgTagParams = align="middle"
                        }

                   ACT < .NO
                   ACT.ATagParams = class ="navi-active"
                   ACT = 1

                   }

Ich weise den Menüs Klassen zu, die ich über CSS formatiere.

kaktus

Kannst du vielleicht mal ein Beispiel so einer CSS-Datei posten. Habe es versucht bei mir ähnlich umzusetzen, aber geklappt hat es natürlich nicht.

Gibt es auch noch einen alternativen Ansatz, dass man z.B. <div>-Tags oder ähnliches benutzt?

chrissuperstar

#MENU1
{
position: absolute;
left: 123px;
top: 423px;
z-index:1;
}



.navi
{
padding: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #6F6F6F;
vertical-align: middle;
background-color: transparent; 
}

.navi-active
{
padding: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 10px;
color: #000000;
vertical-align: middle;
background-color: transparent; 
}

Ich habs in dem Fall mit padding gemacht.

#MENU1 positioniert den Marker und mit.navi bzw.
.navi_active beeinflusst Du die jeweiligen Menüzustände.

kaktus

P.S. Ich verwende css-styled-content