[TYPO3-german] TMENU CSS Klasse wird nicht angesprochen?

[Christian Wolff]

On Thu, 14 Feb 2008 08:59:14 +0100, Jochen Graf <graf at uni-landau.de> wrote:

> Hallo,
> ich habe auf meiner Seite ein TMENU
>
> temp.navi = HMENU
> temp.navi {
>       entryLevel = 1
>           excludeUidList =
>           1 = TMENU
>           1 {
>               # werden auch alle unterebenen angezeigt
>               expAll = 0
>               NO = 1
>               NO.wrap = <ul class="coolnav">|</ul>
>               NO.wrapItemAndSub = <li> |</li>
>               NO.ATagTitle.field = abstract // description // title
>                 # So wird der span eingebunden.
>                 # <li><a href="#"><span>News</span></a></li>
>                 NO.stdWrap.wrap = <span>|</span>
>                 CUR < .NO
>                 CUR.ATagParams = style="color:#768eb0;font-size:11pt";
>                 # Unternavigation 2. Ebene:
>                 }
>     2 = TMENU
>     2 {
>      # werden auch alle unterebenen angezeigt
>               expAll = 0
>               NO = 1
>               NO.wrap = <ul class="subnav">|</ul>
>               NO.wrapItemAndSub = <li> |</li>
>               NO.ATagTitle.field = abstract // description // title
>               NO.stdWrap.wrap = <span>|</span>
>               CUR < .NO
>               CUR.ATagParams = style="color:#768eb0;font-size:13pt";
>                         }
>
> }
>
>
> Das auch soweit geht.
> Nun wollte ich das subnav mit css formatieren, damit das untere Menü  
> etwas eingerückt ist, jedoch klappt das nicht.
>
> .subnav  li  a {
>        margin-left:10px;
>     line-height: 43px;
>     height: 23px;
>     display:block;
>     color:#051541;
>     text-decoration: none;
>     text-indent: 7px;
>         font-weight: bold;
>     background-color: red;
>     border: 1px solid red;
>     border-left-width: 0px;
>     border-right-width: 0px;
>     border-top-color: #d9dfe7;
>    }
>
> .subnav li a span {
>     height: 23px;
>     display:block;
>     margin-left: 24px;
>     background-color: red;
>    }
>
> .subnav li a:hover {
>     background-color: #f2f2f2;
> }
>
> hier mal das Menü "bitte auf Prof. Dr. Wolfgang Schnotz" klicken.
> http://typo1.uni-landau.de/index.php?id=27
>
> Ist es auch möglich, die Formatierung für das Untermenu direkt im  
> Typoscript zu machen oder ist eine css Klasse zwingend erforderlich?
>
> Habe immer noch Verständisprobleme bei Menüs mit CSS . Kennt jemad eine  
> gute Doku im Netz die das Eschritt für Schritt erklärt?
>
Hallo Jochen,
natürlich währe es möglich. die formatierung auch direct in TypoScript zu  
machen.
aber das ist un-elegant.

weil dann jedes list item eventuell eine relativ lange style="" definition  
hätte.

da ist es praktischer das per css zu machen.

momentan sieht es sol aus als würdest du gar kein sub menü erzeugen denn
die classe "subnav" taucht im quellcode nicht auf.

für so ein "debugging" empfehle ich dir die firfox extension firebug

mit dieser extension kannst du sehr einfach einsehen welche elemente welche
attriebute haben. und auch testweise direct im browser einzelne werte  
überschreiben um z.b zu gucken
wie es sich auswirkt.

hier noch ein paar generelle tipps zu menüs mit CSS

in der regel verwendt man versachchtelte en list. um folgendes konstruckt  
zu bekommen:

* Hauptpunkt
    * Sub
    * Sub
* Hauptpunkt
* Hauptpunkt
    * Sub
    * Sub


bis dahin ist das pures html.

das html dazu sieht ungefähr so aus (hab mal alle attriebute rausgeworfen  
ums kompakter zu machen):
<ul id="navi">
	<li><a>Hauptpunkt</a>
		<ul>
			<li><a>sub</a></li>
			<li><a>sub</a></li>
		</ul>
	</li>
	<li><a>Hauptpunkt</a></li>
	<li><a>Hauptpunkt</a>
		<ul>
			<li><a>sub</a></li>
			<li><a>sub</a></li>
		</ul>
	</li>
</ul>


auf basis dieses htmls kann man jetzt die gestaltung machen.
zu erstmal sagt man der liste die basics:

ul#navi{margin:0;padding:0;}

ul#navi li{
	margin:0;
	list-style-image:none;
}

als nächstes können wir z.b sagen wir wollen das unterpunkte eingerückt  
sind das würde ich
über folgende regel machen:

ul#navi li li {margin-left:20px}

dann kannst du natürlich noch dem link ein bisschen gestlatung mitgeben.
/* erste ebene */
ul#navi li a {background:#eee}

/* zweite ebene */
ul#navi li li a {background:#ccc}

man kann mit diesen listen konsruckten auch noch ganz andere sachen bauen:
z.b Suckerfish dropdowns
http://www.alistapart.com/articles/dropdowns/

dieses listen konstruckt wenn man es erstmal verstanden hat ist sehr  
unviersell für
hirachiche menü struckturen einsetzbar. und selbst ohne CSS noch für den  
leser verständlich.

soll ja bis weilen leute geben die mit text browsern oder sowas daher  
kommen *g*

gruss chris


-- 
Christian Wolff // Berlin
http://www.connye.com

Latest Projects:
http://www.flycall.de | http://www.atr24.de | http://www.titanic.de