Druckbare Version
Hallo zusammen
Ich tue mich gerade ziemlich schwer mit der Formatierung einer vertikalen Navigation (mit Hintergrundbild/Rollover/Active).
Die Schrift von .level_1 soll grösser werden als .level_2 und .level_3. Wie muss ich das im CSS definieren, damit das funktioniert? Wie kann ich alle Level-1-Punkte definieren, ohne dass es auf Level 2 vererbt wird?
Danke im voraus
Chris
Es werden immer CSS Eigenschaften vom übergeordneten Element vererbt. Eine Unterbindung der Vererbung ist nicht möglich.
Das was du erreichen willst bzw. so sollte die Struktur aussehen. (im CSS)
HTML mäßig wäre das soCode:1. Ebene: #menu ul li a
2. Ebene: #menu ul li ul li a
3. Ebene: #menu ul li ul li ul li a
Alle Angaben die du für das ul, li, a in der ersten Ebene gemacht hast werden bis zu deiner dritten Ebene vererbt. Du kannst das nur ändern indem du die überschreibst. Z.b. so:HTML-Code:<ul>
<li><a href="#">Erste Ebene Link 1</a></li>
<li><a href="#">Erste Ebene Link 2</a>
<ul>
<li><a href="#">Zweite Ebene Link 1</a></li>
<li><a href="#">Zweite Ebene Link 2</a>
<ul>
<li><a href="#">Drittte Ebene Link 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
a:hover für Hovereffekt und eine klasse deiner wahl z.b. a.active wenn dein Link aktiv(ausgewählt) istCode:#menu ul li a {font-size: 20px;}
#menu ul li ul li a {font-size: 16px;}
#menu ul li ul li ul li a {font-size: 12px;}
Gruß Waldfee
Dankeschön - das ist perfekt!
Kurze Frage: a.active funktioniert nicht - bei aktiven Seiten ist in der Navi beim entsprechenden Eintrag kein Link mehr vorhanden. Wie wird dieser dann angesprochen?
Hallo ChrisT,
du solltest dir mal den Quellcode anschauen...
li span steht da doch soweit ich weiß. Also nimmst das dann.
Viele Grüße
vielleicht noch als Ergänzung:Zitat:
Zitat von ChrisT
a:active gilt nur im Moment des Mausklicks!
Mit der gerade aktiven Seite hat das nicht so viel zu tun. ;)
Das ist richtig. Wenn du dich über Pseudoklassen informieren willst, kann ich dir diese Seite empfehlen css4you.de
Wenn du willst, das dein Link, sei es das li oder das a eine klasse bei Aktiven Zustand (genau die Seite), dann kannst du das in einer tpl datei tun und dieses dann in den ordner templates speichern und dann im modul als template auswählen.
hier mal meine um li.active a.active zu erzeugen. Ich habe hier ein sehr einfaches Menu, ohne ein zweites lvl oder so. Aber vielleicht klappt es auch bei mehreren.
PHP-Code:<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><a class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>