Joachim: Großes Problem mit Vererbung?!

SELF-Forum

Großes Problem mit Vererbung?!

Joachim
– Informationen zu den Bewertungsregeln

Hallo liebe Community!
Das ist mein erstes Posting hier und ich hoffe, dass ihr mir helfen könnt.

Ich möchte erreichen, dass eine Liste horizontal angezeigt wird. In diese Liste soll eine andere verschachtelt werden. Soweit habe ich noch keine Probleme. Doch die zweite, verschachtelte Liste soll vertikal angezeigt werden. Damit habe ich ehrlich gesagt riesige Probleme. Die zweite Liste übernimmt die horizontale Eigenschaft.

Die erste Liste habe ich von einem Beispiel aus dem Internet. Leider weiß ich die Adresse nicht mehr. Diese Liste habe ich dann auf meine Bedürfnisse angepasst. Aber ich habe nicht verstanden, was dafür sorgt, dass die Liste horizontal und nicht vertikal dargestellt wird. Ich sehe vielleicht den Wald vor lauter Bäumen nicht, aber könntet ihr mir das bitte ganz kurz auch noch sagen.

Jetzt aber zu meinem eigentlichen Problem. Hier kommt der komplette Quelltext, damit ihr nachvollziehen könnt, was ich genau meine.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  
<html>  
<head>  
 <title>Untitled</title>  
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
 <meta http-equiv="Content-Script-Type" content="text/javascript">  
 <meta http-equiv="Content-Style-Type" content="text/css">  
<style type="text/css">

body{  
 background-color: #000000;  
 font-family: verdana, arial, sans-serif;  
 color: #FFFFFF;  
}  
div#header{  
 margin-left: auto;  
 margin-right: auto;  
 width: 800px;  
}  
div#headpic{  
 margin: 0;  
}  
#navigation {  
  height:2em;  
  line-height:2em;  
  margin: 0;  
}  
  
#navigation ul {  
  margin-top:0;  
  margin-bottom:0;  
  margin-left:auto;  
  margin-right:auto;  
  padding:0;  
  background-color: #000000;  
}  
  
#navigation li {  
  float:left;  
  margin:0;  
  padding:0;  
  list-style-type:none;  
  border-right:1px #FFFFFF solid;  
  background-color: #000000;  
}  
#navigation li a {  
  display:block;  
  padding:0 12px;  
  font-size:0.8em;  
  text-transform:uppercase;  
  letter-spacing:1px;  
  background-color: #000000;  
  color: #797979;  
}  
#navigation li a:hover {  
  display:block;  
  padding:0 12px;  
  font-size:0.8em;  
  text-transform:uppercase;  
  letter-spacing:1px;  
  background-color: #FFFFFF;  
  color: #434343;  
}
~~~[code lang=html]  
</style>  
</head>  
  
<body>  
<div id="all">  
 <div id="header">  
  <div id="headpic">  
   <img src="bilder/headpic.jpg" width="800" height="161" alt="">  
  </div>  
  <div id="navigation">  
   <ul>  
    <li><a href="#">Home</a></li>  
    <li><a href="#">Bilder</a></li>  
    <li><a href="#">Videos</a>  
     <ul>  
      <li>Listenpunkt1</li>  
      <li>Listenpunkt2</li>  
      <li>Listenpunkt3</li>  
      <li>Listenpunkt4</li>  
     </ul>  
    </li>  
    <li><a href="#">Wir</a></li>  
    <li><a href="#">Kontakt</a></li>  
   </ul>  
  </div>  
 </div>  
</div>  
</body>  
</html>  
[code]  
  
Vielen Dank für eure Hilfe! Ich hoff, ihr könnt einem Anfänger wie mir auf die Sprünge helfen!  
Danke schön, Joachim!
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Großes Problem mit Vererbung?!

    Tim Tepaße
    +3 Informationen zu den Bewertungsregeln

    Hallo Joachim,

    #navigation li {
      float:left;

    Diese CSS Anweisung sorgt dafür, dass alle Listenelemente unterhalb eines Elementes mit der ID "navigation" gefloatet werden. Float bedeutet hier soviel wie aus den Fliesstext rausnehmen, so dass die „normalen“ Definitionen für den Umbruch von Listenelementen nicht mehr gelten. Konsequenterweise werden die Listenelemente nicht mehr untereinander angezeigt, sondern nebeneinander, nach dem Modell von Float.

    Doch die zweite, verschachtelte Liste soll vertikal angezeigt werden. Damit habe ich ehrlich gesagt riesige Probleme. Die zweite Liste übernimmt die horizontale Eigenschaft.

    Der Knackpunkt hier ist, dass das für *alle* Listenelemente gilt, also nicht nur für die Struktur ...

    #navigation → ul → li

    ... sondern auch für ...

    #navigation → ul → li → ul → li

    ... und alle weiteren darunter. Da Du das nicht möchtest, musst Du für Listenelemente innerhalb von Listenelementen das Float wieder entfernen. Dazu musst Du diese genau ansprechen. Das wäre dann diese CSS-Anweisung:

    ~~~css #navigation li li {
          float:none;
          /* ... */
      }

      
"li li" sagt nun mal „Listenelementen unterhalb von Listenelementen“. Streng genommen könnte man auch die erste Anweisung, die des Zuweisens des Floatens, nur für die Listenelemente, die sich direkt unter der unsortierten Liste unterhalb der  #navigation befinden, schreiben. Das wäre in CSS der Kindesselektor:  
  
  `#navigation ul > li { /* ... */ }`{:.language-css}  
  
Allerdings verstehen gewisse minderwertige Browser diesen nicht; deswegen bleibt die erste Möglichkeit erst Mal noch die bevorzugte.  
  
  

> Die erste Liste habe ich von einem Beispiel aus dem Internet. Leider weiß ich die Adresse nicht mehr. Diese Liste habe ich dann auf meine Bedürfnisse angepasst. Aber ich habe nicht verstanden, was dafür sorgt, dass die Liste horizontal und nicht vertikal dargestellt wird.  
  
Float ist auf Anhieb tatsächlich etwas schwer zu verstehen und hat manche unerwünschten Nebeneffekte. Um zu verstehen, was Dein Quellcode macht, solltest Du zuerst das Konzept von Float verstehen; ich kann Dir dazu nur den Artikel [Float: Die Theorie](http://css-technik.de/css-examples/219_9/) ans Herz legen. Keine Sorge, so theoretisch ist er nicht.  
  
Womit Du Dich auch beschäftigen solltest, wären die Grundlagen der horizontal dargestellten Linklisten, dazu fliegen auch ein paar Artikel im Netz rum:  
  
• [Taming Lists (A List Apart)](http://alistapart.com/articles/taminglists/)  
• [Das Listutorial](http://css.maxdesign.com.au/listutorial/index.htm)  
• [Listamatic](http://css.maxdesign.com.au/listamatic/) (und 2Listamatic)  
  
Du wirst sehen, dass dort nicht notwendigerweise float sondern display:inline benutzt wird. Auch damit solltest Du Dich etwas vertraut machen.  
  
  
Tim
    Beitrag melden
    +3
    Informationen zu den Bewertungsregeln

    1. Großes Problem mit Vererbung?!

      MudGuard Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi,

      #navigation ul > li { /* ... */ }

      Nur würde das so auch nichts bringen, denn auf die innere ul würde das immer noch zutreffen, da auch diese ein Nachfahre von #navigation ist. Auch das ul muß per Kind-Selektor statt per Nachfahren-Selektor angesprochen werden.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Großes Problem mit Vererbung?!

      Joachim
      – Informationen zu den Bewertungsregeln

      Hallo Tim!
      Ich bin überwältigt. Wow. So eine tolle Hilfe! Vielen Dank dafür. Es hat mir sehr viel geholfen! Danke schön!
      Freundliche Grüße, Joachim

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln