Re-2: [Datug] xHTML Valide Navigation mit UL und LI mit mehr als einer Ebene

[m.uhl at mh-online.de]

oehm Ja das ist wohl der richtige ansatz es valid zu machen aber du 
verzichtest dann aber auf das UL in der 2ten ebene.

Das heisst auch das ich nur schwer abstände der gesamten 2ten ebene verändern 
kannn :S

aber danke nochmal :)

gruss
mathias


-------- Original Message --------
Subject: Re: [Datug] xHTML Valide Navigation mit UL und LI mit mehr als einer Ebene (27-Jul-2004 8:56)
From:    andreas at oddbyte.de
To:      m.uhl at mh-online.de

> ich glaube sein Problem war nicht, ein Menü mit LI UL zu erstellen,
> sondern nur, es im Typo3-Setup so einzustellen, dass das LI und UL
> richtig geschachtelt wird und das ist durchaus ein Problem, vor
> dem ich auch schon gestanden habe und das ich nicht lösen konnte.
> 
> Meine Lösung war dann einfach, bei tieferen Menü-Ebenen ein
> transparentes GIF zu benutzen um die Menüeinträge des Untermenüs
> einzurücken.
> 
> Hier der dadurch entstandene Quellcode:
> 
> <div id="menu">
>   <ul>
>    <li>
>     <img src="collapse.gif" align="absmiddle"><a href="Startseite.193.0.
> html" 
> class="subFirst">Startseite</a>
>    </li>
>    <li>
>     <img src="collapse.gif" align="absmiddle"><a href="News.196.0.html" 
> class="subFirst">News</a></li>
>    <li>
>    <li>
>     <img src="expand.gif" align="absmiddle"><a href="Downloads.344.0.html" 
> class="subFirstActive">Downloads</a>
>    </li>
>    <li>
>     <img src="clear.gif" width="15" height="1"><img src="collapse.gif" 
> align="absmiddle"><a 
> href="Hintergrundbilder.350.0.html" class="subSecond">Hintergrundbilder</a>
>    </li>
>    <li>
>     <img src="clear.gif" width="15" height="1"><img src="expand.gif" align="
> absmiddle"><a 
> href="Themes.527.0.html" class="SubSecondActive">Themes</a>
>    </li>
>    <li>
>     <img src="collapse.gif" align="absmiddle"><a href="Links.198.0.html" 
> class="subFirst">Links</a>
>    </li>
> </ul>
> </div>
> 
> 
> 
> ..das "clear.gif" rückt hier das Untermenü ein um 15 Pixel. Das Ganze kann 
> man
> z.B. auf www.cx65.de "in Action" sehen wie es aussieht, wenn man das ganze 
> noch mit
> einem Stylesheet "schmückt"...  :)
> 
> Hier noch der Typo3-Setup-Code:
> 
> 
> marks.MENU = HMENU
> marks.MENU {
>        entryLevel = 0
>        expAll = 0
>        noBlur = 1
> 
> 1 = TMENU
> 1 {
>    noBlur = 1
>    wrap = <tr><td nowrap><div id="menu"><ul> | </ul></div></td></tr>
>    NO {
>      linkWrap= <li><img src="collapse.gif" align="absmiddle">|</li>
>      ATagParams = class="subFirst"
>    }
>    ACT < .NO
>    ACT = 1
>    ACT {
>      linkWrap= <li><img src="expand.gif" align="absmiddle">|</li>
>      ATagParams = class="subFirstActive"
>    }
> }
> 
> 
> 2 = TMENU
> 2 {
>    noBlur = 1
>    NO {
>      linkWrap= <li><img src="clear.gif" width="15" height="1"><img src="
> collapse.gif" 
> align="absmiddle">|</li>
>      ATagParams = class="subSecond"
>    }
>    ACT < .NO
>    ACT = 1
>    ACT {
>      linkWrap= <li><img src="clear.gif" width="15" height="1"><img src="
> expand.gif" 
> align="absmiddle">|</li>
>      ATagParams = class="SubSecondActive"
>    }
>   }
> 
> }
> 
> 
> 
> Ingo Schommer wrote:
> 
> > hallo
> > 
> > öhm, eigentlich kein problem <li> und <ul> zu verschachteln.
> > das "so sollte es sein"-bsp is doch ok afaik.
> > 
> > gucksu hier http://css.maxdesign.com.au/listamatic/ für beispiele
> > bzw. hier 
> > http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp
> > zum generieren.
> > 
> > gruesse
> > ingo
> > 
> > m.uhl at mh-online.de wrote:
> > 
> >> Hallo Liste :)
> >>
> >> Ich hab ein Problem mit der Navigation wenn ich ein Menu scripte
> >> wird das nicht xHTML valid da ja das LI gechlossen wird und dann
> >> erst ein UL kommt.
> >>
> >> Wenn jemand nen Tip hat wäre das sehr nett
> >> danke
> >>
> >> gruss
> >> mathias
> >>
> >>
> >>
> >> BSP sieht es aus:
> >>
> >> <ul class="VERTICAL_TEXTMENU_MENU_TO_3">
> >>
> >> << SNIP >>
> >>
> >> <li class="VERTICAL_TEXTMENU_MENU_TO_3_ACT">
> >>   <a href="Typen_Uebersicht.3.0.html" onfocus="blurLink(this);">
> >>    Typen Übersicht
> >>   </a>
> >> </li>
> >>
> >>   <ul class="VERTICAL_TEXTMENU_MENU_TO_3_LVL2">
> >>     <li class="VERTICAL_TEXTMENU_MENU_TO_3_NO_LVL2">
> >>      <a href="TYP___Ueberschrift.28.0.html" onfocus="blurLink(this);">
> >>       TYP : Überschrift
> >>      </a>
> >>     </li>
> >>    </ul>
> >>
> >> << SNIP >>
> >>
> >> </ul>
> >>
> >>
> >> BSP so sollte es sein:
> >>
> >> <ul class="VERTICAL_TEXTMENU_MENU_TO_3">
> >>
> >> << SNIP >>
> >>
> >> <li class="VERTICAL_TEXTMENU_MENU_TO_3_ACT">
> >>   <a href="Typen_Uebersicht.3.0.html" onfocus="blurLink(this);">
> >>    Typen Übersicht
> >>   </a>
> >>   <ul class="VERTICAL_TEXTMENU_MENU_TO_3_LVL2">
> >>     <li class="VERTICAL_TEXTMENU_MENU_TO_3_NO_LVL2">
> >>      <a href="TYP___Ueberschrift.28.0.html" onfocus="blurLink(this);">
> >>       TYP : Überschrift
> >>      </a>
> >>     </li>
> >>    </ul>
> >> </li>
> >>
> >> << SNIP >>
> >>
> >> </ul>
> >>
> >> Typoscript dazu:
> >>
> >> MENU_TO_3 {
> >>    1 = HMENU
> >>    1 {
> >>        entryLevel = 0
> >>        1 = TMENU
> >>        1 {
> >>            collapse = 0
> >>            wrap = <ul class="VERTICAL_TEXTMENU_MENU_TO_3"> | </ul>
> >>            NO {
> >>            linkWrap = <li class="VERTICAL_TEXTMENU_MENU_TO_3_NO">|</li>
> >>            }
> >>            ACT = 1
> >>            ACT {
> >>            linkWrap = <li class="VERTICAL_TEXTMENU_MENU_TO_3_ACT">|</li>
> >>            }           
> >>        }
> >>        2 = TMENU                                                    2 {
> >>            collapse = 0
> >>            wrap = <ul class="VERTICAL_TEXTMENU_MENU_TO_3_LVL2"> | </ul>
> >>            NO {
> >>            linkWrap = <li 
> >> class="VERTICAL_TEXTMENU_MENU_TO_3_NO_LVL2">|</li>
> >>            }
> >>            ACT = 1
> >>            ACT {
> >>            linkWrap = <li 
> >> class="VERTICAL_TEXTMENU_MENU_TO_3_ACT_LVL2">|</li>
> >>            }
> >>        }
> >>        3 = TMENU                                                    3 {
> >>            collapse = 0
> >>            wrap = <ul class="VERTICAL_TEXTMENU_MENU_TO_3_LVL3"> | </ul>
> >>            NO {
> >>            linkWrap = <li 
> >> class="VERTICAL_TEXTMENU_MENU_TO_3_NO_LVL3">|</li>
> >>            }
> >>            ACT = 1
> >>            ACT {
> >>            linkWrap = <li 
> >> class="VERTICAL_TEXTMENU_MENU_TO_3_ACT_LVL3">|</li>
> >>            }   
> >>        }       
> >>    }
> >> }
> >>
> >>
> >> _______________________________________________
> >> Datug mailing list
> >> Datug at datug.de
> >> http://lists.datug.de/cgi-bin/mailman/listinfo/datug
> >>
> >>
> >>  
> >>
> > 
> > _______________________________________________
> > Datug mailing list
> > Datug at datug.de
> > http://lists.datug.de/cgi-bin/mailman/listinfo/datug
> > 
> > 
> 
> _______________________________________________
> Datug mailing list
> Datug at datug.de
> http://lists.datug.de/cgi-bin/mailman/listinfo/datug
>