Zum Inhalt springen

Menulinks mit css formatieren

Erstellt am 24. November 2006 · 1 Antwort · letzte Antwort am 24. November 2006

Tags: Frage

Unbekannter Benutzer ·

Hallo Community,

ich würde gerne das folgende Menü abändern, und die Links mit css formatieren, kann mir da villeicht jemand zur had gehen, und mir sagen wo und wie ich das css im Tyoscript einbinden muss?

# ------------------------------------------------------------------MENU

subparts.menu = HMENU
subparts.menu {
  entryLevel = 0
     1 = TMENU
     1 {
        wrap = | 
        expAll = 1
        IFSUB = 1
        IFSUB.allWrap = <br>|<br>
        NO.linkWrap = <br>|<br>
}
     2 = TMENU
     2 {
       wrap =  |
       expAll = 1
       IFSUB = 1
       IFSUB.allWrap = |
       NO {
          linkWrap = &nbsp;&nbsp;|<br>
          RO = 1
             }
       }

      3 < .2
      4 < .2
      5 < .2
      6 < .2
}
just2b · · Beste Antwort

Hallo,

ersteinma hast du vergessen vor Zeile 22 eine Klammer zu schließen.

Weiters empfehle ich ein Listenmenü, also Aufbau ca so:

temp.mainmenu = HMENU
temp.mainmenu {

	1 = TMENU
	1 {
		#expAll =1
		wrap = <ul id="nav1">|</ul>
		noBlur = 1
		NO = 1
		NO {
			wrapItemAndSub = <li>|</li>
			stdWrap.htmlSpecialChars = 1
			ATagTitle.field = title
		}
		ACT = 1
		ACT {
			wrapItemAndSub = <li id="nav1act">|</li>
			stdWrap.htmlSpecialChars = 1
			ATagTitle.field = title
		}
	}
	
	2 < .1
	2 {
		wrap = <ul id="nav2">|</ul>
		ACT.wrapItemAndSub = <li id="nav2act">|</li>
	}
	
	3 < .2
	3 {
		wrap = <ul id="nav3">|</ul>
		ACT.wrapItemAndSub = <li id="nav3act">|</li>
	}
}

und mit folgendem CSS kommst du dann schon ziemlich weit:

#nav1, #nav1 ul {
padding:0;margin:0;
}

#nav1 {
border: 1px solid #eee;
text-align: left;
list-style: none;
}

#nav1 a, #nav1 a:active {
border-top: 1px solid #EBEBEC;
text-decoration: none;
display: block;
padding: 4px 0px 4px 20px;
background: #fff url(nav_pfeil_rot.gif) no-repeat 5px ;
color: #040000;
text-decoration:none;

}

#nav1 a:hover {
color: #BF2236;
}

/*#nav1 li:hover {
background-color: #f3f3f3;
}*/

#nav1act a:link, #nav1act a:visited, #nav1act a:visited {
background: #BF2236 url(nav_pfeil_weiss.gif) no-repeat 5px ;
color: #eee;
}

#nav1act a:hover {
xbackground-color:#eee;
text-decoration:none;
}

#nav2 {
list-style: none;
background:#fff;
}

#nav2 a:link, #nav2 a:visited, #nav2 a:active {
font-size:11px;
padding-left:40px;
color: #040000;
background: #f1f1f2 url(pfeil3.gif) no-repeat 28px ;
}

#nav2 li, #nav2 ul {
list-style:none;
border: 0px solid black;
display : inline
}

#nav2 a:hover{
color: #BF2236;
}

#nav2act a:link, #nav2act a:visited, #nav2act a:active #nav2act a:visited {
background: #e2e2e5 url(pfeil3_act.gif) no-repeat 28px ;
}
#nav3 a:link, #nav3 a:visited, #nav3 a:active {
padding-left:60px;
background: #fff url(l3.gif) no-repeat 48px;
}

#nav3act a:link, #nav3act a:visited, #nav3act a:active {
font-style:italic;
background: #fff url(l3_act.gif) no-repeat 48px ;
}

fürs verständnis sollte es auf jedenfall reichen 😉

georg