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:
Die dazugehörige CSS:
Ich hoffe jemand kann mir einen kleinen Tipp geben.
Vielen Dank für die Hilfe
Kay
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:
PHP-Code:
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>";
Code:
#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*/
Vielen Dank für die Hilfe
Kay
Kommentar