Susanne Hugo: Klassen in verschachtelten listen

Liebe Forumsbesucher. Ich programmiere gerade die Site www.dorettehugo.de.

Da ich mit der Navigation noch nicht zufrieden war, habe ich ausgehend von einem Beispiel eine neue Navigation ausprobiert. Dazu habe ich die Liste verschachtelt und den Listenpunkten der zweiten Klasse ein eigenes class attribut zugewiesen.

Dies funktioniert leider nur bei drei der insgesamt sechs mit class definierten Punkte.

Kann mir da jemand weiterhelfen? Schon mal vielen Dank.
Susanne Hugo

Der Quellcode ist folgendermassen:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <meta name="generator" content="Adobe GoLive">
  <title>Unbenannte Seite</title>
  <style type="text/css" media="screen"><!--body         /* formatiert den gesamten Hintergrnd der Seite */
     { color: black; font-size: 100.01%; font-family: Verdana, Arial, Helvetica, sans-serif; background: #ff8c00; margin: 0; padding: 1em }

#navigation         {
color: inherit;
text-decoration: none;
background: transparent;
visibility: visible;
position: absolute;
top: 2px;
border: solid 1px #ff4500
}

#navigation LI   {
color: inherit;
font-size: 90%;
font-weight: bold;
text-decoration: none;
background: transparent none;
list-style: none;
margin: 0;
padding: 0;
width: 208px }

#navigation UL   {
   color: inherit;
   background: transparent none;
   padding: 0;
   margin: 0;
}

#navigation A     {
color: inherit;
text-decoration: none;
background-color: transparent;
display: block;
margin: 1px 0 0; padding: 3px 4px;
width: 198px;
border: solid 2px #ff4500;
-moz-border-radius: 4px;
border-radius: 4px
}

#navigation A:link,   {
color: #ff0;
background: #f60;
padding: 3px 4px;
border-style: solid;
border-width: 2px;
border-color: #ff8c00 #ff4500 #ff4500 #ff8c00
}

#navigation A:visited    {
color: #ff9;
background: #f60;
padding: 3px 4px;
border-style: solid;
border-width: 2px;
border-color: #ff8c00 #ff4500 #ff4500 #ff8c00
}

#navigation A:hover, #navigation A:focus    {
color: #ff0;
background: #f00 none; padding: 4px 3px 2px 5px;
border-style: inset;
border-width: 2px;
border-color: #ff4500 #ff8c00 #ff8c00 #ff4500
}

#navigation A.ca{
color: inherit;
line-height: normal;
background: #f60;
display: block;
margin: -5px 0 0;
padding: 3px 4px 3px 20px;
border-top: medium none
}--></style>
 </head>

<body>
   <div id="navigation">
   <ul>
    <li><a title="Willkommen bei dorettehugo.de" href="seite1.html">Willkommen</a>
   </ul>
   <ul>
    <li><a title="Meine Arbeit als Dialogregisseurin." href="#Regie">REGIE</a>
    <li><a class="ca" title="Dialogregie 1997 bis 2007 in Kinofilmen" href="dialogregiekino.html">Kino</a>
    <li><a class="ca" title="Dialogregie 1997 bis 2006 f&uuml;r TV, auf Video und DVD." href="dialogregietvdvdvideo.html">TV-DVD-Video</a>
   </ul>
   <ul>
    <li><a title="Meine Arbeit als Synchron-Sprecherin" href="#Stimme">STIMME</a>
    <li><a class="ca" title="Dorette h&ouml;ren im MP3-Format" href="hoerproben.html">Stimmproben</a>
    <li><a class="ca" title="Meine Stimme in Kinofilmen" href="sprechrollenfilme.html">im Kino</a>
    <li><a class="ca" title="Meine Stimme in Fernsehserien" href="sprechrollenserien.html">in Serien</a>
    <li><a class="ca" title="Meine Stimme in H&ouml;rspielen" href="hoerspiele.html">in H&ouml;rspielen</a>
   </ul>
   <ul>
    <li><a title="&uuml;ber Dorette, von Dorette" href="dorette.html">Privates</a>
    <li><a title="n&uuml;tzliche Verweise" href="Linksammlung.html">Links &amp; Credits</a>
    <li><a title="das G&auml;stebuch" href="#gästebuch">G&auml;stebuch</a>
    <li><a title="Kontaktinformationen und Rechtliches" href="impressum.html">Impressum</a>
   </ul>
  </div>
 </body>

</html>

  1. Nur als kleiner Trost. Der Grund warum dir noch niemand geantwortet hat ist der Folgende:

    Komplette Webseitenquelltexte zu posten macht die Fehlerbehebung unglaublich Zeitaufwändig. Die meisten hier Fragen beantwortenden lösen zwar gerne Probleme für Fragende, durchwälzen aber nicht kilometerlangen Code.

    Vielleicht kannst du deine Frage nocheinmal stellen und die betreffenden Stellen selbst heraussuchen.

    1. Nur als kleiner Trost. Der Grund warum dir noch niemand geantwortet hat ist der Folgende:

      Komplette Webseitenquelltexte zu posten macht die Fehlerbehebung unglaublich Zeitaufwändig. Die meisten hier Fragen beantwortenden lösen zwar gerne Probleme für Fragende, durchwälzen aber nicht kilometerlangen Code.

      Vielleicht kannst du deine Frage nocheinmal stellen und die betreffenden Stellen selbst heraussuchen.

      Hallo Rafael,

      danke für deien Antwort, dann frage ich nochmal mit kürzerem code :)

      Gruß Susanne

  2. Hallo,

    Dies funktioniert leider nur bei drei der insgesamt sechs mit class definierten Punkte.

    Vermutlich liegts am Quelltext. Den zu durchforsten war ich jetzt zu faul.

    Wohl nicht nötig, nur meine Meinung: <li>s besser abschließen, und im css nur kleingeschriebene Selektoren.

    Du must für Listen in Listen keine Extraklassen definieren.

      
    ul {} //aeusserste Liste  
    ul ul {} //innere Liste  
    ul ul ul {} //innere der inneren Liste  
    
    

    etc...

    Das geht natürlich mit allen Elementen, nicht nur <ul>s

    Gruß, der Arbeitslose

    --
    Sensibilisierung für eine diskriminierte Gruppierung ohne Lobby innerhalb der Gesellschaft! Ich selbst bin nicht arbeitslos.
    Weitere ohne Lobby:
    Jugendliche, Praktikanten, Ausländer, Arme, (Schwule), Muslime, Drogenabhängige, Behinderte, Tiere, Pflanzen, unser Planet.
    Lobbies sollten alle haben, ohne die das System nicht funktioniert, oder alle, die Opfer einer Zielrichtung des Systems sind und ohne diese glücklich lebten.
    1. Hallo,

      Dies funktioniert leider nur bei drei der insgesamt sechs mit class definierten Punkte.

      Vermutlich liegts am Quelltext. Den zu durchforsten war ich jetzt zu faul.

      Wohl nicht nötig, nur meine Meinung: <li>s besser abschließen, und im css nur kleingeschriebene Selektoren.

      Du must für Listen in Listen keine Extraklassen definieren.

      ul {} //aeusserste Liste
      ul ul {} //innere Liste
      ul ul ul {} //innere der inneren Liste

      
      > etc...  
      >   
      > Das geht natürlich mit allen Elementen, nicht nur <ul>s  
      >   
      > Gruß, der Arbeitslose  
        
        
      Hallo Arbeitsloser.  
      Vielen Dank für deine Antwort. Das habe ich schon probiert, aber wenn ich den Klassenstil in einen Elementstil umwandele, funktioniert die Formatierung nicht mehr.  
      Gruß Susanne
      
      1. Hallo,

        Ich hab gerade erst dieses in deinem ersten Posting entdeckt:

        meta name="generator" content="Adobe GoLive"

        Da macht es nicht sehr viel Spaß zu helfen, weil man weiß, das es im nichts verpufft.

        Das es bei Dir links rein, rechts raus zu gehen scheint, sieht man ferner daran, das Du Rafaels Einwurf nicht dahingehend interpretierst, das auch das Rezitieren des gesamten Vorpostings (inclusive Unterschrift des Vorposters) eine Verschwendung von Bytes darstellt... (Ganz anders die Fußnote, hier darf man sich immer und immer wieder wiederholen, angemeldete Nutzer können diese ausblenden. )

        Also viel Erfolg noch, hilf Dir selbst :-)

        Das habe ich schon probiert, aber wenn ich den Klassenstil in einen Elementstil umwandele, funktioniert die Formatierung nicht mehr.

        Das kann nicht sein, Hilfe ist aber nur erfolgreich, wenn Du anfängst, einen Texteditor zu verwenden. (Hätte jetzt einen Link gepostet zu Phase 5, aber der Käufer diese Editors hat im Gegensatz zum Autor seltsame Ansichten von Usability)

        Gruß, der Arbeitslose