Zum Inhalt springen

Tmenu, css und falsche Formatübernahme

Erstellt am 15. Oktober 2008 · 4 Antworten · letzte Antwort am 15. Oktober 2008

Tags: HTML & CSS, Frage

MB76 ·

Ich möchte ein TMenu, mit verschiedenen Schriften für die Ebenen. Mein Problem: in der css-datei wird immer die Formatierung von Hyperlinks (a) verwendet. diese überschreibt dann meine menüklassen (z.B. mainnav1_font).
wie kann ich das ändern?
Kann man evtl. den Verweis nicht über den Text, sondern über das Hintergrundbild machen (wäre mir sowieso lieber)?

Menu_Rechts = HMENU
Menu_Rechts.wrap = <div>|<div>
  Menu_Rechts.special = directory
  Menu_Rechts.special.value = 908
  Menu_Rechts {
  1 = TMENU
  1 {
    noBlur = 1
    expAll = 0
    wrap = <div>|<div>
    NO {
      allWrap = <div class="mainnav1_no"><div class="mainnav1_font"> |</div></div>
      stdWrap.case =
       } //
    ACT < .NO
    ACT = 1
    ACT{
      allWrap = <div class="mainnav1_act"><div class="mainnav1_font"> |</div></div>
    }
    RO < .NO
    RO = 1
    RO{
      allWrap = <div class="mainnav1_ro"><div class="mainnav1_font"> |</div></div>
    }
  }
  2 = TMENU
  2 {
    noBlur = 1
    expAll = 0
    wrap = <div>|<div>
    NO {
      allWrap = <div class="mainnav2_no"><div class="mainnav2_font"> |</div></div>
      stdWrap.case =
      } //
      ACT < .NO
    ACT = 1
    ACT{
      allWrap = <div class="mainnav2_act"><div class="mainnav2_font"> |</div></div>
    }
      RO < .NO
    RO = 1
    RO{
      allWrap = <div class="mainnav2_ro"><div class="mainnav2_font"> |</div></div>
  }
  }
  3 = TMENU
  3 {
    noBlur = 1
    expAll = 0
    wrap = <div>|<div>
    NO {
      allWrap = <div class="mainnav3_no"><div class="mainnav3_font"> |</div></div>
      stdWrap.case =
      } //
      ACT < .NO
    ACT = 1
    ACT{
      allWrap = <div class="mainnav3_act"><div class="mainnav3_font"> |</div></div>
    }
      RO < .NO
    RO = 1
    RO{
      allWrap = <div class="mainnav3_ro"><div class="mainnav3_font"> |</div></div>
  }
  }
}

meine CSS-Datei:

div.mainnav1_no{
 position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu1_no.gif);
  float: right;
}
div.mainnav1_act{
  position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu1_act.gif);
  float: right;
}
div.mainnav1_ro{
  position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu1_act.gif);
  float: right;
}
div.mainnav1_font{
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px; 
  color: #ffffff; 
  text-decoration: none; 
  align: left;
  padding-left: 8px;
  padding-top: 8px;
}
div.mainnav2_no{
  position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu2_no.gif);
  float: right;
}
div.mainnav2_act{
  position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu2_act.gif);
  float: right;
}
div.mainnav2_ro{
  position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu2_act.gif);
  float: right;
}
div.mainnav2_font{
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px; 
  color: #000000; 
  padding-left: 8px;
  padding-top: 8px;
}
div.mainnav3_no{
  position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu3_no.gif);
  float: right;
}
div.mainnav3_act{
  position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu3_act.gif);
  float: right;
}
div.mainnav3_ro{
  position: relative;
  width: 210px;
  height: 30px;
  background-image:url(/fileadmin/version3/images/system/menu3_act.gif);
  float: right;
}
div.mainnav3_font{
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #0000ff; 
  padding-left: 8px;
  padding-top: 8px;
}

im fertigen Seitenquelltext sieht ein Menüpunkt dann so aus:

<div><div class="mainnav1_no"><div class="mainnav1_font"><a href="912.0.html"  >Home</a></div>
Dander ·

indem du im css auch den a-tag ansprichst
"div.mainnav2_font a" oder indem du dem a-tag eine
eigene klasse gibst
ATagParams = class="meine_klasse"

MB76 ·

kann ich den a-tag speziell für div.mainnav1_font festlegen? Ich hoffe, die Frage unterfordert niemanden ;-)
a soll global anders aussehen.

Danke

Dander ·

ja, wie oben beschrieben
du kannst speziell diesen A-Tag so im css ansprechen

div.mainnav2_font a {

}

oder im css eine klasse anleden

a.deine_klasse {

}

und die in typoscript dann so ansprechen

ATagParams = class="deine_klasse"