Thomas aus HH: #footer .menu .ende{ <- falsch, aber was?

Ich möchte ein Menü erstellen, und der letzte Bereich soll ohne Aussenbegrenzung sein (Border)

<span class="menu">titel</span>
<span class="menu">titel</span>
<span class="menu">titel</span>
<span class="menu">titel</span>
<span class="ende">titel</span>

titel ! titel ! titel ! Titel ! titel

#footer .menu {
padding: 0 0 0 15px;
border-right:1px solid #fff;
display: block;
width: 100px;
color: #fff;
float: left;
}

Doch der letzte Bereichin meiner CSS stimmt nicht!

#footer .menu .ende{
border:0;
}

Kann mir jemand sagen was ich da falsch machen?

  1. Hi,

    #footer .menu .ende{
    border:0;
    }

    Kann mir jemand sagen was ich da falsch machen?

    Hast du ein Element mit der Klasse "ende", das sich innerhalb eines Vorfahrenelementes mit der Klasse "menu" befindet? Nein.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
  2. @@Thomas aus HH:

    nuqneH

    Kann mir jemand sagen was ich da falsch machen?

    Du sprechen von dir in der Mehrzahl. ;-)

    Ansonsten möchte dein Menü sicher eine Liste sein:

    <ul>  
      <li>titel</li>  
      <li>titel</li>  
      <li>titel</li>  
      <li>titel</li>  
      <li>titel</li>  
    </ul>
    

    Gestaltung (keine Bullets, Items nebeneinander angeordnet) per CSS.

    Wenn alle Geschwisterelemente derselben Klasse "menu" angehören, ist das ein sicheres Indiz dafür, dass die Klasse überflüssig ist.

    Ebenso überflüssig ist eine Klasse "ende" für das letzte Item; dafür gibt es die Pseudoklassen [link:http://www.w3.org/TR/selectors/#last-child-pseudo@title=:last-child] und [link:http://www.w3.org/TR/selectors/#last-of-type-pseudo@title=:last-of-type].

    Anstelle eines Elements ('div'?) mit der ID "footer" ist womöglich ein 'footer'-Element angebracht.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Hallo,

      [...]
      Ansonsten möchte dein Menü sicher eine Liste sein:
      [...]

      hast du dir für diese Gebetsmühle eigentlich einen Textbaustein mit automatischem Formularsenden angelegt?

      Gruß
      Kalk

      1. [...]
        Ansonsten möchte dein Menü sicher eine Liste sein:
        [...]

        hast du dir für diese Gebetsmühle eigentlich einen Textbaustein mit automatischem Formularsenden angelegt?

        Wäre kein Fehler - ich gehen aber davon aus, dass Gunnar mit vollem Elan jedes mal per Hand schreibt :)

        Und diese Gebetsmühle ist imho keinesfalls verkehrt - sie trifft genau den Kern des Problems des OP.

  3. Om nah hoo pez nyeetz, Thomas aus HH!

    Ich möchte ein Menü erstellen, und der letzte Bereich soll ohne Aussenbegrenzung sein (Border)

    <span class="menu">titel</span>
    <span class="menu">titel</span>
    <span class="menu">titel</span>
    <span class="menu">titel</span>
    <span class="ende">titel</span>

    Ein Menü sollte eine Liste sein.

    <ul id="menu">
      <li><a href=...>titel</a></li>
      ...
    </ul>

    oder in HTML5 <nav> statt <ul id="nav"> und <footer> statt <div id="footer">

    mit display: block wirst du allerdings nicht das Nebeneinanderstehen erreichen. --> display: inline-block (oder float)

    Dann sollen zwischen den Links senkrechte Striche sein.

    Gib allen li-Elementen einen rechten Rahmen

    #menu li {border-right: 5px solid gold;}

    und dem letzten keinen

    #menu li:last-child {border-right: 0 none;}

    oder allen einen linken Rahmen

    #menu li {border-left: 5px solid gold;}

    und dem ersten keinen

    #menu li:first-child {border-right: 0 none;}

    so hast du auch noch den IE 7 befriedigt.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. oder in HTML5 <nav> statt <ul id="nav"> und <footer> statt <div id="footer">

      nein nav nicht anstelle von ul id="nav" sondern rundherum ;)

      <nav id="menu">  
        <ul />  
      </nav>
      

      so hast du auch noch den IE 7 befriedigt.

      Und wenn man den IE6  auch noch unterstützen muss, kann man gerne eine klasse "first-child" oder "last-child" einbauen oder mit JavaScript (CSS-Expressions) nachhelfen.

      1. Om nah hoo pez nyeetz, suit!

        nein nav nicht anstelle von ul id="nav" sondern rundherum ;)

        Nach meinen Vorstellungen von einem footer sollte eigentlich um die Navigation nichts mehr drumrum sein. ;-)

        Matthias

        --
        1/z ist kein Blatt Papier.

        1. nein nav nicht anstelle von ul id="nav" sondern rundherum ;)

          Nach meinen Vorstellungen von einem footer sollte eigentlich um die Navigation nichts mehr drumrum sein. ;-)

          footer, nav? Wovon sprichst du?

          Das nav-Element umgibt eine Navigation - wenn diese Navigation in einem Footer drin ist, dann ist halt noch ein footer-Element rundherum.

          1. Om nah hoo pez nyeetz, suit!

            Das nav-Element umgibt eine Navigation - wenn diese Navigation in einem Footer drin ist, dann ist halt noch ein footer-Element rundherum.

            Ich hatte jetzt den Denkfehler,

            <nav>  
              <li></li>  
            </nav>
            

            wäre gültiges HTML5.

            Allerdings schreibt auch das W3C, dass nicht jede Navigation in ein nav-Element gehört.

            Matthias

            --
            1/z ist kein Blatt Papier.

            1. @@Matthias Apsel:

              nuqneH

              Allerdings schreibt auch das W3C, […]

              Nein, die WHATWG. Das W3C nickt nur ab. Und wenn nicht, ist es der WHATWG auch egal.

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. @@Gunnar Bittersmann:

                nuqneH

                Allerdings schreibt auch das W3C, […]

                Nein, die WHATWG. Das W3C nickt nur ab. Und wenn nicht, ist es der WHATWG auch egal.

                Ich korrigiere: Hixie. Die WHATWG nickt nur ab. Und wenn nicht, ist es dem Hixie auch egal.

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Ich korrigiere: Hixie. Die WHATWG nickt nur ab. Und wenn nicht, ist es dem Hixie auch egal.

                  Gunnar: Guter Mann :)
                  Hixie: Böser Mann :(

            2. Om nah hoo pez nyeetz, suit!

              Das nav-Element umgibt eine Navigation - wenn diese Navigation in einem Footer drin ist, dann ist halt noch ein footer-Element rundherum.

              Ich hatte jetzt den Denkfehler,

              <nav>

              <li></li>
              </nav>

              
              >   
              > wäre gültiges HTML5.  
                
              Fast :) das nav-Element umgibt die Navigation und ersetzt nicht ein UL-Element, innerhalb des nav-Elements kann genausogut ein ol-Konstrukt sein oder ganz was anderes ("A nav element doesn't have to contain a list [...]").  
                
              <http://www.w3.org/TR/html5-author/the-nav-element.html>  
                
              Aus dem Beispiel:  
                
              ~~~html
                <nav>  
                 <h1>Navigation</h1>  
                 <ul>  
                  <li><a href="articles.html">Index of all articles</a></li>  
                  <li><a href="today.html">Things sheeple need to wake up for today</a></li>  
                  <li><a href="successes.html">Sheeple we have managed to wake</a></li>  
                 </ul>  
                </nav>  
               </header>