Reto: CSS - DIV Id/Class Verstänisproblem

Hallo liebes Forum,

da ich mir CSS/PHP/jQuerry autodidaktisch angelesen habe, fehlen mir manchmal die Grundlagen oder "reales" Verständis für Zusammenhänge. So z.B. hier

<div id="toc_container">
<p class="toc_title">Inhaltsverzeichnis</p>
<ul class="toc_list">
<li>irgendetwas</li>
</ul>
</div>

Nun möchte ich das die UL nach rechts verschoben wird, also bei Class ein # davor:

	#toc_list {
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		color: #00285a;
	}

Änderung "keine", klar fehlt ggf. auch noch die Informaiton 'UL' also:

	#toc_list ul{
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		color: #00285a;
	}

Was mache ich falsch?

PS: CSS Inhalte als CSS markiert, aber keine Anzeige als CSS Quelltext!?

  1. Hallo Reto,

    eine id wird im css mit # angesprochen. Eine class hingegen mit einem .
    Du siehst wo dein Fehler liegt?;)

    Auf die class innerhalb von deinem toc_container kannst du eigentlich verzichten.

    Bis bald!
    Meowsalot (Bernd)

    1. hallo

      Hallo Reto,

      eine id wird im css mit # angesprochen. Eine class hingegen mit einem .

      oder man kann sie so ansprechen:

      nav[id="toc"]{ }
      ul[class=toclist] { }
      

      oder da man ja die Liste sowieso nur in der nav anspricht:

      nav[id="toc"]{ }
      nav[id="toc"] ul { }
      

      Regel: erstelle keine unnötigen IDs! also:

      nav.toc { }
      nav.toc ul { }
      

      mit dem entsprechenden Markup

      <nav class="toc">
        <!-- falls Klappmenu -->
        <button>Menu</button>
        <ul>
        </ul>
      </nav>
      
      --
      Neu im Forum! Signaturen kann man ausblenden!
      1. @@beatovich

        Regel: erstelle keine unnötigen IDs!

        Sagt wer?

        Regel: Alles, was einzigartig ist, kann eine ID haben.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. hallo

          @@beatovich

          Regel: erstelle keine unnötigen IDs!

          Sagt wer?

          Regel: Alles, was einzigartig ist, kann eine ID haben.

          Nicht alles, was eine ID hat, bleibt einzigartig.

          Und viele Dinge, die nach html Regeln einzigartig oder falsch sind, brauchen keine ID.

          --
          Neu im Forum! Signaturen kann man ausblenden!
          1. Hallo,

            ich glaube mein Fokus war zu weit offen ;-) gemeint war:

            <ul class="toc_list">
            <li>irgendetwas</li>
            </ul>
            

            hier bringt

            <style type="text/css">
            	#toc_list ul{
            		max-width: 680px;
            		margin-left: auto;
            		margin-right: auto;
            		color: #00285a;
            	}
            </style>
            

            nichts, keine Änderung obwohl extra als Inline CSS vorher aufgerufen.

            1. Moin Reto,

              <ul class="toc_list">
              <li>irgendetwas</li>
              </ul>
              

              hier bringt

              <style type="text/css">
              	#toc_list ul{
                    /* … */
              	}
              </style>
              

              nichts, keine Änderung obwohl extra als Inline CSS vorher aufgerufen.

              Das kann ja auch gar nicht funktionieren.

              Viele Grüße
              Robert

            2. hallo

              ich glaube mein Fokus war zu weit offen ;-) gemeint war:

              <ul class="toc_list">
              <li>irgendetwas</li>
              </ul>
              

              hier bringt

               <style type="text/css">
               	#toc_list ul{
              

              hier suchst du nach diesem Markup:

              <ul id="toc_list">
              <li>irgendetwas</li>
              </ul>
              

              Während du aber für dein aktuelles Markup diesen Selektor brauchst

              .toc_list ul {
               		max-width: 680px;
               		margin-left: auto;
               		margin-right: auto;
               		color: #00285a;
              }
              
              --
              Neu im Forum! Signaturen kann man ausblenden!
              1. Hi,

                 <style type="text/css">
                 	#toc_list ul{
                

                hier suchst du nach diesem Markup:

                <ul id="toc_list">
                <li>irgendetwas</li>
                </ul>
                

                nein, laut CSS müßte das ul Nachfahrenelement des Elements mit der ID toc_list sein. Im HTML ist aber ul selbst das Element mit der ID.

                Während du aber für dein aktuelles Markup diesen Selektor brauchst

                .toc_list ul {
                 		max-width: 680px;
                 		margin-left: auto;
                 		margin-right: auto;
                 		color: #00285a;
                }
                

                nein, auch hier müßte das ul Nachfahre des Elements mit der Klasse toc_list sein - es ist aber das ul selbst, das der Klasse angehört.

                cu,
                Andreas a/k/a MudGuard

                1. Ich glaube ich stehe total auf dem Schlauch. ⚠️

                  Also ich habe jetzt:

                  	.toc_list ul {
                  		max-width: 680px;
                  		margin-left: auto;
                  		margin-right: auto;
                  		color: #00285a;
                  	}
                  

                  und

                  
                  <ul class="toc_list">
                  <li>
                  

                  Es erfolgt keine Änderung. Der FF Inspektor zeigt keine Codeänderung (auch nichts durchgestrichenes), in der FF Quelltext ansicht, ist der Code aber vorhanden.

                  Bahnhof?

                  1. Moin Reto,

                    ein kleiner Tipp: In CSS sind

                    ul .toclist {
                        /* … */
                    }
                    

                    und

                    .toclist ul {
                        /* … */
                    }
                    

                    nicht das Gleiche.

                    Viele Grüße
                    Robert

                    1. Hallo Robert,

                      und für

                      <ul class="toc_list">

                      treffen beide Selektoren nicht in's Schwarze. Außer der Reihenfolge ist auch das Space in CSS signifikant.

                      .toc_list ul ist ein ul Element, das ein Element mit Klasse .toc_list als Vorfahre hat

                      ul .toc_list ist ein beliebiges Element mit Klasse .toc_list, das ein ul Element als Vorfahre hat

                      ul.toc_list ist ein ul Element mit Klasse .toc_list. Und das wird gebraucht.

                      Rolf

                      --
                      sumpsi - posui - clusi
                  2. Hallo,

                    Bahnhof?

                    Gutes Stichwort! Dort nimmst du den Zug zum Wiki und schaust dir dort die Selektoren an, insbesondere die Kombinatoren!

                    Gruß
                    Kalk

                    1. @@Tabellenkalk

                      Dort nimmst du den Zug […] insbesondere die Kombinatoren!

                      Kombinatoren bei Zügen – du meinst sowas wie die Scharfenberg-Kupplung?

                      LLAP 🖖

                      --
                      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            3. Hallo Reto,

              ich glaube mein Fokus war zu weit offen ;-)

              hast du meine Antwort gelesen? Und auf type="text/css" kann man im Jahre 2018 auch gut und gerne verzichten ;)

              Bis bald!
              Meowsalot (Bernd)

              1. Danke Bernd, wurde entfernt.

                Reto

          2. @@beatovich

            Nicht alles, was eine ID hat, bleibt einzigartig.

            Das weiß man vorher – bevor man das Markup schreibt. Es sei denn , man hat bei der Inhaltsarchitektur was falsch gemacht. Oder hat die völlig übergangen und einfach drauflos gecodet.

            Und viele Dinge, die nach html Regeln einzigartig oder falsch sind, brauchen keine ID.

            Ob sich eine ID als nützlich erweist, das weiß man manchmal erst hinterher.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Hallo,

    da ich mir CSS/PHP/jQuerry autodidaktisch angelesen habe,

    Was mache ich falsch?

    Da fehlt offenbar die Grundlage HTML!?

    PS: CSS Inhalte als CSS markiert, aber keine Anzeige als CSS Quelltext!?

    Da fehlen Leerzeilen davor bzw. danach.

    Gruß
    Kalk

  3. @@Reto

    `<p class="toc_title">Inhaltsverzeichnis</p>`
    

    Was mache ich falsch?

    p ist falsch. Das möchte gern eine Überschrift sein.

    PS: CSS Inhalte als CSS markiert, aber keine Anzeige als CSS Quelltext!?

    Vor und nach Codeblöcken herum sollten Leerzeilen sein. Ich hab das mal berichtigt.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. hallo

      `<p class="toc_title">Inhaltsverzeichnis</p>`
      

      Was mache ich falsch?

      p ist falsch. Das möchte gern eine Überschrift sein.

      oder eventuell ein <button>Menu</button> für ein Klappmenu

      Man weiss es nicht.

      --
      Neu im Forum! Signaturen kann man ausblenden!