eigene definition fül <ul> und <li> innerhalb #navi

[michaah]

die verschachtelung von elementen ist für mich noch sehr verwirrend:

Wie definiere ich  am geschicktesten und übersichtlichsten das aussehen von <ul> und <li> ( elementen ( und eventuel auch <h1> und <h2> elementen ) innerhalb eines vordefinierten bereichs? Ich habe im sylesheet einen bereich #navi mit position, breite, hg-farbe usw definiert, der die seitliche navigation enthalten soll. Darin möchte ich nun die genannten elemente anders , vor allem compakter ( compact wird ja nicht oder kaum unterstützt), aber auch farblich unterschiedlich zur definition im inhaltsbereich ausehen lassen.

Füge ich das nun einfach in die #navi {...} definition ein oder bietet sich hierfür eine andere vorgehensweise an?

[afra]

Hallo!

Indem Du Deiner Liste (ul) die ID #navi gibst die Du (hoechtswahrscheinlich) unsinnigerweise zusaetzlich darum herum definiert hast.

Schönen Gruß

Afra

[michaah]

Indem Du Deiner Liste (ul) die ID #navi gibst die Du (hoechtswahrscheinlich) unsinnigerweise zusaetzlich darum herum definiert hast.

hm, deine antwort zeigt mir, dass meine frage so unberechtigt nicht war. Aber ich verstehe sie nicht ganz: Wenn mein navi ausschliesslich aus der liste bestehen würde, könnte ich das nachvollziehen, obwohl mir nicht klar ist, warum es unsinn ist es umgekehrt zu machen, also ein div mit der ID #navi und darin eine liste, .... aber nein, du hast recht, mir war nicht so recht klar, dass alle blockbildenen elemente zettel der pinwand sind, ich war da auf "div" fixiert. Danke für diesen hinweis!

Jedoch, da mein #navi mehr als nur die Liste (ul) enthält (mindestens noch eine überschrift), ist doch die von dir vorgeschlagene lösung nicht so optimal, oder? Ich bin dann doch gezwungen, alles in ein div zu packen, oder gibt es sinnvollere lösungen

Wo und wie sind nun die eigenschaften für ul und li definiert, das ist eigentlich meine hauptfrage, doch unter #navi {} im stylesheet?

[Auge]

Hallo

Jedoch, da mein #navi mehr als nur die Liste (ul) enthält (mindestens noch eine überschrift), ist doch die von dir vorgeschlagene lösung nicht so optimal, oder? Ich bin dann doch gezwungen, alles in ein div zu packen, ...

Gezwungen, nein. Aber um zusammengehörige Elemente zu gruppieren, ist <div> das richtige Element.

Wo und wie sind nun die eigenschaften für ul und li definiert, das ist eigentlich meine hauptfrage, doch unter #navi {} im stylesheet?

#navi ul {...}  
#navi ul li {...}  
#navi ul li a {...}  
/* und so weiter */

Tschö, Auge

[afra]

Hallo!

Wo und wie sind nun die eigenschaften für ul und li definiert, das ist eigentlich meine hauptfrage, doch unter #navi {} im stylesheet?

Auge hat Dir diesbezueglich schon ausfuehrlich geantwortet. Wenn Es sich nur um die Liste handelt wuerde dann, wie auch von mir beschrieben ein Selektorenzugriff auch nur so moeglich sein:

#navi {...}
#navi li {...}
#navi li a {...}

Was das ganze dann noch etwas verschlankt. Natuerlich kannst Du Deinen Navigationsbereich auch noch mit einem umschliessenden div strukturieren. Das was Du aber anscheinend mit der Headline bezweckst, erscheint mir eher ein Listenpunkt hoechster Ordnung zu sein. Und den kannst Du ja beliebig mit CSS formatieren.

Schönen Gruß

Afra

[D.R.]

Hallo,

Wie definiere ich  am geschicktesten und übersichtlichsten das aussehen von <ul> und <li> ( elementen ( und eventuel auch <h1> und <h2> elementen ) innerhalb eines vordefinierten bereichs?

<http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML: Formate für verschachtelte Elemente definieren>

mfg. Daniel

[michaah]

<http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML: Formate für verschachtelte Elemente definieren>

gut, vllt hätte ich erwähnen sollen, dass ich diese seite mehrfach gelesen habe.

[D.R.]

Hallo,

<http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML: Formate für verschachtelte Elemente definieren>

gut, vllt hätte ich erwähnen sollen, dass ich diese seite mehrfach gelesen habe.

Was verstehst du daran nicht?

mfg. Daniel

[OhneName]

Hallo,

  
<div id="navi">  
  <h2>Navigation</h2>  
  <ul>  
    <li><a href="example.html">Link</a></li>  
    <li><a href="example.html">Link</a></li>  
    <li>Aktuelle Seite</li>  
    <li><a href="example.html">Link</a></li>  
    <li><a href="example.html">Link</a></li>  
  </ul>  
</div>  

  
#navi { /* formatiert das Element mit id "navi" */ }  
#navi h2 { /* formatiert alle Überschriften zweiter Ordnung, die sich in einem Element mit der id "navi" befinden */ }  
#navi ul { /* formatiert alle ungeordneten Listen, die sich in einem Element mit der id "navi" befinden */ }  
#navi ul li { /* formatiert alle Listenpunkte, die sich in einer ungeordneten Liste, die sich in einem Element mit der id "navi" befindet, befinden */ }  
#navi ul li a { /* formatiert alle Links, die sich in einem Listenpunkt, der sich in einer ungeordneten Liste, die sich in einem Element mit der id "navi" befindet, befindet, befindet :-) */ }  

Gruss,
OhneName

[michaah]

Taag,

Hallo,

[code lang=html]

...

Gruss,
OhneName

Das war genau was ich suchte. Dass es irgendwie so gehen mußte, schwante mir beim durchlesen des tutorials, ich war nur nicht darauf gekommen, wie genau.
Danke für deine gute beschreibung!

gruß

michaah

[Detlef G.]

Hallo OhneName

  

> #navi ul li { /* formatiert alle Listenpunkte, die sich in einer ungeordneten Liste, die sich in einem Element mit der id "navi" befindet, befinden */ }  
  
#navi li { /* reicht auch, wenn in #navi keine Listenpunkte in anderen Listen anders formatiert werden sollen */ }  
  

> #navi ul li a { /* formatiert alle Links, die sich in einem Listenpunkt, der sich in einer ungeordneten Liste, die sich in einem Element mit der id "navi" befindet, befindet, befindet :-) */ }  
  
#navi a { /* reicht auch, wenn keine Links innerhalb von #navi aber außerhalb der Liste anders formatiert werden sollen */ }  

Auf Wiederlesen
Detlef