TYPO3-Testaccount
Testen Sie die aktuellste TYPO3-Version kostenlos und unverbindlich für einen Monat!

Jetzt testen!

Schulungen

jetzt buchen
Forum » TypoScript » Menüs

TMENU rollover wackelt / CSS


Autor Nachricht
Verfasst am: 09. 03. 2009 [17:26]
Darthstar
Themenersteller
Dabei seit: 30.10.2007
Beiträge: 103
 Halo,

habe folgenden Schönheitsfehler. Dieses horizontale TMENU funktioniert traumhaft gut, jedoch wird bei einem rollover per CSS die Schirft auf Bold gesetzt. Dadurch "wackeln" die nach rechts folgenden Menu-Items mehr oder weniger stark mit.
Gibts da eine elegante Möglichkeit zur Umgehung?

So sieht mein Menu im Setup aus

TYPOSCRIPT
TOPNAVI         = HMENU
    TOPNAVI {
    wrap = <ul id="hauptnavi_container">|</ul>
    special = directory
    special.value = 3
    1         = TMENU
    1.NO =  1
    1.NO.linkWrap = <li class="hauptnavi">|</li>  
    }
Profil
Verfasst am: 09. 03. 2009 [18:06]
Tevsa
Dabei seit: 19.01.2006
Beiträge: 156
 Hallo,

liegt wahrscheinlich am CSS.... Hast du die A-Tags mit display:block ?

Wie sieht denn dein css aus?

lG
Tevsa
Profil
Verfasst am: 09. 03. 2009 [18:10]
Darthstar
Themenersteller
Dabei seit: 30.10.2007
Beiträge: 103
 hmm das hats nicht gebracht.
HTML
.hauptnavi{
  float:left;
  padding:0 10px 0 0;
  list-style-image:none;
  list-style-position<img src="typo3conf/ext/mm_forum//res/smilies/icon_eek.gif" alt="icon_eek.gif" />utside;
  list-style-type:none;
  display: block;
  }
 
.hauptnavi a, .hauptnavi a:link, .hauptnavi a:visited  { 
  text-decoration:none; 
  font-family:arial; 
  color:#444444; 
  font-size:12px; 
  font-weight:normal;
  display: block;
  }
 
 .hauptnavi a:hover, .hauptnavi a:focus, .hauptnavi a:active {
   text-decoration:none; 
   font-family:arial; 
   color:#444444; 
   font-size:12px; 
   font-weight:bold;
   display: block;
 }
Profil
Verfasst am: 09. 03. 2009 [18:38]
Tevsa
Dabei seit: 19.01.2006
Beiträge: 156
 Hallo,
versuch mal:
HTML
.hauptnavi{
  float:left;
  padding:0 10px 0 0;
  list-style-image:none;
  list-style-position<img src="typo3conf/ext/mm_forum//res/smilies/icon_eek.gif" alt="icon_eek.gif" />utside;
  list-style-type:none;
  display: block;
  }
 
.hauptnavi a, .hauptnavi a:link, .hauptnavi a:visited  { 
  text-decoration:none; 
  font-family:arial; 
  color:#444444; 
  font-size:12px; 
  font-weight:normal;
  display: block;
  padding:0px 10px;
  }
 
 .hauptnavi a:hover, .hauptnavi a:focus, .hauptnavi a:active {
   font-weight:bold;
   display: block;
 }


ich habe ein Padding in den Link gesetzt (je nach Breite must du das padding anpassen)

Im .hauptnavi a:hover, .hauptnavi a:focus, .hauptnavi a:active brauchst du die text-decoration und die Family nicht, weil du Sie in der .hauptnavi a schon definiert hast (Vererbung).

Hoffe es hilft.

lg Tevsa

ps.: Du arbeitest mit dem Firebug?

[Dieser Beitrag wurde 2mal bearbeitet, zuletzt am 09.03.2009 um 18:46.]
Profil
Verfasst am: 09. 03. 2009 [19:14]
Darthstar
Themenersteller
Dabei seit: 30.10.2007
Beiträge: 103
 Hallo,

nein leider nicht. icon_cry.gif

Padding bringt ja in diesem Falle wenig , da es konstant bleibt. Bei einem Rollover wird die Schrift des menu-Punkts fett. Dadurch verschieben sich alle rechts davon befindlichen Menu Items.

Man bräuchte also sowas, dass eine fixe Breite für jedes LI Element vorgibt und innerhalb dieser (dann fixen) breite das Element mittig ausrichtet.

Und. Ja , ich arbeite mit Firebug. Hatte mich erst gefragt , wie du das rausgefunden hast, bis ich merkte, dass es eine Frage war icon_wink.gif

Also, jemand noch eine Idee?


[Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 09.03.2009 um 19:15.]
Profil