Listenelemente mit verschiedenen Klassen belegen

[kay899]

Hallo,

ich verzweifle schon länger an einer Kleinigkeit. Ich habe aus einer XML-Struktur ein Menü erzeugt, das aus Menüblöcken, sowie den dazu gehörigen Menüpunkten besteht. Das funktioniert wunderbar.

Nun möchte ich die Menüblöcke im Hintergrund orange einfärben und die Menüpunkte blau.

Leider habe ich keine Ahnung (bin Anfänger bei CSS), wie ich die CSS aufbauen muss, damit das klappt. Hier meine erfolglosen Versuche:

echo "<ul class=\"navigation\">";
    //Erzeugen der Menüblöcke => sollen orange dargestellt werden
    foreach ($pages as $page){
        echo "<li class=\"orange\">" . $page->getAttribute('label') . "</li>";
        $pager = $page->getAttribute('name');
        $pxp = new domxpath($xml);
        $sections = $pxp->query('/navigation/block[@name="' . $pager . '"]/link');
        //Erzeugen der einzelnen Menüpunkte => sollen blau dargestellt werden
        foreach ($sections as $section){
            $page = $section->getAttribute('page');
            $value = utf8_decode($section->hasAttribute('value') ? $section->getAttribute('value') : trim($section->textContent));
            echo "<li class=\"blue\"><a href=\"hoteldatabase.php?site=" . $page . "\">$value</a></li>";
        }
     }
echo "</ul>"; 

Die dazugehörige CSS:

#navigation {
    background-color: #CCDEEE;
    float: left;
    border-right: 1px solid #666666;
    border-bottom: 1px solid #666666;
    width: 224px;
    min-height: 520px;
} /*Kopf der Seite*/
 
#navigation ul {
    list-style: none;
    padding:0;
    margin:0;
} /*Navigation: Listenpunkte ausblenden*/
 
#navigation li {
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
    padding: 5px;
    width: 214px;
    background-color: #F4B945;
    margin: 10px 0px;
}  /*Navigation: Styling der Navigationspunkte*/
 
#orange {
    background-color: #F4B945;
}  /*Navigation: Styling der Navigationspunkte*/
 
#blue {
    background-color: #99B7DA;
}  /*Navigation: Styling der Navigationspunkte*/

Ich hoffe jemand kann mir einen kleinen Tipp geben.

Vielen Dank für die Hilfe

Kay

[sili]

Dafür brauchst du keine zusätzlichen Klassen.

ul.navigation li { color:orange; }
ul.navigation li li { color:blue; }

[kay899]

Danke für den Tipp.

Da tut sich aber leider mal grad gar nichts.

Ich habe jetzt:

ul.navigation {list-style: none; padding:0; margin:0;}
ul.navigation li { background-color: #F4B945; }
ul.navigation li li { background-color: #99B7DA; }

Im PHP-Code habe ich um die Menüpunkte noch ein weiteres <ul> gelegt.

Macht aber keinen Unterschied aus.

Noch eine Idee?

Bin auch per ICQ da: 625628852

Danke
Kay

[wahsaga]

Wenn du ein clientseitiges Problem diskutieren willst, dann zeige bitte auch clientseitigen Code, und keinen serverseitigen.

[Wyveres]

2 Fehler

#orange {
    background-color: #F4B945;
}  /*Navigation: Styling der Navigationspunkte*/
 
#blue {
    background-color: #99B7DA;
}  /*Navigation: Styling der Navigationspunkte*/

Das sind keine Class in CSS das sind ID

 echo "<li class=\"orange\">" 

Fehler bemerkt?

das li li kann nicht klappen da die LI.blue und LI.orange nicht verschachtelt in einander liegen sondern auf der selben ebene
wenn du sie verschachteln willst dürfen die li.orange erst am ende der ersten foreach geschlossen werden.

[kay899]

Danke...

Vielen Dank dür die Tips.

Ich habe jetzt gelöst mit:

echo "<ul class=\"block\">";
    foreach ($pages as $page){
        echo "<li>" . $page->getAttribute('label') . "</li>"; //Pager wird als Blockname angezeigt
        $pager = $page->getAttribute('name'); //Aktuellen Block-Bereich auslesen
        $pxp = new domxpath($xml); //DomPath erstellen und Attribut Name von Page übergeben
        $sections = $pxp->query('/navigation/block[@name="' . $pager . '"]/link');
        echo "<ul class=\"menue\">";
        foreach ($sections as $section){
            $page = $section->getAttribute('page');
            $value = utf8_decode($section->hasAttribute('value') ? $section->getAttribute('value') : trim($section->textContent));
            echo "<li><a href=\"index.php?site=" . $page . "\">$value</a></li>";
        }
        echo "</ul>";
     }
echo "</ul>"; 

und in der CSS:

.block li {
    background-color: #F4B945;
    font-size: 13px;
    font-weight: bold;
    /*text-decoration: none;  */
}  /*Navigation: Styling Blocküberschriften*/
 
.menue li {
    background-color: #99B7DA;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
}  /*Navigation: Styling der Menüpunkte*/

Klappt jetzt so, wie ich das haben wollte

Kay

[h3ll]

Darf ein <ul> Tag überhaupt direkt in einem anderen <ul> Tag sein? Ich denke nicht. Hast du das mit dem W3C-Validator überprüft?

Falsch:

<ul>
    <ul>
        <li>&nbsp;</li>
    </ul>
</ul>

Richtig:

<ul>
    <li>
        <ul>
            <li>&nbsp;</li>
        </ul>
    </li>
</ul>