✔ Probleme mit Selektorzuweisungen und Regeln

[Jan-Frederik Stieler]

Hi,
ich hab zwei kleine Probleme mit der Kaskadierung von CSS.
Und zwar habe ich mehrere verschachtelte ULs welche als Menü herhalten müssen.
Wenn ich nun aber die verschiedenen Zustände der Links definieren möchte bekomme ich Probleme.
Die ULs bzw. die Lis bekommen für ihre Zustände verschiedene Klassen zugewiesen. Nun habe ich versucht diese zu stylen aber es werden trotzdem immer alle mit gestylt trotz der definierten Klasse.
Also ich hab hier die Listen:

<ul class="menu-cd" id="ziffermenu">
<li class="parent active item104"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof01" title="Birkenhof"><span>Birkenhof</span></a>
<ul>
<li id="current" class="active item30"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof01" title="1"><span>1</span></a></li>
<li class="item31"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof02" title="2"><span>2</span></a></li>
<li class="item32"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof03" title="3"><span>3</span></a></li>
<li class="item33"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof04" title="4"><span>4</span></a></li>
<li class="item34"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof05" title="5"><span>5</span></a></li>
<li class="item35"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof06" title="6"><span>6</span></a></li>
<li class="item36"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof07" title="7"><span>7</span></a></li>
<li class="item37"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/8" title="8"><span>8</span></a></li>
<li class="item38"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/9" title="9"><span>9</span></a></li>
<li class="item39"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/10" title="10"><span>10</span></a></li>
<li class="item40"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof11" title="11"><span>11</span></a></li>
<li class="item41"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/birkenhof/birkenhof12" title="12"><span>12</span></a></li>
</ul></li>
<li class="parent item105"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/ganzfeld/ganzfeld01" title="Ganzfeld"><span>Ganzfeld</span></a>
<ul>
<li class="item42"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/ganzfeld/ganzfeld01" title="1"><span>1</span></a></li>
<li class="item43"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/ganzfeld/ganzfeld02" title="2"><span>2</span></a></li>
<li class="item44"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/ganzfeld/ganzfeld03" title="3"><span>3</span></a></li>
<li class="item45"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/ganzfeld/ganzfeld04" title="4"><span>4</span></a></li>
<li class="item90"><a href="/joomla1.5_bueroexit/index.php/arbeiten/cd/ganzfeld/ganzfeld05" title="5"><span>5</span></a></li>
</ul></li></ul>

a:hover, li:hover
{
	color: #ff00fb;
	text-decoration: none;
}

/* ################  gallerymenu  ################  */

ul#ziffermenu li
{
	list-style-type: none;
}

ul#ziffermenu
{
	margin-top: 16px;
}

ul#ziffermenu *, ul#ziffermenu ul li
{
	float: left;
}

ul#ziffermenu li *
{
	float: right;
}

ul#ziffermenu li, ul#ziffermenu ul li 
{
	padding: 0 2px 0 0;
}

ul#ziffermenu li.active
{
	color: #ff00fb;
}



/* ###############  menuitems ############### */


.item105, .item107, .item109, .item110, .item111, .item112, .item113, .item114
{
	clear: left;
}

.item105
{
	padding-left: 5px;
}

Was nicht so funktioniert wie ich mir das vorstelle ist

ul#ziffermenu li.active
{
	color: #ff00fb;
}

.item105
{
	padding-left: 5px !important;
}

Das Padding wird überschrieben und wenn ich es mit !important die Gewichtung verändere wird es auf die gesamte verschachtelte UL angewand und nicht nur auf

ul li class="parent item105"

.
Und wenn ich versuche mit dem Universalselektor in Kombination das zu schreiben dann wird es auch auf alle LIs angewandt. Soweit is tdas ja auch richtig, wie ich das auf w3c verstanden habe. Nur wie krige ich das hin dass es in die andere Richting funktioniert. Also nicht mehr Elemente hinzugefügt wird sondern eigentlich weniger.
Und mit

ul#ziffermenu li.active

ist es im Grunde geanu das gleiche Problem wenn ich das richtig verstanden habe.

Viele Grüße

 

[Maik]

Hi,

dieser Selektor:

.item105
{
   padding-left: 5px;
}

gehört spezifiziert:

ul#ziffermenu li.item105
{
   padding-left: 5px;
}

Grund hierfür ist in der Kaskade der erstgenannte Selektor:

ul#ziffermenu li, ul#ziffermenu ul li
{
    padding: 0 2px 0 0;
}

Und solch eine Regel:

ul#ziffermenu li.active
{
    color: #ff00fb;
}

wird grundsätzlich nicht an das <a>-, respektive <span>-Element vererbt.

mfg Maik

 

[Jan-Frederik Stieler]

Hi,

ul#ziffermenu li.item105

nur macht das ja keinen Unterschied wenn ich nur das Wort Ganzfeld mit dem Padding belegen möchte. Weil da bei mir die ganze UL angesprochen wird und nicht nur die LI.
Was das andere Problem betrifft so hab ich das Problem das alle <a> bzw. alle <span> der Liste angesprochen werden wenn ich

ul#ziffermenu li.active a span

schreibe und nicht nur die LI welche die Klasse active hat.

Viele Grüße

 

[Maik]

Moin,

versteh nicht, wo hier das Problem ist.

Es steht dir doch offen, der Gültigkeit dieser Selektoren und ihrer enthaltenden CSS-Regeln für die Nachfolgeelemente der zweiten Menüebene mit einem entsprechend spezifizierten Deklarationsblock entgegenzuwirken

ul#ziffermenu li.active a
{
    color: #ff00fb;
}
ul#ziffermenu li.active ul li a
{
    color: #0040FF;
}

...

ul#ziffermenu li.item105 span
{
    padding-left: 5px;
}
ul#ziffermenu li.item105 ul li span
{
    padding-left: 0;
}

mfg Maik

 

[Jan-Frederik Stieler]

Hallo maik,
ich glaub ich stand mir mal wieder selber im Weg .
Ich hatte das Problem vorher anderst gelöst gehabt (für mich etwas einfacher) und mußte dann aber mein Menü umbauen und hab mich versucht die alte Version weiter zu verwenden und hab mich da etwas festgefahren.

Viele Grüße