[css] Sublevel aanspreken

[DumbAss]

Ik heb hetvolgende stukje code:

code:

<ul class="mainlevel"><li class="sublevel_0"><a href="index.php?option=com_content&amp;task=view&amp;id=55&amp;Itemid=103"">Activiteiten</a></li>
<li class="sublevel_1"><a href="index.php?option=com_events&amp;Itemid=44&amp;task=view_year">Agenda</a></li>

<li class="sublevel_1"><a href="index.php?option=com_content&amp;task=view&amp;id=11&amp;Itemid=87" id="active_menu>Conferentie Sept05</a></li>
<li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=51&amp;Itemid=90">Algemeen</a></li>
<li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=43&amp;Itemid=94">Thema</a></li>
<li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=19&amp;Itemid=95">Accomodatie</a></li>
<li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=39&amp;Itemid=91">Routebeschrijving</a></li>
<li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=40&amp;Itemid=113">Reserveringsinfo</a></li>
<li class="sublevel_1"><a href="index.php?option=com_content&amp;task=view&amp;id=58&amp;Itemid=114">Conferentie jan05</a></li>
<li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=41&amp;Itemid=115">Verslagen</a></li>
<li class="sublevel_2"><a href="index.php?option=com_zoom&amp;Itemid=116">Foto's</a></li>

<li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=42&amp;Itemid=117">Impressie</a></li>
<li class="sublevel_1"><a href="index.php?option=com_content&amp;task=view&amp;id=52&amp;Itemid=96">Evenementen</a></li>
</ul>

Wat ik nu wil is: ik wil de li's ná de a aanspreken met het id="active_menu"
Ik heb geprobeerd:

li.sublevel_1>a#active_menu + li.sublevel_2
maar dit werkt niet.

li.sublevel_1>a#active_menu
Hiermee spreek ik wel de goede a aan, maar hoe maak ik de browser nou wijs dat hij het element erná moet aanspreken?

Eigenlijk zou ik zoiets willen:
(li.sublevel_1>a#active_menu) + li.sublevel_2
Maar ja, dat bestaat niet.

Ik maak gebruik van het mambo-menu (www.mamboserver.com) en ik wil dit graag zoveel mogelijk standaard laten.

[whoami]

CSS hoort niet thuis in P&W, maar in W&G.
-> W&G dus.

[ Voor 14% gewijzigd door whoami op 23-05-2005 12:41 ]

[JaWi]

Mijn CSS is wat roestig, maar volgens mij bedoel je:

Cascading Stylesheet:

li.sublevel_1 > li.sublevel_2#active_menu {
...

[crisp]

Waarom nest je niet?

HTML:

<ul class="mainlevel">
    <li class="sublevel_0"><a href="index.php?option=com_content&task=view&id=55&Itemid=103"">Activiteiten</a>
        <ul>
            <li class="sublevel_1"><a href="index.php?option=com_events&Itemid=44&task=view_year">Agenda</a></li>
            <li class="sublevel_1"><a href="index.php?option=com_content&task=view&id=11&Itemid=87" id="active_menu>Conferentie Sept05</a>
                <ul>
                    <li class="sublevel_2"><a href="index.php?option=com_content&task=view&id=51&Itemid=90">Algemeen</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&task=view&id=43&Itemid=94">Thema</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&task=view&id=19&Itemid=95">Accomodatie</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&task=view&id=39&Itemid=91">Routebeschrijving</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&task=view&id=40&Itemid=113">Reserveringsinfo</a></li>
                </ul>
            </li>
            <li class="sublevel_1"><a href="index.php?option=com_content&task=view&id=58&Itemid=114">Conferentie jan05</a>
                <ul>
                    <li class="sublevel_2"><a href="index.php?option=com_content&task=view&id=41&Itemid=115">Verslagen</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_zoom&Itemid=116">Foto's</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&task=view&id=42&Itemid=117">Impressie</a></li>
                </ul>
            </li>
            <li class="sublevel_1"><a href="index.php?option=com_content&task=view&id=52&Itemid=96">Evenementen</a></li>
        </ul>
    </li>
</ul>

Op deze manier kan je ook heel wat classes achterwege laten.

[Sappie]

Dat gaat je afaik niet lukken met de huidige in gebruik zijnde css specs..

Waarom maak je geen gebruik van geneste ul's?

btw een ">" in css betekent direct child en werkt niet in IE

edit:
btje laat.. crisp was ff sneller

[ Voor 25% gewijzigd door Sappie op 23-05-2005 12:49 ]

[NomoDigger]

Sappie schreef op maandag 23 mei 2005 @ 12:48:
btw een ">" in css betekent direct child en werkt niet in IE

edit:
btje laat.. crisp was ff sneller

Gelukkig is er IE7 van Dean Edwards

[DumbAss]

crisp schreef op maandag 23 mei 2005 @ 12:45:
Waarom nest je niet?

HTML:

<ul class="mainlevel">
    <li class="sublevel_0"><a href="index.php?option=com_content&amp;task=view&amp;id=55&amp;Itemid=103"">Activiteiten</a>
        <ul>
            <li class="sublevel_1"><a href="index.php?option=com_events&amp;Itemid=44&amp;task=view_year">Agenda</a></li>
            <li class="sublevel_1"><a href="index.php?option=com_content&amp;task=view&amp;id=11&amp;Itemid=87" id="active_menu>Conferentie Sept05</a>
                <ul>
                    <li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=51&amp;Itemid=90">Algemeen</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=43&amp;Itemid=94">Thema</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=19&amp;Itemid=95">Accomodatie</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=39&amp;Itemid=91">Routebeschrijving</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=40&amp;Itemid=113">Reserveringsinfo</a></li>
                </ul>
            </li>
            <li class="sublevel_1"><a href="index.php?option=com_content&amp;task=view&amp;id=58&amp;Itemid=114">Conferentie jan05</a>
                <ul>
                    <li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=41&amp;Itemid=115">Verslagen</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_zoom&amp;Itemid=116">Foto's</a></li>
                    <li class="sublevel_2"><a href="index.php?option=com_content&amp;task=view&amp;id=42&amp;Itemid=117">Impressie</a></li>
                </ul>
            </li>
            <li class="sublevel_1"><a href="index.php?option=com_content&amp;task=view&amp;id=52&amp;Itemid=96">Evenementen</a></li>
        </ul>
    </li>
</ul>

Op deze manier kan je ook heel wat classes achterwege laten.

Dat doe ik liever niet, omdat het afwijkt van het standaard mambomenu.

En Jawi, wat jij poste kan niet omdat de active_menu niet aan sublevel_1 of _2 wordt toegekend, maar aan de <a die erin staat.

Als ik niemand verder iets weet zal ik toch maar de php-code moeten gaan aanpassen.

[BtM909]

DumbAss schreef op maandag 23 mei 2005 @ 14:41:
[...]

Dat doe ik liever niet, omdat het afwijkt van het standaard mambomenu.

Ja en Je kan (als het goed is) toch vrije tekst toevoegen. Dat jij het meteen doet zoals het moet....

[JaWi]

DumbAss schreef op maandag 23 mei 2005 @ 14:41:
[...]
En Jawi, wat jij poste kan niet omdat de active_menu niet aan sublevel_1 of _2 wordt toegekend, maar aan de <a die erin staat.

Hmm, okee; niet geheel correct, maar is het dan niet:

Cascading Stylesheet:

li.sublevel_1 > li.sublevel_2 a#active_menu

?