Ebenen bei Listen unterschiedlich formatieren

[calconeon]

Hi,

ich wurde kürzlich über dieses Forum darauf aufmerksam gemacht, dass die Navigation auf www.sn.schule.de/~mcg nur aus einer Listenebene besteht.

Ich habe nun ein Möglichkeit gefunden, wie ich es über PHP realisieren kann, mit verschachtelten Listen zu arbeiten.

Ich bin nun auch bestrebt die Formatierung so effektiv wie möglich zu lösen, das bedeutet folgendes:

ich möchte quasi

a.nav_1_inaktiv:link,
a.nav_1_inaktiv:visited {
 width:100%;
 display:block;
 padding:5px;
 border-left:1px solid #C0C0D5;
 border-right:1px solid #C0C0D5; }
a.nav_1_inaktiv:hover,
a.nav_1_inaktiv:active,
a.nav_1_aktiv:hover,
a.nav_1_aktiv:active,
a.nav_1_aktiv:link,
a.nav_1_aktiv:visited {
 width:100%;
 display:block;
 padding:5px;
 color:white;
 text-decoration:none;
 background-color:#C0C0D5;
 border-right:1px solid #C0C0D5;
 border-left:1px solid #C0C0D5; }

a.nav_2_inaktiv:link,
a.nav_2_inaktiv:visited {
 width:100%;
 display:block;
 padding:5px;
 padding-left:8px;
 padding-right:2px;
 padding-top:2px;
 padding-bottom:2px;
 font-weight:lighter;
 border-right:1px solid #C0C0D5;
 border-left:1px solid #C0C0D5; }
a.nav_2_inaktiv:hover,
a.nav_2_inaktiv:active,
a.nav_2_aktiv:hover,
a.nav_2_aktiv:active,
a.nav_2_aktiv:link,
a.nav_2_aktiv:visited {
 width:100%;
 background-color:#E8E4F0;
 display:block;
 padding-left:8px;
 padding-right:2px;
 padding-top:2px;
 padding-bottom:2px;
 font-weight:lighter;
 text-decoration:none;
 border-right:1px solid #C0C0D5;
 border-left:1px solid #C0C0D5; }

auf ein Konstrukt wie

<ul>
<li> Punkt 1</li>
<ul>
<li> Punkt 1.1</li>
</ul>
</ul>

übertragen. Wie ist das möglich ohne Diese ganzen verschiedenen Klassen zu definieren. Muss nicht irgendwie über CSS es möglich, alles in der ersten Ebene anders als in der 2. Ebene darzustellen?

Danke,
MfG Ronny

[wahsaga]

hi,

auf ein Konstrukt wie

<ul>
<li> Punkt 1</li>
<ul>
<li> Punkt 1.1</li>
</ul>
</ul>

übertragen. Wie ist das möglich ohne Diese ganzen verschiedenen Klassen zu definieren. Muss nicht irgendwie über CSS es möglich, alles in der ersten Ebene anders als in der 2. Ebene darzustellen?

informiere dich mal über kind- bzw. nachfahrenselektoren.

gruß,
wahsaga

[nag]

Hallo,

hier kannst du nachlesen, was wahsaga angesprochen hat.
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html#heading-5

auf ein Konstrukt wie

<ul>
<li> Punkt 1</li>
<ul>
<li> Punkt 1.1</li>
</ul>
</ul>

das Konstrukt ist falsch
richtig müsste es lauten:
<ul>
<li>Punk 1
  <ul>
  <li>Punkt 1.1</li>
  <li>Punkt 1.2</li>
  </ul>
</li>
<li>Punkt 2</li>
</ul>

ich hoffe du siehst den Unterschied in der Verschachtelung.

mfg NAG

[calconeon]

Hi,

du hast Recht,

hab ich falsch aufgeschrieben ;)

[calconeon]

Um ganz ehrlich zu sein raffe ich es dennoch nicht.

Kann mir jemand vitte ein Beispiel geben?

[Gunnar Bittersmann]

Um ganz ehrlich zu sein raffe ich es dennoch nicht.

calconeon,
http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente dürfte weiterhelfen. (Du hast eine Liste in einer Liste.)
Gunnar

[nag]

Hallo,

ich würde bei deinem Menü nur zwischen Haupt- und Untermenü unterscheiden. Eine Unterscheidung aktiv/inaktiv finde ich überflüssig.
Ein aktiver Menüpunkt muss nicht anklickbar (also kein "href") sein.
Warum eine Seite mit sich selbst verlinken?

http://jeenaparadies.net/weblog/2004/mai/php-menue/
http://www.alistapart.com/articles/keepingcurrent/

Um ganz ehrlich zu sein raffe ich es dennoch nicht.

beispiel:
<ul id="menu">
<li><a href="#">Punkt 1</a></li>
<li>Punkt 2
  <ul>
  <li><a href="#">Punkt 2.1</a></li>
  </ul>
</li>
</ul>

/* Formatierung Hauptmenü */
#menu a:link {}
#menu a:visited {}
#menu a:active {}
#menu a:hover {}

/* Formatierung Untermenü  (Achtung! ggf. müssen Linkeigenschaften vom Hauptmenü überschrieben werden. */
#menu ul a:link {}
#menu ul a:visited {}
... usw.

Beispiele findest du unter:
http://css.maxdesign.com.au/listamatic2/

mfg NAG