JPL: XHTML und NAV - Fehlermeldung bei W3C

0 78

XHTML und NAV - Fehlermeldung bei W3C

JPL
  • html
  1. 0
    1UnitedPower
    1. 0
      JPL
      1. 0
        1UnitedPower
  2. 0
    Matthias Apsel
    1. 0
      JPL
      1. 0
        dedlfix
      2. 0
        Gunnar Bittersmann
        1. 0
          JPL
          1. 0
            Camping_RIDER
            1. 0
              JPL_2
              1. 0
                Camping_RIDER
                1. 0
                  JPL_2
                  1. 0
                    Camping_RIDER
                    1. 0
                      JPL_2
                      1. 0
                        Camping_RIDER
                        1. 0
                          Matthias Apsel
                          1. 0
                            Camping_RIDER
                            1. 0
                              Matthias Apsel
                              1. 0

                                Designschwäche

                                Camping_RIDER
                                • meinung
                                1. 0
                                  Matthias Apsel
                                  1. 0
                                    Camping_RIDER
                                    1. 0

                                      Denkfehler

                                      Camping_RIDER
                                      1. 0
                                        Matthias Apsel
                                        1. 0
                                          Camping_RIDER
                                          1. 0
                                            Camping_RIDER
                                    2. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Camping_RIDER
                                    3. 1
                                      Gunnar Bittersmann
                                      1. 0
                                        Camping_RIDER
                                        1. 0
                                          Gunnar Bittersmann
                                          1. 0
                                            Camping_RIDER
                                            1. 0
                                              Gunnar Bittersmann
                        2. 0
                          Camping_RIDER
                          1. 0
                            Camping_RIDER
                          2. 0
                            JPL_2
                            1. 0
                              Camping_RIDER
                        3. 0
                          JPL_2
                          1. 0
                            Camping_RIDER
                            1. 0
                              JPL_2
                              1. 0
                                JPL
                                1. 0
                                  JPL
                              2. 1
                                Camping_RIDER
                                1. 0
                                  Matthias Apsel
                                  1. 0
                                    Camping_RIDER
                                2. 0
                                  JPL
                                3. 1
                                  Gunnar Bittersmann
                              3. 0
                                Camping_RIDER
                                1. 0
                                  JPL
                                  1. 0
                                    Camping_RIDER
                                    1. 0
                                      JPL_2
                                      1. 0
                                        Camping_RIDER
                                        1. 1
                                          Gunnar Bittersmann
                                        2. 0
                                          JPL_2
                                        3. 0
                                          JPL
                                          1. 0
                                            Camping_RIDER
                                            1. 0
                                              JPL
                                      2. 0
                                        Camping_RIDER
                                        1. 0
                                          Camping_RIDER
                                          1. 0
                                            JPL
                                            1. 0
                                              Camping_RIDER
                                              1. 0
                                                JPL
                                                1. 0
                                                  Camping_RIDER
                                                  1. 0
                                                    Gunnar Bittersmann
                                                    1. 0
                                                      Camping_RIDER
                                                      • meinung
                                                    2. 0
                                                      JPL
                                                      1. 2
                                                        Matthias Apsel
                                                      2. 0
                                                        Gunnar Bittersmann
                                                        1. 0
                                                          Der Martin
                                                        2. 0
                                                          JPL
                                                  2. 0
                                                    JPL
                                                    1. 0
                                                      Camping_RIDER
                                                      1. 0
                                                        JPL
                                                        1. 0
                                                          Camping_RIDER
                                                          1. 0
                                                            JPL
                                                        2. 0
                                                          Gunnar Bittersmann
                                        2. 0
                                          JPL
            2. 0
              JPL_2

Aloha

hab mein "neues" Menü mit einer <nav>...</nav> Umgebung gestaltet... und jetzt meldet mir W3C:

Invalid Markup Validation

Wird das NAV-Element von XHTML etwa nicht toleriert?
Scheint mir fast so...

Was kann ich denn jetzt machen?

Hab schon versucht das "NAV" durch ein "DIV" zu ersetzen und all meine CSS-Definitionen die das NAV betrafen, also Dinge wie:

NAV UL LI {}

mit einer #ID einzubinden... aber dann sieht die Seite aus wie Kraut und Rüben...
:)

MfG,

--
JPL
  1. Hakuna matata!

    hab mein "neues" Menü mit einer <nav>...</nav> Umgebung gestaltet... und jetzt meldet mir W3C:

    Invalid Markup Validation

    Wird das NAV-Element von XHTML etwa nicht toleriert?
    Scheint mir fast so...

    Das <nav>-Element ist ein (X)HTML5-Element. Du müsstest also korrekterweise den HTML5-Doctype verwenden, wenn du <nav> benutzen willst (und das solltet du). Letzendlich spielt das aber keine große Rolle, weil die Browser so oder so für (X)HTML-Dokumente immer den HTML5-Parser verwenden.

    Auf das <nav>-Element zu verzichten, nur weil es einen Validierungsfehler gibt, ist jedenfalls eine blöde Idee.

    --
    “All right, then, I'll go to hell.” – Huck Finn
    1. Aloha

      Hakuna matata!

      hab mein "neues" Menü mit einer <nav>...</nav> Umgebung gestaltet... und jetzt meldet mir W3C:

      Invalid Markup Validation

      Wird das NAV-Element von XHTML etwa nicht toleriert?
      Scheint mir fast so...

      Das <nav>-Element ist ein (X)HTML5-Element. Du müsstest also korrekterweise den HTML5-Doctype verwenden, wenn du <nav> benutzen willst (und das solltet du). Letzendlich spielt das aber keine große Rolle, weil die Browser so oder so für (X)HTML-Dokumente immer den HTML5-Parser verwenden.

      Auf das <nav>-Element zu verzichten, nur weil es einen Validierungsfehler gibt, ist jedenfalls eine blöde Idee.

      Wäre es, deshalb nehm ich das auch nicht einfach raus... aber ich kann andererseits auch nicht einfach den HTML-Doctype nehmen, weil dann müsste ich alle Seiten überarbeiten, wegen denn vielen "/>", die ich wegen XHTML einbauen "mußte"...

      Das einfachste wäre es dann, das NAV-element mit einem anderen, "erlaubten", Element zu emulieren...
      :)

      MfG,

      --
      JPL
      1. Hakuna matata!

        aber ich kann andererseits auch nicht einfach den HTML-Doctype nehmen, weil dann müsste ich alle Seiten überarbeiten, wegen denn vielen "/>", die ich wegen XHTML einbauen "mußte"...

        "/>" ist in HTML-Syntax ausdrücklich erlaubt.

        --
        “All right, then, I'll go to hell.” – Huck Finn
  2. Om nah hoo pez nyeetz, JPL!

    Was kann ich denn jetzt machen?

    <!doctype html>  
    
    

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Baby und Babylon.

    1. Aloha

      Om nah hoo pez nyeetz, JPL!

      Was kann ich denn jetzt machen?

      <!doctype html>

      
      >   
      > Matthias  
        
      dann gibts ja noch mehr Fehler :)  
      Wegen XHTML hab ich doch bei gewissen Elementen immer "/>" schreiben müssen...  
      :)  
        
        
      MfG,  
      
      -- 
      JPL
      
      1. Tach!

        Was kann ich denn jetzt machen?
        <!doctype html>
        dann gibts ja noch mehr Fehler :)
        Wegen XHTML hab ich doch bei gewissen Elementen immer "/>" schreiben müssen...

        Wenn es weiter nichts ist, das überlesen die Parser im Browser problemlos. Wenn Fehler deswegen angemeckert werden, sind die ignorierbar. Andererseits ist es normalerweise nicht sehr schwer, die Zeichenfolge /> gegen > in mehreren Dateien eines Verzeichnisses ersetzen zu lassen. Sowas kann jeder gute Editor und /> kommt meist auch nicht in einem anderem Zusammenhang vor.

        dedlfix.

      2. @@JPL:

        nuqneH

        <!doctype html>
        dann gibts ja noch mehr Fehler :)

        Die du berichtigen solltest.

        Die Verschachtelung von label in label war auch in XHTML 1.0 verboten.

        (Das konnte allerdings nicht per DTD ausgedrückt werden, deshalb meckert der Validator den Fehler auch nicht an.)

        Die anderen Fehler sind phantasievolle Metadaten. Wozu sollten die überhaupt gut sein?

        <meta name="language" content="Deutsch" /> ist zu gar nichts gut. Die Sprache solltest du schon angebenmit dem lang-Attribut.

        Wegen XHTML hab ich doch bei gewissen Elementen immer "/>" schreiben müssen...

        Das ist auch in HTML5 kein Fehler.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Aloha

          @@JPL:

          nuqneH

          <!doctype html>
          dann gibts ja noch mehr Fehler :)

          Die du berichtigen solltest.

          Die Verschachtelung von label in label war auch in XHTML 1.0 verboten.

          Ich glaubs ja nicht - diese verschachtelte LABELs waren der Grund, warum mein Menü auf dem IE nicht aufklappen wollte...

          Habe die jetzt entfernt... und jetzt klappt das mit dem HOVERN der Menügrafik nicht mehr... es wird nicht mehr die HOVER-Grafik angezeigt, sondern die schwarze Hintergrundfarbe der Klasse des Elternelement, die schwarz sein muß (die Schriftzüge des Menüs sind transparente Gifs, beim HOVER werden die Farben der Schriftgrafik mit der des Hintergrunds getauscht).

          So ist die ID eines Eintrags, im <LI>:

             #karriere1 {  
                    background: #e20b00;  
                    }  
            
                    #karriere1 label:hover {  
                         background: #000000;  
                         color: #e20b00;  
                         }  
          
          

          So ist das <LABEL> definiert:

          .karriere {  
                         background:url(../menue/berufliches-normal.png) no-repeat;  
                         background-position: 10px 6px;  
                         }  
            
                         .karriere:hover {  
                         background:url(../menue/berufliches-hover.png) no-repeat;  
                         background-position: 10px 6px;  
                         }
          

          Und so wird es aufgerufen:

          <li id=\"karriere1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_1\" class=\"hackbox\"><label class=\"karriere\" for=\"navi_1_1\">&nbsp;</label>

          Mit dem verschachtelten LABEL hat es funktioniert (warum auch immer):

          <li id=\"karriere1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_1\" class=\"hackbox\"><label class=\"e1\" for=\"navi_1_1\"><label class="\karriere\">&nbsp;</label></label>

          Wobei diese .e1 Klasse leer war:

          .e1 {  
          padding: 0px 0px 0px 0px;  
          }
          

          Da das verschachtelte LABEL aber dazu führt, dass im IE das Ausklappmenü nicht funktioniert, kann ich das nicht mehr nehmen... aber wie bekomme ich mein Menü jetzt wieder dazu, beim HOVER die Grafik anzuzeigen und nicht komplett schwarz zu werden?

          Die anderen Fehler sind phantasievolle Metadaten. Wozu sollten die überhaupt gut sein?

          <meta name="language" content="Deutsch" /> ist zu gar nichts gut. Die Sprache solltest du schon angebenmit dem lang-Attribut.

          "Damals" war das so vorgeschlagen (auch in SelfHTML), das hab ich nur so übernommen :)

          MfG,

          --
          JPL
          1. Aloha ;)

            Mit dem verschachtelten LABEL hat es funktioniert (warum auch immer):

            <li id=\"karriere1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_1\" class=\"hackbox\"><label class=\"e1\" for=\"navi_1_1\"><label class="\karriere\">&nbsp;</label></label>

            Hoppla... Hatte ich dieses verschachtelte label übersehen? Das sollte natürlich nicht passieren. Und ist insbesondere natürlich semantischer Humbug ;)

            Wobei diese .e1 Klasse leer war:

            .e1 {

            padding: 0px 0px 0px 0px;
            }

            
            >   
            > Da das verschachtelte LABEL aber dazu führt, dass im IE das Ausklappmenü nicht funktioniert, kann ich das nicht mehr nehmen... aber wie bekomme ich mein Menü jetzt wieder dazu, beim HOVER die Grafik anzuzeigen und nicht komplett schwarz zu werden?  
              
            Hm, vielleicht indem du den vorhandenen labels den Befehl zum hovern gibst? ;)  
              
            Ich blick da grad net 100% durch in deinem Quellcode, aber wenns um die Klasse .karriere geht, die du beim Entfernen der Verschachtelung verlierst, die kann problemlos dem vorhandenen label beigefügt werden. Es ist nicht umsonst möglich, Elementen mehrere Klassen zu geben. In deinem Fall dann  
              
            ` <li id="karriere1"><input type="radio" name="navi_1" id="navi_1_1" class="hackbox"><label class="e1 karriere" for="navi_1_1">&nbsp;</label>`{:.language-html}  
              
            
            > > `<meta name="language" content="Deutsch" />`{:.language-html} ist zu gar nichts gut. Die [Sprache solltest du schon angeben](http://www.w3.org/International/questions/qa-lang-why) – [mit dem lang-Attribut](http://www.w3.org/International/questions/qa-html-language-declarations).  
            >   
            > "Damals" war das so vorgeschlagen (auch in SelfHTML), das hab ich nur so übernommen :)  
              
            Dieses Problem kennen hier sicher viele ;) Übrigens auch einer der Hauptgründe, die alte Doku dann irgendwann mal abzuschalten :D  
              
            Grüße,  
              
            RIDER  
              
            
            -- 
            Camping\_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller  
              
            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[  
            
            
            1. Hi,

              <li id=\"karriere1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_1\" class=\"hackbox\"><label class=\"e1\" for=\"navi_1_1\"><label class="\karriere\">&nbsp;</label></label>

              Hoppla... Hatte ich dieses verschachtelte label übersehen? Das sollte natürlich nicht passieren. Und ist insbesondere natürlich semantischer Humbug ;)

              Nein, nein, das ist von mir... ohne hat das mit dem Grafik-Hovern ursprünglich nicht funktioniert.
              Da das erste (dein! ;) ) LABEL die Klasse "e1" hatte, die für ALLE Menüeinträge gleich waren, konnte ich da natürlich keine individuelle Grafik einbauen. Also habe ich für jeden Menüeintrag der Hauptmenüebene, die eben mit Grafiken gestaltet werden, noch ein "inneres" Element gebraucht, dass ich individuell HOVERn konnte. Erst waren das DIVs, aber da hat der Validator gemeckert, als ich die DIVs in LABELs umbenannt habe, ging es.

              (Daß zwei Klassen in einem ELEMENT gehen, erfahre ich jetzt von dir als Neuigkeit...)

              Aber: daran liegts ja nicht. Da die Klasse "e1" ja im Grunde überflüssig war, da sie nichts formatiert hat, habe ich die Klasse des "verschachtelten inneren LABELs" einfach in das "äußere" Label übernommen, die Klasse "e1" damit ersetzt - und das innenliegende LABEL dann entfernt.

              Mit dem Ergebnis, daß die Grafik nicht mehr HOVERt.

              Vom Gefühl (!) her war es mit den verschachtelten LABELs wohl so, daß der HOVER-Befehl der ID das äußere LABEL schwarz HOVERt und danach das innere LABEL die Grafik HOVERt...

              ...jetzt mit nur einem LABEL schlägt wohl die ID-Hoverung die LABEL-HOVERUNG, legt sich also drüber.

              (deshalb hab ich ursprünglich wohl auch das zweite LABEL eingebaut, weil ich nur mit dessen Existenz die Grafik Hovern konnte).

              Wenn ich das HOVERing der ID entferne, dann sieht man, wie die Grafik des LABELs schön hovert, aber da das LI mit dieser ID nun nicht mehr hovert, sieht es im Ergebnis auf der Seite doof aus.

              Einfachste Lösung (für die Optik) ist wohl, wenn ich die Schrift der Grafik nicht transparent gestalte, sondern die Grafik so groß wie das gesamte Anzeigefeld gestalte und nur noch die Grafik HOVERn lasse, aber das löst ja nicht das prinzipielle Problem, daß technisch irgendwo ein Fehler drin ist...

              Da das verschachtelte LABEL aber dazu führt, dass im IE das Ausklappmenü nicht funktioniert, kann ich das nicht mehr nehmen... aber wie bekomme ich mein Menü jetzt wieder dazu, beim HOVER die Grafik anzuzeigen und nicht komplett schwarz zu werden?

              Hm, vielleicht indem du den vorhandenen labels den Befehl zum hovern gibst? ;)

              Hab ich doch. Siehe oben. Da sowohl die "umgebende" ID schwarz hovert, als auch die "innenliegende" Klasse, also beide gleichzeitig, scheint es mir, dass zuerst die Grafik gehovert wird - und dann die ID... die von der Anzeigenreihenfolge die Grafik schlägt, sich darüber legt.

              Ich blick da grad net 100% durch in deinem Quellcode, aber wenns um die Klasse .karriere geht, die du beim Entfernen der Verschachtelung verlierst, die kann problemlos dem vorhandenen label beigefügt werden. Es ist nicht umsonst möglich, Elementen mehrere Klassen zu geben. In deinem Fall dann

              <li id="karriere1"><input type="radio" name="navi_1" id="navi_1_1" class="hackbox"><label class="e1 karriere" for="navi_1_1">&nbsp;</label>

              Hab ich ja indirekt schon gemacht, indem ich die überflüssige, weil eigentlich nichts enthaltene Klasse .e1 entfernt und durch .karriere ersetzt habe... mit dem oben beschriebenen Effekt:

              IE klappt jetzt schön die Menüs auf, das HOVERn der Grafik klappt aber bei keinem Browser mehr...

              Irgendwie ist das alles komisch...

              Gruß
              JPL
              (der auf der Arbeit ist und sich nicht einloggen kann)

              1. Aloha ;)

                (Daß zwei Klassen in einem ELEMENT gehen, erfahre ich jetzt von dir als Neuigkeit...)

                Man lernt eben nie aus ;) Das ist gerade der elementare Unterschied zwischen Klasse und id ;)

                Hab ich doch. Siehe oben. Da sowohl die "umgebende" ID schwarz hovert, als auch die "innenliegende" Klasse, also beide gleichzeitig, scheint es mir, dass zuerst die Grafik gehovert wird - und dann die ID... die von der Anzeigenreihenfolge die Grafik schlägt, sich darüber legt.

                Prüf doch einfach mal nach, was da was wie überlagert. (Ich würde das auch machen, bin aber selbst grad an der Uni, hab nur das Tablet zur Hand und bin damit entsprechend eingeschränkt) Wie du das machst: mit den Chrome-Entwicklerwerkzeugen (Desktop-Chrome, nicht Chrome mobile). Mach nen Rechtsklick auf das zu untersuchende Element, dann "Element untersuchen". Dann im Entwicklerwerkzeug-Fenster auf dein label und/oder li rechtsklicken, "force state"->hover. Dann kannst du rechts bequem nachverfolgen, welche CSS-Regel angewandt wird und welche überschrieben.

                (der auf der Arbeit ist und sich nicht einloggen kann)

                Vollstes Verständnis ;) Über 90% meiner Postings unter der Woche entstehen an der Uni während ich erfolgreich prokrastiniere :D

                Grüße,

                RIDER

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                1. Hi,

                  (Daß zwei Klassen in einem ELEMENT gehen, erfahre ich jetzt von dir als Neuigkeit...)

                  Man lernt eben nie aus ;) Das ist gerade der elementare Unterschied zwischen Klasse und id ;)

                  Na, das wußte ich schon, also daß man EINE Klasse in VIELEN Elementen gleichzeitig verwenden kann... ich wußte nur nicht, daß man umgekehrt auch in EINEM Element VIELE Klassen gleichzeitig anwenden kann :-)

                  Prüf doch einfach mal nach, was da was wie überlagert. (Ich würde das auch machen, bin aber selbst grad an der Uni, hab nur das Tablet zur Hand und bin damit entsprechend eingeschränkt) Wie du das machst: mit den Chrome-Entwicklerwerkzeugen (Desktop-Chrome, nicht Chrome mobile). Mach nen Rechtsklick auf das zu untersuchende Element, dann "Element untersuchen". Dann im Entwicklerwerkzeug-Fenster auf dein label und/oder li rechtsklicken, "force state"->hover. Dann kannst du rechts bequem nachverfolgen, welche CSS-Regel angewandt wird und welche überschrieben.

                  Hier hab ich leider nur den portablen Chrome (man darf ja nichts installieren hier, als Nicht-Admin) und daheim wollte ich auf meinem schönen, neuen Rechner eigentlich nichts von Google installieren ;-)

                  Aber: ich habe ja schon von Hand getestet... wenn ich den HOVER der #ID (der den Hintergrund schwarz färben soll) entferne und den HOVER der Klasse (für das LABEL) belasse, dann wird die Hintergrundgrafik des LABELs sehr schön gehovert. Aktiviere ich den HOVER der #ID wieder... sieht man die Grafik nicht mehr, dann wird alles schwarz.

                  Also auch ohne jetzt den Chrome-Test gemacht zu haben glaube ich zu ahnen, wer hier wen überlagert...

                  Bleibt die Frage: wie kann man diese Reihenfolge umkehren?

                  (der auf der Arbeit ist und sich nicht einloggen kann)

                  Vollstes Verständnis ;) Über 90% meiner Postings unter der Woche entstehen an der Uni während ich erfolgreich prokrastiniere :D

                  Wieder ein schönes Wort kennengelernt :)
                  Naja, Uni war schön... falls du mal auf meiner Seite warst... dann weißt du ja, dass das schon ein paar Jahre her ist bei mir... inzwischen in der "bösen" Industrie... habe auch grad nur Zeit zu antworten, weil ich an einer Prüfmaschine sitze und jede Prüfung nur eine Minute dauert... da kann man nichts parallel arbeiten... aber hier während den Prüfungen immer ein paar Zeilen schreiben, bevor der nächste Prüfkörper eingelegt werden muß :)

                  Gruß
                  JPL

                  1. Aloha ;)

                    (Daß zwei Klassen in einem ELEMENT gehen, erfahre ich jetzt von dir als Neuigkeit...)

                    Man lernt eben nie aus ;) Das ist gerade der elementare Unterschied zwischen Klasse und id ;)

                    Na, das wußte ich schon, also daß man EINE Klasse in VIELEN Elementen gleichzeitig verwenden kann...

                    Stimmt, das ist der zweite Unterschied. Den hatte ich jetzt verdrängt.

                    Hier hab ich leider nur den portablen Chrome (man darf ja nichts installieren hier, als Nicht-Admin) und daheim wollte ich auf meinem schönen, neuen Rechner eigentlich nichts von Google installieren ;-)

                    Hehe, ja, das böse Google :D Wenn sie doch nur nicht so gute Produkte hätten xD naja, seis drum. Schon geschat, obs im Chrome portable auch geht? Schließlich ist portable ≠ mobile... Ansonsten kannst auch mal sehen, ob der Firefox in seinen eigenen Entwicklerwerkzeugen oder der Firebug auch sowas wie "Force State" bieten. Kann gut sein - ich weiß es blos deshalb nicht genau, weik ich Firefox schon länger nur noch zum Testen laufen hab... Ganz früher hab ich nur mir Firefox/Firebug gearbeitet (als es noch keine proprietären Entwicklertools gab, aber die Zeiten sind ja vorbei).

                    Aber: ich habe ja schon von Hand getestet... wenn ich den HOVER der #ID (der den Hintergrund schwarz färben soll) entferne und den HOVER der Klasse (für das LABEL) belasse, dann wird die Hintergrundgrafik des LABELs sehr schön gehovert. Aktiviere ich den HOVER der #ID wieder... sieht man die Grafik nicht mehr, dann wird alles schwarz.

                    Also auch ohne jetzt den Chrome-Test gemacht zu haben glaube ich zu ahnen, wer hier wen überlagert...

                    Bleibt die Frage: wie kann man diese Reihenfolge umkehren?

                    Naja. Wenn du weist, wo das Problem verankert ist, kannst du mit den Möglichkeiten der Kaskade gezielt entgegenwirken.

                    Naja, Uni war schön...

                    Nur aus dem Rückblick, schätze ich xD ich kann kein Übungsblattmehr sehen und warte nur noch drauf, dass es vorbeigeht xD

                    falls du mal auf meiner Seite warst... dann weißt du ja, dass das schon ein paar Jahre her ist bei mir...

                    War ich und weiß ich, ja ;)

                    inzwischen in der "bösen" Industrie...

                    Da werd ich wohl (hoffentlich? Naja, finanziell ja nicht) nie landen. Von der einen staatlichen Bildungseinrichtung in die nächste xD

                    Grüße,

                    RIDER

                    --
                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                    1. Hi,

                      Hehe, ja, das böse Google :D Wenn sie doch nur nicht so gute Produkte hätten xD naja, seis drum. Schon geschat, obs im Chrome portable auch geht? Schließlich ist portable ≠ mobile...

                      also wenn ich mit Rechts draufklicke, kann ich ELEMENT UNTERSUCHEN anklicken... und dann öffnet sich eine sehr verwirrende Übersicht von allen Elementen und es gibt gefühlt unendliche Möglichkeiten etwas anzeigen zu lassen... und ich habe keine Ahnung worauf ich achten muß bzw. wo ich was nachschauen kann, bzgl. meinem HOVER-Problem - und bzgl. des Leerzeilenproblems in Chrome.
                      Ich bin wortwörtlich erschlagen :-)

                      Naja. Wenn du weist, wo das Problem verankert ist, kannst du mit den Möglichkeiten der Kaskade gezielt entgegenwirken.

                      Naja, ob ich das kann... mal schauen... mal durchlesen was man mit der
                      Kaskade so machen kann...

                      Ich mein: daß Eigenschaften von folgenden Elementen überschrieben werden können, weiß ich ja. Nutze ich ja auch bei verlinkungen... echte Links werden "rot" unterlegt, aber bei seiteninternen Verweisen soll der Zielanker mit <a name="#1">...</a> nicht "rot" unterlegt werden, da wird durch eine entsprechende Formatierung/Klasse die Farbe geändert.

                      Und eigentlich folgt ja auch das HOVER des Labels erst nach dem HOVER des Listenelements, das das LABEL enthält... allerdings ist das LABEL ja formell innerhalb das <LI>...</LI>, weshalb ich jetzt fast vermute, daß die Browser erst das LABEL auswerten (da abgeschlossene ELement) - und erst nach dem </LI> das <LI> auswerten... und deshalb das LABEL überschreiben...

                      Da werd ich wohl (hoffentlich? Naja, finanziell ja nicht) nie landen. Von der einen staatlichen Bildungseinrichtung in die nächste xD

                      Lehrer ist doch schön - je nach Schule. Industrie übrigens auch... je nach Firma... es gibt 90 % Firmen, für dich ich nie arbeiten würde... :)

                      Gruß
                      JPL

                      1. Aloha ;)

                        Ich bin wortwörtlich erschlagen :-)

                        Na, dann gewöhn dich dran ;) Entwicklerwerkzeuge sind mein Hauptkapital was Produktivitätssteigerung und Fehlerfindung angeht ;)

                        Ist dann auch eigentlich nicht mehr soo kompliziert. Kurzerklärung: im Hauptfenster hast du links (in groß) die Übersicht über dein HTML. Rechts davon ist eine Auflistung aller CSS-Regeln, die auf das links ausgewählte Element wirken (hier kannst du unterschiedliche Ansichten wählen, für dein Problem ist die Standardansicbt mit den verschiedenen CSS-Regeln und der Stelle, wo diese definiert werden, das beste...).

                        allerdings ist das LABEL ja formell innerhalb das <LI>...</LI>, weshalb ich jetzt fast vermute, daß die Browser erst das LABEL auswerten (da abgeschlossene ELement) - und erst nach dem </LI> das <LI> auswerten... und deshalb das LABEL überschreiben...

                        Nein, so ist es sicherlich nicht. Die Kaskade sagt ja eben, dass Elementverschachtelungen von außen nach innen abgearbeitet werden. Interessanter ist da die Frage nach der Spezifizität (igitt, dieses Wort) deiner Regeldefinition.

                        Zum Beispiel werden Anweisungen in

                        label {...}

                        Überschrieben durch Anweisungen in

                        li label {...}

                        und diese durch Anweisungen in

                        li>label {...}

                        Und den totalen Overkill haben Anweisungen mit !important, die überschreiben grundsätzlich alles (was selbst nicht important ist).

                        Aber wie gesagt, die Entwicklerwerkzeuge geben dir ganz detailliert darüber Aufschluss, welche Regeln wo welche überschreiben (denk dran: das Verhalten beim hovern wird dir nur angezeigt, wenn du links im HTML den hover-State per Rechtsklick erzwingst).

                        Lehrer ist doch schön - je nach Schule.

                        Als Physiklehrer kann man sichs hierzulande zum Glück fast noch aussuchen. Ein Luxus, der lange nicht jedem gegönnt ist...

                        Grüße,

                        RIDER

                        --
                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                        1. Om nah hoo pez nyeetz, Camping_RIDER!

                          Zum Beispiel werden Anweisungen in

                          […]

                          li label {...}

                          [überschrieben durch]

                          li>label {...}

                          Wie kommst du denn darauf? Beide Selektoren sind gleich spezifisch. Der Kombinator hat keinen Einfluss auf die Spezifität.

                          Matthias

                          --
                          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Park und Parkinson.

                          1. Aloha ;)

                            Zum Beispiel werden Anweisungen in

                            […]

                            li label {...}

                            [überschrieben durch]

                            li>label {...}

                            Wie kommst du denn darauf? Beide Selektoren sind gleich spezifisch. Der Kombinator hat keinen Einfluss auf die Spezifität.

                            Du hast Recht - mea culpa. Ich dachte er hätte, habe mich aber getäuscht.

                            Grüße,

                            RIDER

                            --
                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                            1. Om nah hoo pez nyeetz, Camping_RIDER!

                              Wie kommst du denn darauf? Beide Selektoren sind gleich spezifisch. Der Kombinator hat keinen Einfluss auf die Spezifität.

                              Du hast Recht - mea culpa. Ich dachte er hätte, habe mich aber getäuscht.

                              Überschrieben werden Anweisungen ggf. aber trotzdem, etwa bedingt durch die Reihenfolge ihrer Deklaration.

                              Matthias

                              --
                              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bus und Buschwindröschen.

                              1. Aloha ;)

                                Wie kommst du denn darauf? Beide Selektoren sind gleich spezifisch. Der Kombinator hat keinen Einfluss auf die Spezifität.

                                Du hast Recht - mea culpa. Ich dachte er hätte, habe mich aber getäuscht.

                                Überschrieben werden Anweisungen ggf. aber trotzdem, etwa bedingt durch die Reihenfolge ihrer Deklaration.

                                Ja, das war der Grund meiner Fehleinschätzung. Ich hatte bisher immer automatisch den '>'-Selektor immer nach dem ' '-Selektor deklariert und hatte dadurch also nie kognitive Konflikte...

                                Wobei ich mich schon frage, warum das nicht so ist. Im reinen Wortsinn gewinnt die Spezifität schon dazu, je nach Kombinator. Eine Angabe "alle direkten Kind-p's eines div sollen rot geschrieben werden" ist dem Wortsinn nach ja schon spezifischer als "alle p's innerhalb eines div sollen blau geschrieben werden". Vielleicht eine Design-Schwäche im Sprachstandard?... Zumindest für mich läuft das der Intuition entgegen, dass manche Kombinatoren nicht im CSS-Sinn spezifischer sind als andere...

                                Grüße,

                                RIDER

                                --
                                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                1. Om nah hoo pez nyeetz, Camping_RIDER!

                                  Wobei ich mich schon frage, warum das nicht so ist. Im reinen Wortsinn gewinnt die Spezifität schon dazu, je nach Kombinator. Eine Angabe "alle direkten Kind-p's eines div sollen rot geschrieben werden" ist dem Wortsinn nach ja schon spezifischer als "alle p's innerhalb eines div sollen blau geschrieben werden". Vielleicht eine Design-Schwäche im Sprachstandard?... Zumindest für mich läuft das der Intuition entgegen, dass manche Kombinatoren nicht im CSS-Sinn spezifischer sind als andere...

                                  Dass der Kombinator „>“ meist weniger Elemente selektiert als „ “ hat ja nichts damit zu tun, in welcher Reihenfolge die Deklarationen angewendet werden sollen.

                                  Matthias

                                  --
                                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Gummi und Gummibärchen.

                                  1. Aloha ;)

                                    Dass der Kombinator „>“ meist weniger Elemente selektiert als „ “ hat ja nichts damit zu tun, in welcher Reihenfolge die Deklarationen angewendet werden sollen.

                                    Doch, imho schon. Schließlich ist das Kriterium die Spezifität der Deklaration. Und der Kombinator ">" selektiert zwar nur meist weniger Elemente als " ", aber nie mehr. Damit ist schon gegeben, dass Selektoren, die mit ">" kombiniert werden, spezifischer sind als welche mit " ".

                                    Definition:

                                    Eine Selektorfunktion f ist dann spezifischer als eine Selektorfunktion g, wenn bei gegebener, beliebiger Elementmenge A immer gilt: [latex]f(A) \subseteq f(B)[/latex], aber nie [latex]f(B) \subset f(B)[/latex]

                                    Quelle: Rainer Findung

                                    Eine Gleichheit tritt allenfalls bei bestimmten Mengen A auf, die Relation "spezifisch" ist nach dieser Definition antisymmetrisch, oder genauer, eine Halbordnung der Menge aller deklarierten CSS-Regeln a.k.a. Selektorfunktionen ;)

                                    Ich glaube aber zu wissen, wo mein Denkfehler liegt. Oder in meinen Augen: Die Inkonsequenz der Spec. Scheinbar ist die Spezifität ein Kriterium der Wichtigkeit, das nur und ausschließlich auf Selektoren angewandt wird.

                                    Ein Selektor ist dabei li oder label.

                                    Etwas wie

                                    li>label

                                    ist wohl kein Selektor, sondern das sind zwei Selektoren, die durch einen Kombinator verknüpft werden. Sozusagen eine Selektorenkombination (obwohl diese dem Sprachsinn nach de facto wieder ein Selektor ist). Offenbar sagt die Sprachdefinition von CSS: Selektorenkombination ≠ Selektor. Und deshalb wird das Spezifitätskriterium hier wohl nicht angewandt.

                                    Das ist meiner geschätzten Meinung nach allerdings weder sinnvoll noch intuitiv ;)

                                    Grüße,

                                    RIDER

                                    --
                                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                    1. Lieber RIDER,

                                      Ich glaube aber zu wissen, wo mein Denkfehler liegt. Oder in meinen Augen: Die Inkonsequenz der Spec. Scheinbar ist die Spezifität ein Kriterium der Wichtigkeit, das nur und ausschließlich auf Selektoren angewandt wird.

                                      Ein Selektor ist dabei li oder label.

                                      Etwas wie

                                      li>label

                                      ist wohl kein Selektor, sondern das sind zwei Selektoren, die durch einen Kombinator verknüpft werden. Sozusagen eine Selektorenkombination (obwohl diese dem Sprachsinn nach de facto wieder ein Selektor ist). Offenbar sagt die Sprachdefinition von CSS: Selektorenkombination ≠ Selektor. Und deshalb wird das Spezifitätskriterium hier wohl nicht angewandt.

                                      Das ist meiner geschätzten Meinung nach allerdings weder sinnvoll noch intuitiv ;)

                                      Das ist immer noch ein Denkfehler. Denn auf

                                      div li label

                                      wird im Vergleich zu

                                      li label

                                      ja ein Spezifitätskriterium angewandt.

                                      Also findet auch CSS, dass Selektorenkombinationen Selektoren sind. Bleibt das Problem: Warum haben spezifischere (dem Wortsinn nach) Kombinatoren keinen Einfluss darauf?!?

                                      Bin gespannt, wer mir das sinnvoll beantworten kann ;)

                                      Grüße,

                                      RIDER

                                      --
                                      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                      1. Om nah hoo pez nyeetz, Camping_RIDER!

                                        Also findet auch CSS, dass Selektorenkombinationen Selektoren sind. Bleibt das Problem: Warum haben spezifischere (dem Wortsinn nach) Kombinatoren keinen Einfluss darauf?!?

                                        Weil der Kombinator selbst keinen Einfluss darauf hat.

                                        Matthias

                                        --
                                        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen CAS und Casanova.

                                        1. Aloha ;)

                                          Also findet auch CSS, dass Selektorenkombinationen Selektoren sind. Bleibt das Problem: Warum haben spezifischere (dem Wortsinn nach) Kombinatoren keinen Einfluss darauf?!?

                                          Weil der Kombinator selbst keinen Einfluss darauf hat.

                                          In wiefern? Die Verwendung des einen Kombinators (>) schränkt die Auswahl an Elementen stärker ein als der andere ( ), selektiert aber nie Elemente, die der andere nicht selektiert. Natürlich ist er dadurch spezifischer. Zumindest dem Sinn des Wortes spezifisch nach. Oder etwa nicht?

                                          Grüße,

                                          RIDER

                                          --
                                          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                          ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                          1. Aloha ;)

                                            Wer meiner Definition von spezifisch keinen Glauben schenkt: Das inhaltlich selbe steht im Wiktionary unter "spezifizieren", nämlich

                                            Bedeutungen:
                                            [1] etwas genauer darlegen, bestimmen

                                            Grüße,

                                            RIDER

                                            --
                                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                    2. @@Camping_RIDER:

                                      nuqneH

                                      Ein Selektor ist dabei li oder label.

                                      Etwas wie
                                      li>label
                                      ist wohl kein Selektor

                                      Doch, das ist ein Selektor. Ein „complex selector“.

                                      sondern das sind zwei Selektoren, die durch einen Kombinator verknüpft werden.

                                      Nein. Das sind zwei „compound selectors“ (die in diesem Fall „simple selectors“ sind), die durch einen Kombinator verknüpft werden.

                                      Offenbar sagt die Sprachdefinition von CSS: Selektorenkombination ≠ Selektor.

                                      Wenn’s dir um die Definition geht, warum mutmaßt du anstatt nachzuschlagen?

                                      Qapla'

                                      --
                                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                      1. Aloha ;)

                                        Wenn’s dir um die Definition geht, warum mutmaßt du anstatt nachzuschlagen?

                                        ACK, hast ja Recht... Die Bezeichnung von kombinierten Selektoren ändert aber halt nix dran, dass imho das Konzept der Spezifität nicht konsequent durchgezogen wurde.

                                        Grüße,

                                        RIDER

                                        --
                                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                    3. @@Camping_RIDER:

                                      nuqneH

                                      Dass der Kombinator „>“ meist weniger Elemente selektiert als „ “ hat ja nichts damit zu tun, in welcher Reihenfolge die Deklarationen angewendet werden sollen.

                                      Doch, imho schon. Schließlich ist das Kriterium die Spezifität der Deklaration. Und der Kombinator ">" selektiert zwar nur meist weniger Elemente als " ", aber nie mehr. Damit ist schon gegeben, dass Selektoren, die mit ">" kombiniert werden, spezifischer sind als welche mit " ".

                                      Du willst also dem '>'-Kombinator eine höhere Spezifität geben als dem ' '-Kombinator? Und dann auch dem '+'-Kombinator eine höhere Spezifität als dem '~'-Kombinator?

                                      Und nun vergleich mal ' ' mit '~'. Was selektiert mehr Elemente: 'foo bar' oder 'foo~bar'? Es sollte einleuchten, dass „weniger“ nicht unbedingt ein sinnvolles Kriterium für „spezifischer“ ist.

                                      Ich glaube aber zu wissen, wo mein Denkfehler liegt. Oder in meinen Augen: Die Inkonsequenz der Spec. Scheinbar ist die Spezifität ein Kriterium der Wichtigkeit, das nur und ausschließlich auf Selektoren angewandt wird.

                                      Es gibt verschiedene Typen einfacher Sektoren, die unterschiedliche Spezifität haben. Wolltest du Kombinatoren unterschiedlicher Spezifität, müssten die auch in Typen eingeteilt werden. Damit würde man noch zusätzliche Komplexität hineinbringen – unnötige, wie ich finde.

                                      Mal abgesehen davon, dass man die bestehenden Kombinatoren wegen Abwärtskompatibilität nicht mehr ändern könnte.

                                      Qapla'

                                      --
                                      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                      1. Aloha ;)

                                        Du willst also dem '>'-Kombinator eine höhere Spezifität geben als dem ' '-Kombinator?

                                        Ja.

                                        Und dann auch dem '+'-Kombinator eine höhere Spezifität als dem '~'-Kombinator?

                                        Nein.

                                        Und nun vergleich mal ' ' mit '~'. Was selektiert mehr Elemente: 'foo bar' oder 'foo~bar'? Es sollte einleuchten, dass „weniger“ nicht unbedingt ein sinnvolles Kriterium für „spezifischer“ ist.

                                        Das habe ich nie gesagt. Meine Definition sagt Teilmenge, nicht weniger Elemente. Das ist ein wesentlicher Unterschied. Ich habe nicht ohne Grund für eine formale Definition ausgeholt. Könnte man diese runterbrechen, hätte ich es getan. Dass du sie trotzdem runterbrichst um mich zu widerlegen ist argumentativ nicht geschickt ;)

                                        Ich glaube aber zu wissen, wo mein Denkfehler liegt. Oder in meinen Augen: Die Inkonsequenz der Spec. Scheinbar ist die Spezifität ein Kriterium der Wichtigkeit, das nur und ausschließlich auf Selektoren angewandt wird.

                                        Es gibt verschiedene Typen einfacher Sektoren, die unterschiedliche Spezifität haben. Wolltest du Kombinatoren unterschiedlicher Spezifität, müssten die auch in Typen eingeteilt werden. Damit würde man noch zusätzliche Komplexität hineinbringen – unnötige, wie ich finde.

                                        Mal abgesehen davon, dass man die bestehenden Kombinatoren wegen Abwärtskompatibilität nicht mehr ändern könnte.

                                        Das ist schätzungsweise das Hauptproblem. Nichtsdestotrotz eine Designschwäche, selbst wenn sie sich schon lange hält und daher Bestandsschutz genießt. Andererseits ist eine Kehrtwende über Umwege nicht unmöglich, wie box-model zeigt. Trotzdem glaube ich nicht, dass sich was ändern wird. Die Inkonsequenz ist wohl zu subtil.

                                        Grüße,

                                        RIDER

                                        P.S.: inzwischen verstehe ich dein Argument zum fachlich nicht hilfreich. Die Anzahl der fachlich hilfreich an deinem Beitrag zeigt mir hier auch nur vor Allem an, wie viele Mitleser meinen Beitrag genauso ungenügend genau gelesen haben ;) - Damit sind wir quitt :D

                                        --
                                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                        1. @@Camping_RIDER:

                                          nuqneH

                                          Du willst also dem '>'-Kombinator eine höhere Spezifität geben als dem ' '-Kombinator?

                                          Ja.

                                          Und dann auch dem '+'-Kombinator eine höhere Spezifität als dem '~'-Kombinator?

                                          Nein.

                                          Du bist inkonsequent. foo+bar selektiert eine Teilmenge von foo~bar.

                                          um mich zu widerlegen ist argumentativ nicht geschickt ;)

                                          Das muss ich gar nicht. Geschickt ist, dich dich selbst widerlegen zu lassen. ;-)

                                          Andererseits ist eine Kehrtwende über Umwege nicht unmöglich

                                          Das hieße noch mehr Kombinatoren einzuführen, mit derselben Bedeutung, aber höherer Spezifität. Ich glaube nicht, dass das sinnvoll wäre.

                                          Qapla'

                                          --
                                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                          1. Aloha ;)

                                            Und dann auch dem '+'-Kombinator eine höhere Spezifität als dem '~'-Kombinator?

                                            Nein.

                                            Du bist inkonsequent. foo+bar selektiert eine Teilmenge von foo~bar.

                                            Hoppla, du hast Recht. Jetzt hab ich mich verlesen. Dachte du wolltest, wie später, " " mit "~" vergleichen ;)

                                            um mich zu widerlegen ist argumentativ nicht geschickt ;)

                                            Das muss ich gar nicht. Geschickt ist, dich dich selbst widerlegen zu lassen.

                                            Stimmt :D - Prinzipiell. Aber seis drum, ob die Spezifität jetzt konsistentes Kriterium ist oder nicht, denn...

                                            Andererseits ist eine Kehrtwende über Umwege nicht unmöglich

                                            Das hieße noch mehr Kombinatoren einzuführen, mit derselben Bedeutung, aber höherer Spezifität. Ich glaube nicht, dass das sinnvoll wäre.

                                            ...hier hast du sicher Recht. Das Nichteinbeziehen der Kombinatoren gehört wohl zu den Unsinnigkeiten, die nicht mehr sinnvoll verbessert werden können ;)

                                            Grüße,

                                            RIDER

                                            --
                                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                            1. @@Camping_RIDER:

                                              nuqneH

                                              Hoppla, du hast Recht.

                                              Wieso hoppla?

                                              ...hier hast du sicher Recht. Das Nichteinbeziehen der Kombinatoren gehört wohl zu den Unsinnigkeiten, die nicht mehr sinnvoll verbessert werden können ;)

                                              Das mit „Unsinnigkeiten“ hast du gesagt.

                                              Qapla'

                                              --
                                              „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                        2. Aloha ;)

                          label {...}

                          Überschrieben durch Anweisungen in

                          li label {...}

                          und diese durch Anweisungen in

                          li>label {...}

                          ersetze

                          li>label {...}

                          durch

                          li label.class {...}

                          ;) Danke an Matthias für den Hinweise!

                          Grüße,

                          RIDER

                          --
                          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                          ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                          1. Aloha ;)

                            ;) Danke an Matthias für den Hinweise!

                            Danke, lieber RIDER. Den fachlichen Fehler korrigiert und einen Grammatik-Fail hinzugefügt. Ganz großes Tennis.

                            Grüße,

                            RIDER

                            P.S.: Der Denglisch-Fail war jetzt aber beabsichtigt ;)

                            --
                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                          2. Hi,

                            ersetze

                            li>label {...}

                            durch

                            li label.class {...}

                            Hm... so eine Kette habe ich ja gar nicht definiert in meinem css:

                            #karriere1 {  
                                      background: #e20b00;  
                                      }  
                              
                                      #karriere1 label:hover {  
                                           background: #000000;  
                                           color: #e20b00;  
                                           }  
                              
                                           .karriere {  
                                           background:url(../menue/berufliches-normal.png) no-repeat;  
                                           background-position: 10px 6px;  
                                           padding: 0px 0px 0px 0px;  
                                           }  
                              
                                           .karriere:hover {  
                                           background:url(../menue/berufliches-hover.png) no-repeat;  
                                           background-position: 10px 6px;  
                                           }      
                            

                            Und so wird es aufgerufen:

                            <li id="karriere1"><input type="radio" name="navi_1" id="navi_1_1" class="hackbox"/><label class="karriere" for="navi_1_1">&nbsp;</label>  
                                                    <ul class="karriere2">  
                                                            <li><input type="radio" name="navi_2" id="navi_2_1" class="hackbox"/><label class="e2" for="navi_2_1">Promotion</label>  
                                                                    <ul class="karriere3">  
                                                                            <li><a class="e3" href="/karriere/promotions-thema.php">Thema</a></li>  
                                                                            <li><a class="e3" href="/karriere/promotions-vortrag.php">Promotionsvortrag</a></li>  
                                                                            <li><a class="e3" href="/karriere/promotions-pruefung.php">Doktorprüfung</a></li>  
                                                                    </ul>  
                                                            </li>  
                                                            <li><a class="e2" href="/karriere/studium.php">Studium</a></li>  
                                                    </ul>  
                                            </li>  
                            
                            

                            Soll ich das dann jetzt so schreiben:

                            [code lang=css]#karriere1 {  
                                      background: #e20b00;  
                                      }  
                              
                                      #karriere1 label.karriere:hover {  
                                           background: #000000;  
                                           color: #e20b00;  
                                           }
                            

                            ???

                            1. Aloha ;)

                              Das wollte ich damit so nicht sagen, das war ein aus der Luft gegriffenes, abstraktes Beispiel um Spezifität zu erklären, mehr nicht ;)

                              Grüße,

                              RIDER

                              --
                              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                              ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                        3. Hi,

                          Na, dann gewöhn dich dran ;) Entwicklerwerkzeuge sind mein Hauptkapital was Produktivitätssteigerung und Fehlerfindung angeht ;)

                          na, wenn du dich damit so gut auskennst, dann kannst du wahrscheinlich auf den ersten Blick sehen, was die Ursachen für meine beiden (HOVER der Hauptmenügrafiken, Zeileneinschub auf den Untermenüebenen beim CHROME) Probleme sind? ;-)

                          Ist dann auch eigentlich nicht mehr soo kompliziert. Kurzerklärung: im Hauptfenster hast du links (in groß) die Übersicht über dein HTML. Rechts davon ist eine Auflistung aller CSS-Regeln, die auf das links ausgewählte Element wirken (hier kannst du unterschiedliche Ansichten wählen, für dein Problem ist die Standardansicbt mit den verschiedenen CSS-Regeln und der Stelle, wo diese definiert werden, das beste...).

                          seh ich das richtig, daß in rosa, blass Geschriebenes die Anweisungen sind, die vom vorherigen Element "erschlagen" wurden und nur Fettgeschriebenes an der jeweiligen Stelle ausgeführt wird?

                          Nein, so ist es sicherlich nicht. Die Kaskade sagt ja eben, dass Elementverschachtelungen von außen nach innen abgearbeitet werden. Interessanter ist da die Frage nach der Spezifizität (igitt, dieses Wort) deiner Regeldefinition.

                          Zum Beispiel werden Anweisungen in

                          label {...}

                          Überschrieben durch Anweisungen in

                          li label {...}

                          und diese durch Anweisungen in

                          li>label {...}

                          Und den totalen Overkill haben Anweisungen mit !important, die überschreiben grundsätzlich alles (was selbst nicht important ist).

                          Hm... aber in meinem Fall sollen ja beide ausgeführt werden, sowohl das HOVERn der Grafik UND das HOVERn des Untergrunds... beide sollen ihre Farben invertieren, nur soll die <LABEL>-Hintergrundgrafik obendrauf liegen und sichtbar sein und nicht unter dem gehoverten <LI> liegen.

                          Beim normalen Seitenauf klappt das ja... erst wieder das <LI> formatiert (roter Hintergrund z. B.) und darauf dann danach das <LABEL> mit der Schriftgrafik.
                          Beim HOVERn kehrt sich diese Reihenfolge irgendwie um...

                          Wenn ich das HOVERn des <LABEL>s jetzt mit !important markiere... sollte das ja im Vordergrund verbleiben? Wird dann das HOVERn das <LI> überhaupt noch ausgeführt? Als gemäß der Theorie?

                          Gruß
                          JPL

                          1. Aloha ;)

                            Na, dann gewöhn dich dran ;) Entwicklerwerkzeuge sind mein Hauptkapital was Produktivitätssteigerung und Fehlerfindung angeht ;)

                            na, wenn du dich damit so gut auskennst, dann kannst du wahrscheinlich auf den ersten Blick sehen, was die Ursachen für meine beiden (HOVER der Hauptmenügrafiken, Zeileneinschub auf den Untermenüebenen beim CHROME) Probleme sind? ;-)

                            Sobald ich daheim bin und nen richtigen Chrome zur Verfügung hab, ja ;) bis dahin kann ich nur spekulieren :D

                            Ist dann auch eigentlich nicht mehr soo kompliziert. Kurzerklärung: im Hauptfenster hast du links (in groß) die Übersicht über dein HTML. Rechts davon ist eine Auflistung aller CSS-Regeln, die auf das links ausgewählte Element wirken (hier kannst du unterschiedliche Ansichten wählen, für dein Problem ist die Standardansicht mit den verschiedenen CSS-Regeln und der Stelle, wo diese definiert werden, das beste...).

                            seh ich das richtig, daß in rosa, blass Geschriebenes die Anweisungen sind, die vom vorherigen Element "erschlagen" wurden und nur Fettgeschriebenes an der jeweiligen Stelle ausgeführt wird?

                            Das was "erschlagen" im Sinne von überschrieben wurde ist (zumindest bei mir normal?) IMHO durchgestrichen (in der Standardansicht). Kommt aber auch auf die Ansicht an.

                            Hm... aber in meinem Fall sollen ja beide ausgeführt werden, sowohl das HOVERn der Grafik UND das HOVERn des Untergrunds... beide sollen ihre Farben invertieren, nur soll die <LABEL>-Hintergrundgrafik obendrauf liegen und sichtbar sein und nicht unter dem gehoverten <LI> liegen.

                            Moment, jetzt wirfst du inhaltlich zwei Sachen durcheinander. Das li hovert für sich und das label hovert für sich. Wenn Anweisungen spezifischer auf label passen hat das auf li keinerlei Auswirkung. Ich schau mir gerne von Zuhause aus das ganze an, dann kann ich dir sicher sagen, was da genau los ist / war. Im Moment rate ich nur ins Blaue. In etwa 2,5 Stunden kann ich dir mehr sagen.

                            Beim normalen Seitenauf klappt das ja... erst wieder das <LI> formatiert (roter Hintergrund z. B.) und darauf dann danach das <LABEL> mit der Schriftgrafik.
                            Beim HOVERn kehrt sich diese Reihenfolge irgendwie um...

                            Ne, so passiert das nicht. Die Anwendung von Formatierungsregeln (für verschiedene, auch verschachtelte Elemente) passiert eigentlich nicht zeitlich oder nach einer Reihenfolge bestimmt (vorausgesetzt sie überschneiden sich nicht). Beim hovern wird auch ganz sicher keine Reihenfolge umgekehrt (die es ja eigentlich in dem Sinn gar nicht gibt).

                            Wenn ich das HOVERn des <LABEL>s jetzt mit !important markiere... sollte das ja im Vordergrund verbleiben? Wird dann das HOVERn das <LI> überhaupt noch ausgeführt? Als gemäß der Theorie?

                            Nach der Theorie kannst du durch !important nur regeln, was ausgeführt wird (genauso wie durch alle anderen Spezifitätsmerkmale). Ob und was im Vordergrund steht, hat damit primär nichts (!) zu tun. Und ja, gemäß der Theorie hovern beim Überfahren eines Elements auch alle seine Elternelemente (sofern sie an dieser Stelle tatsächlich 'darunter' liegen, mit verschiedenen Angaben für position kann es imho komplizierter werden - müsste ich aber selbst erst testen... Wahrscheinlich ist richtiger: Alle Elternelemente im selben Elementfluss hovern mit).

                            Grüße,

                            RIDER

                            --
                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                            1. Sobald ich daheim bin und nen richtigen Chrome zur Verfügung hab, ja ;) bis dahin kann ich nur spekulieren :D

                              Moment, jetzt wirfst du inhaltlich zwei Sachen durcheinander. Das li hovert für sich und das label hovert für sich. Wenn Anweisungen spezifischer auf label passen hat das auf li keinerlei Auswirkung. Ich schau mir gerne von Zuhause aus das ganze an, dann kann ich dir sicher sagen, was da genau los ist / war. Im Moment rate ich nur ins Blaue. In etwa 2,5 Stunden kann ich dir mehr sagen.

                              Kannst du dann bitte auch gleich mal gucken, warum beim Chrome noch Leerzeilen (bzw. Zeilenumbrüche) bei den Untermenüs eingefügt werden? Kannst du ja im Chrome sehr leicht sehen, wie das Menü da aussieht, im Vergleich zum Feuerfuchs...
                              ;)

                              Gruß
                              Jochen

                              1. Nachtrag:

                                Ich hab jetzt mal die Seite soweit verändert, daß ich:

                                • beim Menüeintrag KARRIERE, das HOVER der #ID entfernt habe und NUR noch das <LABEL> hovern lasse, dafür die Grafik entsprechend auf die Sichtgröße angepasst. So sieht alles aus wie es von mir gewünscht ist.
                                  Damit habe ich dann zwar die Symptome umgangen - aber nicht die Ursache für das "Problem" gefunden. Das ist Plan B... zwar aufwendig zu gestalten (die Schrift aller Grafiken muß ja exakt ausgerichtet sein etc. - da ist es schon bequemer nur die Schrift zu haben und die dann durch CSS-Positionierung auszurichten... und wenn einem die Position nicht mehr gefällt, muss man alle Grafiken neu erstellen, während man mit einer technichen Lösung einfach ein paar "background-position: Xpx Ypx;" anpassen muss... deshalb nur Plan B, wenn alles andere nicht funktioniert)

                                • beim Menüeintrag HOBBIES habe ich nur das HOVER der #ID entfernt und das HOVER des LABELs gelassen...

                                • alle anderen Menüs wie gehabt... das HOVERN der #ID überdeckt das HOVERn des LABELs.

                                1. Nachtrag 2 aka "schade, dass man nicht editieren kann :-)

                                  Hier ein FIREFOX-Schnappschuss des Menüs - alles so wie es sein soll.

                                  Hier ein CHROME-Schnappschuss des Menüs - nichts so wie es sein soll, Chrome fügt scheinbar bei den <LI>-Einträgen noch Zeilenumbruche (Leerzeilen) ein... sieht natürlich furchbar aus.

                                  Hier weiß ich auch nicht, warum Chrome das macht - und noch weniger, wie ich es wegbekomme.
                                  :)

                              2. Aloha ;)

                                Problem 1 hab ich gefunden. Screenshot:

                                Screenshot

                                Was verraten mir die Entwicklerwerkzeuge:

                                Ich habe links das fragliche label-Element ausgewählt und auf hover gestellt. Was zeigt Chrome mir rechts an: Bisher hatte das label ein Hintergrundbild ("../menue/amiga/normal.png") und jetzt, durch das hovern, wurde diese Regel überschrieben. Durch das hovern bekommt das label nämlich "background:#000000;".

                                Übrigens: In mein.css auf Zeile 485 hattest du für das hovern "../menue/amiga/hover.png" als Hintergrundbild festgelegt, das wurde aber in Zeile 475 überschrieben durch den genannten schwarzen Hintergrund. Schuld daran ist - genau wie ich vermutet hatte - Spezifität deiner Anweisungen. Denn offenbar ist #amiga1 label:hover spezifischer als .amiga:hover.

                                No blame - selbst ich hätte das nicht unbedingt vorausgesehen. Dass das eine spezifischer ist als das andere ist hier nicht ganz selbsterklärlich, es ist aber so. Denn ein label unterhalb eines ganz spezifisch per ID eingegrenzten Element ist halt nunmal spezifischer als ein label mit Klasse .amiga, dass theoretisch im Quellcode zigmal an unterschiedlichsten Stellen vorkommen kann. Siehe dazu auch meine Definition von Spezifität im Off-Topic-Teil dieses Threads... Also, no blame, aber das betont, warum ich immer wieder die Verwendung von Entwicklertools predige. Denn DAS ist ein Fehler, den du als Programmierer in mehreren hundert Zeilen CSS nicht findest. In den Entwicklertools wird das Problem aber schnell offensichtlich.

                                Ich frage mich, warum du überhaupt Text als Hintergrund einbindest. Wahrscheinlich wegen der Schriftart? Schonmal drangedacht, was Menschen tun, die die Bilder nicht sehen können (weil sie blind sind oder weil die Bilder nicht geladen wurden)? Hättest du ein <img> ginge das ja noch, da gibts wenigstens den alt-Text. So stehen diese Menschen vor einer Liste ohne Text und fragen sich: Was soll ich damit?

                                Die Lösung: Machs so wie bei deinen Unterpunkten auch: Nimm den Navigationstext in das Element rein (hier ins label, wo jetzt nur &nbsp; steht). Der Hintergrund kann dann je nach hover oder nicht eine andere Farbe haben. Hat auch den Vorteil, dass du dir die ganzen Bilder für alle einzelnen Navigationspunkte sparen kannst. Die Schriftart legst du fest, wie man Schriftarten in CSS eben einbindet. Ganz einfach und unkompliziert für dich gehts mit Google Fonts.

                                Zu den Leerzeilen kommt dann gleich noch was.

                                Grüße,

                                RIDER

                                --
                                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                1. Om nah hoo pez nyeetz, Camping_RIDER!

                                  No blame - selbst ich hätte das nicht unbedingt vorausgesehen. Dass das eine spezifischer ist als das andere ist hier nicht ganz selbsterklärlich, es ist aber so. Denn ein label unterhalb eines ganz spezifisch per ID eingegrenzten Element ist halt nunmal spezifischer als ein label mit Klasse .amiga, dass theoretisch im Quellcode zigmal an unterschiedlichsten Stellen vorkommen kann. Siehe dazu auch meine Definition von Spezifität im Off-Topic-Teil dieses Threads... Also, no blame, aber das betont, warum ich immer wieder die Verwendung von Entwicklertools predige. Denn DAS ist ein Fehler, den du als Programmierer in mehreren hundert Zeilen CSS nicht findest. In den Entwicklertools wird das Problem aber schnell offensichtlich.

                                  Es gibt bereits eine Definition der Spezifität.
                                  http://wiki.selfhtml.org/wiki/Spezifit.C3.A4t#Spezifit.C3.A4t_der_Regels.C3.A4tze

                                  Matthias

                                  --
                                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Halle und Halleffekt.

                                  1. Aloha ;)

                                    Es gibt bereits eine Definition der Spezifität.
                                    http://wiki.selfhtml.org/wiki/Spezifit.C3.A4t#Spezifit.C3.A4t_der_Regels.C3.A4tze

                                    Danke für die Verlinkung. War in dem Moment bloß zu faul zum raussuchen und meine wortgemäße Definition tuts in dem Fall auch ;)

                                    Grüße,

                                    RIDER

                                    P.S.: Du siehst das Problem mit dem urlencode, das ich neulich angesprochen habe.

                                    --
                                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                2. Aloha :-)

                                  Ich habe links das fragliche label-Element ausgewählt und auf hover gestellt. Was zeigt Chrome mir rechts an: Bisher hatte das label ein Hintergrundbild ("../menue/amiga/normal.png") und jetzt, durch das hovern, wurde diese Regel überschrieben. Durch das hovern bekommt das label nämlich "background:#000000;".

                                  Okay, daß haben wir ja auch schon ohne Entwicklerwerkzeug vermutet bzw. eigentlich gewußt, da wir den Effekt ja sehen konnten :) ;-)

                                  No blame - selbst ich hätte das nicht unbedingt vorausgesehen. Dass das eine spezifischer ist als das andere ist hier nicht ganz selbsterklärlich, es ist aber so. Denn ein label unterhalb eines ganz spezifisch per ID eingegrenzten Element ist halt nunmal spezifischer als ein label mit Klasse .amiga, dass theoretisch im Quellcode zigmal an unterschiedlichsten Stellen vorkommen kann. Siehe dazu auch meine Definition von Spezifität im Off-Topic-Teil dieses Threads... Also, no blame, aber das betont, warum ich immer wieder die Verwendung von Entwicklertools predige. Denn DAS ist ein Fehler, den du als Programmierer in mehreren hundert Zeilen CSS nicht findest. In den Entwicklertools wird das Problem aber schnell offensichtlich.

                                  Hm... ehrlich (!) gesagt... wenn ich manchmal AUS VERSEHEN (weil es wieder schnell gehen mußte), aus versehen bei RECHTSKLICK "Element untersuchen" geklickt habe und dieses Fenster aufging, habe ich immer geflucht, warum so eine komische Ansicht überhaupt existiert, denn wer sollte sowas schon ansehen wollen... :-D

                                  ... so kann man sich irren.

                                  Jetzt, wo ich durch deine Ausführungen weiß, was man damit machen kann, mit diesem Werkzeug, konnte ich auch auf dem FF das HOVER Problem nachstellen, also in der Hinsicht, dass ich sehen kann, was genau auf welche Ebene ausgeführt wird.
                                  :)

                                  Ich frage mich, warum du überhaupt Text als Hintergrund einbindest. Wahrscheinlich wegen der Schriftart? Schonmal drangedacht, was Menschen tun, die die Bilder nicht sehen können (weil sie blind sind oder weil die Bilder nicht geladen wurden)? Hättest du ein <img> ginge das ja noch, da gibts wenigstens den alt-Text. So stehen diese Menschen vor einer Liste ohne Text und fragen sich: Was soll ich damit?

                                  Ganz einfach: weil ich diese Schriftart supertoll finde...
                                  ... und ehrlich gesagt HTML/CSS um 1996 gelernt habe, als es keine schönen Schriftarten gab und man wenigsten Menüs durch Grafiken schöner darstellen konnte...

                                  Die Lösung: Machs so wie bei deinen Unterpunkten auch: Nimm den Navigationstext in das Element rein (hier ins label, wo jetzt nur &nbsp; steht). Der Hintergrund kann dann je nach hover oder nicht eine andere Farbe haben. Hat auch den Vorteil, dass du dir die ganzen Bilder für alle einzelnen Navigationspunkte sparen kannst. Die Schriftart legst du fest, wie man Schriftarten in CSS eben einbindet. Ganz einfach und unkompliziert für dich gehts mit Google Fonts.

                                  ...und ich bis jetzt diese Seite nicht kannte.
                                  Wow, was es heutzutage alles für Sachen gibt... ja, die Grafiken fliegen am Wochenende raus und es wird ein schöner Schriftsatz gewählt.
                                  :-)

                                  Soviel "a"s hat meine Tastatur gar nicht, um für diese ganzen Hinweise DAAAAAAAAAANKE zu sagen.
                                  :)

                                  Gruß
                                  Jochen

                                3. @@Camping_RIDER:

                                  nuqneH

                                  Bisher hatte das label ein Hintergrundbild ("../menue/amiga/normal.png") und jetzt, durch das hovern, wurde diese Regel überschrieben. Durch das hovern bekommt das label nämlich "background:#000000;".

                                  Weil die zusammenfassende Eigenschaft 'background' alle nicht explizit angegeben 'background-*'-Eigenschaften auf ihren Defaultwert setzt; 'background-image' auf none.

                                  Sollte dies nicht erwünscht sein: “Don’t use CSS shorthands unless you understand every piece of it.” —Zoe M. Gillenwater

                                  Qapla'

                                  --
                                  „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                              3. Aloha ;)

                                Okay - Problem 2 habe ich auch am Schopf. Ich habe zwar (noch) keine Lösung, aber die Entwicklertools haben mir den Fehler aufgezeigt:

                                Screenshot

                                Zunächst hatte ich gesehen, dass das keine richtige Leerzeile ist - denn weder im Code noch im CSS sind sie abgebildet. Laut Tools ist das label 22px hoch und das li 46px. Es ist also irgend ein Leerraum innerhalb des li da, der Probleme macht.
                                Ich hab in den Entwicklertools einfach mal nach und nach zunächst alle CSS-Regeln für das li abgeschaltet. Hat nix gebracht. Dann neu geladen. Dann die erste Eigenschaft des label abgeschaltet (padding in mein.css:311) und tada: Der dämliche Abstand war weg.

                                Okay, das ist noch keine Lösung. Über die muss ich jetzt noch hirnen. Und testen mit Entwicklertools ;)

                                *hirn und test*

                                Was mir als erstes auffällt: Wenn ich in den Entwicklertools über das fragliche Element fahre, werden mir ja im Browser-Hauptfenster seine Abmessungen gezeigt. Ohne padding passt das Element rein, mit padding steht es über.

                                Screenshot

                                Ich hatte dann die Vorahnung, dass es mit dem Überstand zusammenhängt. Ich dachte mir: Bestimmt fügt Chrome dann eine Leerzeile ein, wenn inline-Elemente über die Zeilenbreite hinausgehen. (Denn das ist ja auch sinnvoll. Wenn ich ein Wort schreibe, das über die Zeilenbegrenzung hinausgeht, soll ein Umbruch geschehen und das Wort komplett in die nächste Zeile gehen.

                                Ich hab die These getestet, und siehe da: Es stimmt. Du hast zwei Möglichkeiten.

                                1. Du sagst Chrome, es soll die a von außen nicht mehr als inline-Elemente behandeln. Also display:block; statt display:inline-block; in mein.css:279... Das habe ich getestet (in den Entwicklertools), das funktioniert.

                                2. Du verhinderst, dass das a über die Zeile hinausgeht. Indem du die width verkleinerst. Damit das ordentlich mit Prozentwerten geht, muss padding auch in Prozent angegeben sein (außer du weist den Browser an, ein alternatives Boxmodell zu nutzen). Getestet habe ich mit padding-left:10%; und width:90%;, das funktionierte wunderbar.

                                Übrigens: Indirekt hatte ich das drohende Problem mit dem Überstand schonmal angesprochen :P Wenn auch nicht so direkt und in dieser Absicht, also auch hier, no blame ;) Und auch hier gilt: Ohne Entwicklertools hätte ich weder Problem noch Lösung gefunden :P

                                Grüße,

                                RIDER

                                --
                                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                1. Aloha :-D

                                  vorneweg: mußtest du gerade einen Screenshot mit meinem cartoonisierten Bild machen? Du weißt doch, daß das hier für die Ewigkeit erhalten bleibt :-D

                                  1. Du sagst Chrome, es soll die a von außen nicht mehr als inline-Elemente behandeln. Also display:block; statt display:inline-block; in mein.css:279... Das habe ich getestet (in den Entwicklertools), das funktioniert.
                                  1. Du verhinderst, dass das a über die Zeile hinausgeht. Indem du die width verkleinerst. Damit das ordentlich mit Prozentwerten geht, muss padding auch in Prozent angegeben sein (außer du weist den Browser an, ein alternatives Boxmodell zu nutzen). Getestet habe ich mit padding-left:10%; und width:90%;, das funktionierte wunderbar.

                                  Genau das werde ich übernehmen. Für alle Ebenen. Prozentuales Einrücken. 5 / 10 / 15 % z. B., mal gucken wie das wirkt...

                                  Übrigens: Indirekt hatte ich das drohende Problem mit dem Überstand schonmal angesprochen :P Wenn auch nicht so direkt und in dieser Absicht, also auch hier, no blame ;) Und auch hier gilt: Ohne Entwicklertools hätte ich weder Problem noch Lösung gefunden :P

                                  ... was dann bedeutet: Die Summe der horizontalen PADDING-Werte, addiert mit Wert für WIDTH muß 100 % ergeben, damit es mit dem Nachbarn klappt.
                                  :-)

                                  Sag mal... wohnt du zufällig in der Nähe zur Schweiz?

                                  Gruß
                                  JPL

                                  1. Aloha ;)

                                    vorneweg: mußtest du gerade einen Screenshot mit meinem cartoonisierten Bild machen? Du weißt doch, daß das hier für die Ewigkeit erhalten bleibt :-D

                                    Hehe, die Posts schon, die Bilder aber nicht :D Die sind nach wie vor auf meinem persönlichen Webspace gehostet^^ Wenns dich beruhigt: Ich hab grad mal schnell in absolut unauffälliger Farbe drüberzensiert (kann aber sein, dass du deinen Cache leeren musst) :D

                                    Genau das werde ich übernehmen. Für alle Ebenen. Prozentuales Einrücken. 5 / 10 / 15 % z. B., mal gucken wie das wirkt...

                                    Ich finde das auch daher sinnvoll, da so immer ein Einrücken stattfindet, dieses aber bei vielen Ebenen dann irgendwann weniger wird, also nicht ganz so aggressiv daherkommt :D

                                    ... was dann bedeutet: Die Summe der horizontalen PADDING-Werte, addiert mit Wert für WIDTH muß 100 % ergeben, damit es mit dem Nachbarn klappt.

                                    Exakt ;)

                                    Sag mal... wohnt du zufällig in der Nähe zur Schweiz?

                                    ;) Bzw. definiere Nähe? :D

                                    Grüße,

                                    RIDER

                                    --
                                    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                    ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                    1. Hi,

                                      Hehe, die Posts schon, die Bilder aber nicht :D Die sind nach wie vor auf meinem persönlichen Webspace gehostet^^ Wenns dich beruhigt: Ich hab grad mal schnell in absolut unauffälliger Farbe drüberzensiert (kann aber sein, dass du deinen Cache leeren musst) :D

                                      hehe :)

                                      Ich finde das auch daher sinnvoll, da so immer ein Einrücken stattfindet, dieses aber bei vielen Ebenen dann irgendwann weniger wird, also nicht ganz so aggressiv daherkommt :D

                                      So, habe jetzt alles so angepasst wie besprochen... Grafiken raus, dafür Text, dazu schöner Schriftsatz von Google... ach was sag ich denn... Schriftsätze von Google. Sachen gibts... ich war zulange nicht mehr am Programmieren, hab vieles verpasst die letzten Jahre, wie ich bemerken muss...

                                      Ein kleines Gestaltungsproblem hab ich jetzt noch:

                                      Die erste Menüebene und die erste Unterebene, haben jeweils 2 Pixel Abstand zu einander.

                                      nav ul li {  
                                           (...)  
                                           border-top: 2px solid #000000;  
                                           border-bottom: 0px solid #000000;  
                                      }
                                      

                                      Warum auch immer gab es nun aber einen 4 Pixel Abstand der dritten Ebene (die schwarz bzw. dunkelgrau unterlegte) zur Überschrift der zweiten Ebene.
                                      Ich habe die Ursache dafür nicht gefunden, aber wenn ich die <LI> der dritten Ebene so formatiere:

                                        
                                      nav ul ul ul li {  
                                      margin: -2px 0px 0px 0px;  
                                      }
                                      

                                      Und wie ich gerade sehe, überschreibe ich diesen Eintrag kurz danach (in meinem CSS) durch:

                                      nav ul li ul li ul li {  
                                          color: #000000;  
                                          margin: -3px 0px 0px 0px;  
                                          padding: 0px 0px 0px 0px;  
                                      }
                                      

                                      Na, abgesehen davon... ist mit diesen -3 Pixeln zumindest der Abstand der "dunklen" Einträge zur "bunten" Überschrift so wie sie sein soll.

                                      Ich versteh aber nicht, wo dieser große Abstand herkommt und warum ich mit diesen -3px ihn ausgleichen muss.

                                      Denn da die dritte Menüebene mit kleiner Schrift gestaltet ist und die Höhe der Zeilen entsprechend geringer ist, will ich hier nicht die 2 px Abstände zueinander haben, sondern nur 1 px.

                                      @allgemeine Frage:

                                      Kannst du mir sagen, warum ich auf einmal Offline zu Hause, wenn ich mit Xampp die Seite programmiere bzw. mit Xampp teste ob alles soll wie ich will - warum da auf einmal die Menüs mit Mausklick nicht mehr schließen kann?
                                      Online geht es zum Glück (was das wichtigste ist), aber zuhause mit Xampp... klappen die zwar mit Mausklick aus, aber nicht wieder ein... und ich bin ganz sicher, daß es vor meiner Überarbeitung noch ging...
                                      :-)

                                      @ HTML5 Validierung

                                      Inzwischen stelle ich auch auf HTML5 um, also weg von XHTML, damit ich <NAV> nutzen "darf". Wenn ich bei meinen Seiten jetzt auf Validierung klicke (das Icon rechts unten... das kleine XHTML :D ), kommen noch ein paar Fehler wegen der nicht mehr existenten seiteninternen Referenzierung mit <a name="..."></a>, was kein Problem zum korrigieren ist.

                                      Mehr Kopfzerbrechen bereitet mir folgendes, meinen Bildanzeiger betreffend:

                                      Bad value lyteshow[diss] for attribute rel on element a: The string lyteshow[diss] is not a registered keyword.  
                                        
                                      …tle="Der Umschlag meiner Dissertation"><img class="keinbilderrahmen" src="karr…  
                                        
                                      Syntax of list of link-type keywords:  
                                          A whitespace-separated list of link types, with no duplicate keywords in the list. Each link type must be listed as allowed on <a> and <area> in the HTML specification, or must be listed as allowed on <a> and <area> on the Microformats wiki, or must be an absolute URL. You can register link types on the Microformats wiki yourself. 
                                      

                                      Heißt das jetzt, daß ich mir einen neuen Bildanzeiger suchen muss? Ohne diese lyteshow[...]-Angaben funktionert der nämlich nicht...
                                      :)

                                      @Schweizer Frage

                                      Ich frage deshalb, weil ich dir für all deine Bemühungen, etwas kulinarisches aus der Schweiz zukommen lassen will... das Beste was die Schweizer können... Schokolade :)
                                      Deine Bemühungen hier meine Homepage nach meinen Absichten zum laufen zu bringen, gehen nämlich weit über das "normale" Maß an Tipps&Tricks hinaus... ohne deine ausführlichen Erklärungen und Scripte, würde meine Seite nicht so aussehen, wie sie jetzt schon aussieht... deshalb will ich mich da nach Weihnachten erkenntlich zeigen... bräuchte dazu deine Post-Adresse... gerne über das Kontaktformular meiner Seite schickbar...
                                      :)

                                      Gruß
                                      JPL

                                      1. Aloha ;)

                                        Ein kleines Gestaltungsproblem hab ich jetzt noch

                                        Ich kümmer mich drum, sobald ich daheim bin. Die letzten Tage haben gezeigt, dass das teils effektiver ist, als ohne Entwicklertools munter drauf los zu raten :D

                                        @allgemeine Frage:

                                        Kannst du mir sagen, warum ich auf einmal Offline zu Hause, wenn ich mit Xampp die Seite programmiere bzw. mit Xampp teste ob alles soll wie ich will - warum da auf einmal die Menüs mit Mausklick nicht mehr schließen kann?
                                        Online geht es zum Glück (was das wichtigste ist), aber zuhause mit Xampp... klappen die zwar mit Mausklick aus, aber nicht wieder ein... und ich bin ganz sicher, daß es vor meiner Überarbeitung noch ging...

                                        Hm, sicher sagen kann ich dir das nicht. Aber ich wage mal wieder nen educated guess: Das Problem liegt wahrscheinlich irgendwo im JavaScript oder in dessen Verknüpfung zum DOM. Ich komme darauf, weil ja das Zuklappen bei nochmaligem Klick genau das war, was wir mit Hilfe von JavaScript nachgerüstet hatten. Hinweise zum Debuggen:

                                        1.: Schau nach JS-Fehlern.
                                        In den Entwicklertools (verlinkt hab ich diesmal die Firefox-Variante) ist immer eine Konsole für JavaScript integriert. Wenn irgendwo im JS ein Fehler auftaucht, der das Script zum Erliegen bringt, dann wird dir der inklusive Fehlermeldung und Zeilenangabe in der Konsole angezeigt.

                                        2.: Selbes Markup?
                                        Handelt es sich bei deinem offline-Test um exakt dasselbe HTML wie online? Sind insbesondere eventuell Klassen (auf die JS zugreift) anders benannt? Ist das JavaScript ordnungsgemäß eingebunden? Auch letzteres verrät dir ein Blick in die devtools, entweder in der Standardansicht zum Script-Element scrollen und aufklappen (in den meisten Fällen wird dir dann der JS-Sourcecode angezeigt), oder in der "Netzwerkanalyse"-Ansicht (Google sagt, dass das bei FF so heißt), da müssten dir alle Resourcen angezeigt werden, die das HTML anfordert - also auch das JS-File (falls du das überhaupt extern eingebunden hast).

                                        Theoretisch sollte es an solchen (2) oder so ähnlichen externen Faktoren liegen, (1) ist ziemlich unwahrscheinlich - schließlich wird das JavaScript ja auf dem Client ausgeführt, dafür sollte der Server also keine Rolle spielen.

                                        @ HTML5 Validierung

                                        Mehr Kopfzerbrechen bereitet mir folgendes, meinen Bildanzeiger betreffend:

                                        [code lang=html]Bad value lyteshow[diss] for attribute rel on element a: The string lyteshow[diss] is not a registered keyword.

                                        …tle="Der Umschlag meiner Dissertation"><img class="keinbilderrahmen" src="karr…

                                        Heißt das jetzt, daß ich mir einen neuen Bildanzeiger suchen muss? Ohne diese lyteshow[...]-Angaben funktionert der nämlich nicht...

                                        Tja, da musste ich jetzt auch erstmal nachlesen. Offenbar darf das rel-Attribut seit HTML 5 keine beliebigen Werte, sondern nur noch bestimmte Keywords enthalten (Quelle, Spec). Blöd. Übrigens: Auch unsere Doku weiß das offenbar noch nicht, da steht als möglicher Wert nur cdata. Muss ich die Tage wohl mal selber ändern. W3Schools ist da momentan wohl aktueller.

                                        In HTML 5 wurde aber trotzdem die Anpassbarkeit durch Universalattribute verbessert. Du kannst dir da jetzt eigene Attribute definieren, namens data-*. Ich würde dir also folgendes vorschlagen: Ersetze im HTML alle rel durch data-rel. Dann musst du diese Ersetzung auch in JS vornehmen. Ersetze da alle ELEMENT.rel durch ELEMENT.attributes['data-rel'].nodeValue (obs noch einfacher geht zu ersetzen kann ich dir erst von daheim aus mit Konsole sagen, das hier ist halt etwas länglich, geht aber sicher - habs getestet in JSFiddle) und dein Bilder-Anzeige-Gedöns müsste wieder funktionieren :)

                                        @Schweizer Frage

                                        Ich frage deshalb, weil ich dir für all deine Bemühungen, etwas kulinarisches aus der Schweiz zukommen lassen will...

                                        Nicht nötig :D Ich mach das hier immerhin gerne und freiwillig - und wir wollen ja nicht, dass sich ein overjustification effect einstellt :D

                                        das Beste was die Schweizer können... Schokolade :)

                                        Ah, ich möchte zwecks Verbeamtung meinem BMI noch etwas entgegenwirken :D

                                        Deine Bemühungen hier meine Homepage nach meinen Absichten zum laufen zu bringen, gehen nämlich weit über das "normale" Maß an Tipps&Tricks hinaus... ohne deine ausführlichen Erklärungen und Scripte, würde meine Seite nicht so aussehen, wie sie jetzt schon aussieht... deshalb will ich mich da nach Weihnachten erkenntlich zeigen... bräuchte dazu deine Post-Adresse... gerne über das Kontaktformular meiner Seite schickbar...

                                        Anderer Vorschlag: Komm zum nächsten Selftreffen (Ort und Zeit stehen noch aus) und wir bequatschen das bei nem Bier :D Man munkelt zwar, Physiker und Chemiker seien sich nicht immer grün, das können wir aber bestimmt überwinden :D :D

                                        Grüße,

                                        RIDER

                                        --
                                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                        1. @@Camping_RIDER:

                                          nuqneH

                                          und wir bequatschen das bei nem Bier :D Man munkelt zwar, Physiker und Chemiker seien sich nicht immer grün, das können wir aber bestimmt überwinden :D :D

                                          Bier macht blau, nicht grün.

                                          Und wie man in der Schule zu sagen pflegt:

                                          Chemie ist das, was pufft und stinkt.
                                          Physik ist das, was nie gelingt.

                                          Wenn man aus der Schule raus ist, weiß man, dass Chemie auch nur Physik ist – die Physik der Außenelektronen.

                                          Qapla'

                                          --
                                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                        2. Hi,

                                          nur ganz kurz, da wenig Zeit und auf der Arbeit, alles andere beantworte ich daheim...

                                          2.: Selbes Markup?
                                          Handelt es sich bei deinem offline-Test um exakt dasselbe HTML wie online? Sind insbesondere eventuell Klassen (auf die JS zugreift) anders benannt? Ist das JavaScript ordnungsgemäß eingebunden? Auch letzteres verrät dir ein Blick in die devtools, entweder in der Standardansicht zum Script-Element scrollen und aufklappen (in den meisten Fällen wird dir dann der JS-Sourcecode angezeigt), oder in der "Netzwerkanalyse"-Ansicht (Google sagt, dass das bei FF so heißt), da müssten dir alle Resourcen angezeigt werden, die das HTML anfordert - also auch das JS-File (falls du das überhaupt extern eingebunden hast).

                                          Eigentlich schon.

                                          Ja, habe das Javascript in eine Datei gelegt und mit PHP einbinden lassen:

                                          <script type="text/javascript" src="/js/menu.js"></script>

                                          Aber da ich Offline die gleiche Struktur wie Online habe und es Online geht, kann es daran eigentlich nicht liegen...

                                          Da es aber Offline ist, muss ich dass dann wohl mal selber versuchen mit den Entwicklerwerkzeugen klarzukommen...
                                          :)

                                          Gruß
                                          JPL

                                        3. Aloha :-)

                                          Ich kümmer mich drum, sobald ich daheim bin. Die letzten Tage haben gezeigt, dass das teils effektiver ist, als ohne Entwicklertools munter drauf los zu raten :D

                                          Danke :)

                                          Hm, sicher sagen kann ich dir das nicht. Aber ich wage mal wieder nen educated guess: Das Problem liegt wahrscheinlich irgendwo im JavaScript oder in dessen Verknüpfung zum DOM. Ich komme darauf, weil ja das Zuklappen bei nochmaligem Klick genau das war, was wir mit Hilfe von JavaScript nachgerüstet hatten. Hinweise zum Debuggen:

                                          Habs gefunden - warum auch immer, es hatte sich ein falscher Pfad eingechmuggelt... :-D

                                          In HTML 5 wurde aber trotzdem die Anpassbarkeit durch Universalattribute verbessert. Du kannst dir da jetzt eigene Attribute definieren, namens data-*. Ich würde dir also folgendes vorschlagen: Ersetze im HTML alle rel durch data-rel. Dann musst du diese Ersetzung auch in JS vornehmen. Ersetze da alle ELEMENT.rel durch ELEMENT.attributes['data-rel'].nodeValue (obs noch einfacher geht zu ersetzen kann ich dir erst von daheim aus mit Konsole sagen, das hier ist halt etwas länglich, geht aber sicher - habs getestet in JSFiddle) und dein Bilder-Anzeige-Gedöns müsste wieder funktionieren :)

                                          Das ist jetzt etwas verwirrend.
                                          Also erstmal das JS der Bildanzeigers:

                                          LYTEBOX-JS

                                          Ewig lang, aber wenn ich im Text nach REL suche, gibt es keinen Treffer (nur einen im auskommentierten Bereich), also dürfte ich da wohl nichts zu machen haben.

                                          In meinem Kopfteil steht bezüglich des Anzeigers:

                                          <script type="text/javascript" src="/jochen-lipps.de/js/lytebox.js"></script>  
                                          <link rel="stylesheet" href="/jochen-lipps.de/css/lytebox.css" type="text/css" media="screen"/>
                                          

                                          Ein typicher Code eines Einzelbilds sieht so aus:

                                          <a href="bilder/dok14.jpg" rel="lyteshow[doktorpruefung]" title="Doktorprüfung"><img class="keinbilderrahmen" src="bilder/dok14kl.jpg" alt=""/></a>

                                          Wenn ich hier jetzt

                                          rel="lyteshow[doktorpruefung]"

                                          durch

                                          data-rel="lyteshow[doktorpruefung]"

                                          ersetze, geht der Bildanzeiger nicht mehr :)

                                          Aber wie gesagt: alles was mit JS zu tun hat, ist ein Buch mit 7 Siegeln für mich.

                                          Anderer Vorschlag: Komm zum nächsten Selftreffen (Ort und Zeit stehen noch aus) und wir bequatschen das bei nem Bier :D Man munkelt zwar, Physiker und Chemiker seien sich nicht immer grün, das können wir aber bestimmt überwinden :D :D

                                          Ist ein bischen weit weg...
                                          Abgesehen davon... ist es keine Vorteilsnahme, wenn du DANACH, wenn alles geht wie es soll, ein Zuckerl bekommst... ;-)

                                          Gruß
                                          JPL

                                          1. Aloha ;)

                                            In HTML 5 wurde aber trotzdem die Anpassbarkeit durch Universalattribute verbessert. Du kannst dir da jetzt eigene Attribute definieren, namens data-*. Ich würde dir also folgendes vorschlagen: Ersetze im HTML alle rel durch data-rel. Dann musst du diese Ersetzung auch in JS vornehmen. Ersetze da alle ELEMENT.rel durch ELEMENT.attributes['data-rel'].nodeValue (obs noch einfacher geht zu ersetzen kann ich dir erst von daheim aus mit Konsole sagen, das hier ist halt etwas länglich, geht aber sicher - habs getestet in JSFiddle) und dein Bilder-Anzeige-Gedöns müsste wieder funktionieren :)

                                            Das ist jetzt etwas verwirrend.
                                            Also erstmal das JS der Bildanzeigers:

                                            LYTEBOX-JS

                                            Ewig lang, aber wenn ich im Text nach REL suche, gibt es keinen Treffer (nur einen im auskommentierten Bereich), also dürfte ich da wohl nichts zu machen haben.

                                            Ich finde aber welche ;) Tatsächlich nicht in der Form, wie ich sie vermutet hätte (ELEMENT.rel), aber in anderer Form: Element.getAttribute('rel'). Das kannst du ersetzen (durch Element.getAttribute('data-rel')). Wenn du Notepad++ benutzt (oder ähnliches), sollte es tun, sofern du alle 'rel' automatisch durch 'data-rel' ersetzen lässt. (Also bitte die Anführungszeichen mitersetzen lassen, sonst versaust du dir so sachen wie "Preloader" zu "Pdata-reloader" :D) Ich hab mal für dich durchgeschaut, die Zeichenfolge 'rel' taucht nur an Stellen auf, an denen du durch 'data-rel' ersetzen musst.

                                            Wenn ich hier jetzt

                                            rel="lyteshow[doktorpruefung]"

                                            durch

                                            data-rel="lyteshow[doktorpruefung]"

                                            ersetze, geht der Bildanzeiger nicht mehr :)

                                            Hoffentlich dann aber jetzt :)

                                            Aber wie gesagt: alles was mit JS zu tun hat, ist ein Buch mit 7 Siegeln für mich.

                                            JavaScript ist eins meiner Lieblingsspielzeuge. Auch wenn mir große Miesmacher immer sagen, dass mans damit nicht übertreiben soll :D

                                            Ist ein bischen weit weg...

                                            Na, wo das stattfindet ist ja auch noch nicht raus :D Verlinkt hab ich mangels Alternative das Vergangene :D

                                            Grüße,

                                            RIDER

                                            --
                                            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                            ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                            1. Hi,

                                              Ich finde aber welche ;)

                                              sag mal bin ich blöd?
                                              (rhetorisch, keine Antwort notwendig).

                                              Ich durchsuche das JS mit dem Editor nach

                                              REL

                                              oder auch

                                              rel

                                              und der zeigt mir nix an.

                                              Nur wenn ich:

                                              'rel'

                                              suche, findet er die Einträge...
                                              :-O

                                              Tatsächlich nicht in der Form, wie ich sie vermutet hätte (ELEMENT.rel), aber in anderer Form: Element.getAttribute('rel'). Das kannst du ersetzen (durch Element.getAttribute('data-rel')). Wenn du Notepad++ benutzt (oder ähnliches), sollte es tun, sofern du alle 'rel' automatisch durch 'data-rel' ersetzen lässt. (Also bitte die Anführungszeichen mitersetzen lassen, sonst versaust du dir so sachen wie "Preloader" zu "Pdata-reloader" :D) Ich hab mal für dich durchgeschaut, die Zeichenfolge 'rel' taucht nur an Stellen auf, an denen du durch 'data-rel' ersetzen musst.

                                              Hoffentlich dann aber jetzt :)

                                              Jupp... wenn man ertmal solche "Editorprobleme" gelöst hat, dann klappts auch mit dem REL bzw. mit dem 'rel' suchen :)

                                              JavaScript ist eins meiner Lieblingsspielzeuge.

                                              Wer hätte das gedacht...
                                              :D

                                              MfG,
                                              JPL

                                      2. Aloha ;)

                                        Ein kleines Gestaltungsproblem hab ich jetzt noch:

                                        Die erste Menüebene und die erste Unterebene, haben jeweils 2 Pixel Abstand zu einander.

                                        Warum auch immer gab es nun aber einen 4 Pixel Abstand der dritten Ebene (die schwarz bzw. dunkelgrau unterlegte) zur Überschrift der zweiten Ebene.
                                        Ich habe die Ursache dafür nicht gefunden, aber wenn ich die <LI> der dritten Ebene so formatiere:
                                        [...]
                                        Und wie ich gerade sehe, überschreibe ich diesen Eintrag kurz danach (in meinem CSS) durch:
                                        [...]
                                        Na, abgesehen davon... ist mit diesen -3 Pixeln zumindest der Abstand der "dunklen" Einträge zur "bunten" Überschrift so wie sie sein soll.

                                        Ich versteh aber nicht, wo dieser große Abstand herkommt und warum ich mit diesen -3px ihn ausgleichen muss.

                                        Denn da die dritte Menüebene mit kleiner Schrift gestaltet ist und die Höhe der Zeilen entsprechend geringer ist, will ich hier nicht die 2 px Abstände zueinander haben, sondern nur 1 px.

                                        Habe inzwischen die Lösung für dein Problem gefunden ;) Ich hab mal testweise die von dir gemachten Fixes rausgenommen und dann die border-Regel der li's zu-und-weggeschaltet. Es fällt auf, dass bei abgeschaltetem border die Elemente der ersten und zweiten Ebene nahtlos zusammenfallen, die der dritten Ebene aber nicht (diese haben dann noch einen Abstand von ~ 1-2 px. Soweit so klar (irgendwas musste ja innen mehr sein). Bleibt noch die Frage, woher das kommt.

                                        Das inspizieren der li- und a-Elemente der dritten Ebene sagt mir dann folgendes:
                                        1.: Der schwarze Abstand liegt ganz innerhalb der li-Elemente (sprich: weder margin, noch padding, noch border, sondern innerhalb der eigentlichen Box).
                                        2.: Der schwarze Abstand liegt außerhalb der a-Elemente (auch hier weder margin, noch padding, noch border, aber außerhalb der Box).
                                        3.: Der schwarze Abstand ist wie eine Art Trennlinie zwischen li und ihrem ersten Kindelement (a)

                                        Okay - woher kommt der Abstand, wenn nicht durch margin, padding oder border? Gute Frage. Antwort: Es liegt daran, dass die a-Elemente die li-Elemente in der Höhe nicht komplett ausfüllen. Auch hier wohl ein Problem der Formatierung mit inline-block. Sobald ich die a-Elemente mit display:block formatiere, ist das Problem behoben. Ich glaube, auch den Grund für das Problem zu kennen (denn die Notation mit inline-block ist ja eigentlich und an sich unproblematisch). Es muss irgendwas mit font-size / line-height zu tun haben (denn wenn ich die rausnehm, funktionierts auch).

                                        Wahrscheinlich ist es so, dass deine li-Elemente ihre Höhe aus der ihnen vorgegebenen Schriftgröße berechnen. Das wäre der Wert font-size:16px. Innerhalb der li-Elemente liegen a-Elemente, die eine kleinere Schriftgröße (font-size:14px) haben. Die a-Elemente sind dadurch prinzipiell nur 14px hoch, also 2px kleiner. Daher füllen sie die li-Elemente nicht ganz aus und du bekommst den sichtbaren Zusatzabstand. Die line-height mischt da zusätzlich noch mit und macht den Abstand wieder kleiner, das Prinzip bleibt aber das gleiche. (Bei display:block bezieht das a seine Größe nicht mehr aus der Schriftgröße, daher passts da auch).

                                        Verschiedene Lösungsmöglichkeiten:

                                        1.) Die a als display:block formatieren

                                        2.) Alle Einstellungen zu font-size/line-height von den a in die darüber liegenden li packen. Durch Vererbung kriegens die a dann auch mit und das Verhältnis zwischen li-Höhe und a-Höhe passt.

                                        Grüße,

                                        RIDER

                                        --
                                        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                        1. Aloha ;)

                                          Ich hab noch ein Anliegen zum Nachschieben. Deine Wahl fiel ja auf das Akkordeonmenü, damit möglichst die navi auf den Bildschirm passt. Das ist aber leider immer noch nicht auf jedem Bildschirm gegeben (mein Tablet, mein Desktop-PC sobald ich die devtools offen hab...). Das führt dann dazu, dass man als Anwender vor deiner Navi sitzt und die Hälfte davon ums verrecken nicht sieht. Das ist ziemlich unkomfortabel, wenn man dann erst umständlich tricksen muss, um den Rest der Navi auch noch zu sehen (Zoomen, Unterpunkte zuklappen...)

                                          Du solltest für diese User ein Fallback einbauen, das normale User nicht stört. Und ich kann dir auch sagen, wie:

                                          1.) mein.css, Zeile 231: #menue. Bisher: height: 100vh -> Neu: height: 100%
                                          2.) mein.css, Zeile 184: #linkespalte. Bisher: background:#aaa; -> Neu: background:black;
                                          3.) mein.css, Zeile 184: #linkespalte. Bisher: Nix -> Neu: overflow-y: auto;

                                          Das sollte deine Seite in der Darstellung für Normalsterbliche nicht ändern und deine User mit kleinem Display bekommen die ersehnte Scrollleiste.

                                          Für Fehler, die daraus resultieren sollten, übernehme ich die volle Verantwortung inklusive Garantieleistungen :D

                                          Grüße,

                                          RIDER

                                          --
                                          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                          ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                          1. Hi,
                                            danke für den Tipp...

                                            Ich hab noch ein Anliegen zum Nachschieben. Deine Wahl fiel ja auf das Akkordeonmenü, damit möglichst die navi auf den Bildschirm passt. Das ist aber leider immer noch nicht auf jedem Bildschirm gegeben (mein Tablet, mein Desktop-PC sobald ich die devtools offen hab...). Das führt dann dazu, dass man als Anwender vor deiner Navi sitzt und die Hälfte davon ums verrecken nicht sieht. Das ist ziemlich unkomfortabel, wenn man dann erst umständlich tricksen muss, um den Rest der Navi auch noch zu sehen (Zoomen, Unterpunkte zuklappen...)

                                            Du solltest für diese User ein Fallback einbauen, das normale User nicht stört. Und ich kann dir auch sagen, wie:

                                            1.) mein.css, Zeile 231: #menue. Bisher: height: 100vh -> Neu: height: 100%
                                            2.) mein.css, Zeile 184: #linkespalte. Bisher: background:#aaa; -> Neu: background:black;
                                            3.) mein.css, Zeile 184: #linkespalte. Bisher: Nix -> Neu: overflow-y: auto;

                                            Das sollte deine Seite in der Darstellung für Normalsterbliche nicht ändern und deine User mit kleinem Display bekommen die ersehnte Scrollleiste.

                                            ...doch dann kommt ein Scrollbalken auch für einen kurzen Moment bei "meinem" Bildschirm, wenn ich ein großes Menü ausgeklappt habe... und auch noch ein zweites ausklappe... zwar fährt das erste dann ja zusammen... aber solange beide langen ausgeklappt sind, erscheinen Scrollleisten... sieht merkwürdig aus :)

                                            Wenn man diese Scrollbalken mit Verzögerung einblenden könnte... also wenn nach 2 Sekunden immer noch ein Teil des Menüs ausserhalb des sichtbaren Bildschirms liegt oder so...
                                            :)

                                            Gruß
                                            JPL

                                            1. Aloha ;)

                                              Wenn man diese Scrollbalken mit Verzögerung einblenden könnte... also wenn nach 2 Sekunden immer noch ein Teil des Menüs ausserhalb des sichtbaren Bildschirms liegt oder so...

                                              Soso, Scrollbalken in der Navi sind also unerwünscht :D Hehe, wir hatten da neulich auch so einen Thread :D Und auch da wusste ich ne Lösung. Mal schauen, wie das für dich geht. Ah, geht einfach.

                                              1.: mein.css:184, #linkespalte. Von width:260px auf width:290px
                                              2.: mein.css:184, #linkespalte. Von z-index: 2 auf z-index: 1

                                              Ergebnis:

                                              Niemand wird bei dir jemals mehr einen Scrollbalken in der navi sehen (breiter als 30px ist KEIN scrollbalken), scrollen kann man wenn nötig trotzdem mit Mausrad oder Wisch-Geste.

                                              Fertig ;)

                                              Grüße,

                                              RIDER

                                              --
                                              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                              ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                              1. Hi,

                                                Soso, Scrollbalken in der Navi sind also unerwünscht :D Hehe, wir hatten da neulich auch so einen Thread :D Und auch da wusste ich ne Lösung. Mal schauen, wie das für dich geht. Ah, geht einfach.

                                                1.: mein.css:184, #linkespalte. Von width:260px auf width:290px
                                                2.: mein.css:184, #linkespalte. Von z-index: 2 auf z-index: 1

                                                Du bist echt ein Fuchs!
                                                :)

                                                Ergebnis:

                                                Niemand wird bei dir jemals mehr einen Scrollbalken in der navi sehen (breiter als 30px ist KEIN scrollbalken), scrollen kann man wenn nötig trotzdem mit Mausrad oder Wisch-Geste.

                                                Doch, man kann ihn sehen... auf Seiten, die zuwenig Inhalt haben... geh mal auf die "Kontaktseite" und guck :)

                                                Irgendwie muss man jetzt den Hauptinhalt so gestalten, dass der minimal so hoch ist, wie die Browserhöhe... daran bin ich ursprünglich schon gescheitert... dann war an dieser Stelle immer da Hintergrundbild zu sehen... also hab ich als Trick ein DIV mit schwarzem Hintergrund über das Hintergrundbild gelegt und unter die eigentliche Seite:

                                                #untergrund {  
                                                    position: fixed;  
                                                    width: 1242px;  
                                                    height: 100%;  
                                                    margin: 0px 0px 0px 0px;  
                                                    background: #000000;  
                                                    z-index:1;  
                                                    border: 0px solid #ff0000;  
                                                    }
                                                

                                                Anders hab ich es nicht hinbekommen... aber du sagst sicher auch gleich wieder "ist doch einfach"...
                                                :D

                                                Fertig ;)

                                                Fast...
                                                ;-)

                                                Gruß
                                                JPL

                                                1. Aloha ;)

                                                  Anders hab ich es nicht hinbekommen... aber du sagst sicher auch gleich wieder "ist doch einfach"...

                                                  Ist doch einfach... :D

                                                  Ne, im Ernst :D

                                                  mein.css:48, #rechtespalte. Einfügen: background-color:black;

                                                  :D Wir nähern uns dem Optimum :D :D

                                                  Grüße,

                                                  RIDER

                                                  --
                                                  Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                                  ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                                  1. @@Camping_RIDER:

                                                    nuqneH

                                                    mein.css:48, #rechtespalte. Einfügen: background-color:black;

                                                    :D Wir nähern uns dem Optimum :D :D

                                                    Eine ID "rechtespalte" ist noch weit vom Optimum entfernt (da präsentationsbezogen).

                                                    Qapla'

                                                    --
                                                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                    1. Aloha ;)

                                                      mein.css:48, #rechtespalte. Einfügen: background-color:black;

                                                      :D Wir nähern uns dem Optimum :D :D

                                                      Eine ID "rechtespalte" ist noch weit vom Optimum entfernt (da präsentationsbezogen).

                                                      ACK. DAS ist aber auch eine Frage des Maßstabs. Ich darf mal einfach so frei sein und molily zitieren:

                                                      Code that I am proud of vs. code that solves the problem

                                                      Übrigens: Wer sagt, dass das unbedingt präsentationsbezogen ist? :D Stell dir vor du wärst Finne ohne Deutschkenntnisse. Dann ist das eine div mit ner ID aus Buchstabensalat. Also in wiefern definierst du dann präsentationsbezogen? :D

                                                      Es kann ja sein, dass es mir Spaß macht, in meinem Markup jeglicher einmaliger DIV eine bestimmte andere, generische ID zuzuweisen. Einfach so. Weil in meinem Markup meiner Meinung nach jede einmalige DIV eindeutig mit id benannt sein soll.

                                                      Der Grat zwischen prinzipientreuem und kleinkariertem Denken ist schmal.

                                                      Nichtsdestotrotz stehe ich natürlich prinzipiell auch zu dem von dir genannten, im Prinzip sollte grundsätzlich Trennung von Inhalt und Präsentation vollzogen werden. Nur im Detailgrad gibt es (zumindest für mich) strittige Grauzonen.

                                                      Aber bitte - lass uns darüber nicht vom Hundertsten ins Tausendste kommen ;) Dein Einwand wurde gehört ;)

                                                      Grüße,

                                                      RIDER

                                                      --
                                                      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                                      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                                    2. Hi,

                                                      Eine ID "rechtespalte" ist noch weit vom Optimum entfernt (da präsentationsbezogen).

                                                      naja, er ist für mich das Optimum, denn so weiß ich auch in ein paar Jahren noch, für was genau diese ID steht... wenn ich mal wieder in die CSS-Datei schaue... ohne dass ich parallel meinen HTML-Quelltext durchsuchen muss, wo denn nun das DIV mit der ID "13435" ist und was es macht...
                                                      :)

                                                      MfG
                                                      JPL

                                                      1. Om nah hoo pez nyeetz, JPL!

                                                        Eine ID "rechtespalte" ist noch weit vom Optimum entfernt (da präsentationsbezogen).

                                                        naja, er ist für mich das Optimum, denn so weiß ich auch in ein paar Jahren noch, für was genau diese ID steht... wenn ich mal wieder in die CSS-Datei schaue... ohne dass ich parallel meinen HTML-Quelltext durchsuchen muss, wo denn nun das DIV mit der ID "13435" ist und was es macht...
                                                        :)

                                                        „rechtespalte“ ist sicher näher am Optimum als „13435“. Das Optimum wäre aber eine ID-Bezeichnung, die sich nach dem Inhalt richtet.

                                                        <div id="linkespalte">  
                                                        <div id="rechtespalte">
                                                        
                                                        <div id="navigation">  
                                                        <div id="hauptinhalt">
                                                        
                                                        <nav>  
                                                        <main>
                                                        

                                                        könnten die Evolutionsschritte beispielhaft heißen.

                                                        Ich weiß, dass das schwer ist, weil man als Sehender bei der Erstellung einer Webseite unweigerlich eine visuelle Vorstellung vom Ergebnis hat, man denkt also präsentationsbezogen.

                                                        Klassen und IDs sollten möglichst inhaltsbezogen sein, also besser class="warnung" als class="red" oder falls etwa in einer Liste oder Tabelle jede zweite Zeile anders formatiert werden soll, was auch schon Design und nicht mehr nur Präsentation ist, denn es verbessert die Benutzbarkeit, verwendet man eben nicht die Klassen "tabelle-grau" und "tabelle-weiss", sondern verzichtet auf Klassen und verwendet die Pseudoklasse nth-child.

                                                        Matthias

                                                        --
                                                        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Reif und Reifrock.

                                                      2. @@JPL:

                                                        nuqneH

                                                        so weiß ich auch in ein paar Jahren noch, für was genau diese ID ["rechtespalte"] steht

                                                        In ein paar Jahren wird es kaum noch Desktop-Geräte geben. Auf Smartphones steht der Inhalt von "rechtespalte" nicht rechts, sondern über oder unter anderen Inhalten.

                                                        Und sollte das nicht so sein, frag dich, warum nicht.

                                                        Qapla'

                                                        --
                                                        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                                        1. Moin,

                                                          In ein paar Jahren wird es kaum noch Desktop-Geräte geben.

                                                          wobei "kaum noch" in dieser Aussage vermutlich relativ gemeint ist. Denn ich glaube nicht, dass deren absolute Zahl nennenswert zurückgehen wird. Warum sollte sie? Aber die Zahl der mobilen Geräte wird wohl noch zunehmen.

                                                          Wobei ich subjektiv den Eindruck habe, dass bei den Smartphones doch auch schon eine Marktsättigung erreicht sein müsste. Wenn man sich heute in der Öffentlichkeit umsieht, etwa in einer Einkaufspassage, an einer S-Bahn-Haltestelle oder sogar in manchen Restaurants, dann sieht man gefühlte zwei Drittel der Leute mit demütig geneigtem Haupt auf ein kleines Display starren.

                                                          Orthopäden berichten, dass inzwischen schon eine nicht zu vernachlässigende Zahl von Patienten wegen Beschwerden bis hin zu Haltungsschäden an der Halswirbelsäule kommen - eine Folge des ständigen Nach-unten-Schauens.

                                                          Ciao,
                                                           Martin

                                                          --
                                                          Ich wollt', ich wär ein Teppich.
                                                          Dann könnte ich morgens liegenbleiben.
                                                          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                                                        2. Aloha

                                                          @@JPL:

                                                          nuqneH

                                                          so weiß ich auch in ein paar Jahren noch, für was genau diese ID ["rechtespalte"] steht

                                                          In ein paar Jahren wird es kaum noch Desktop-Geräte geben. Auf Smartphones steht der Inhalt von "rechtespalte" nicht rechts, sondern über oder unter anderen Inhalten.

                                                          Und sollte das nicht so sein, frag dich, warum nicht.

                                                          und warum sollten Benutzer eines "Smartphones" überhaupt in den Quellcode schauen wollen?
                                                          ;-)

                                                          MfG
                                                          JPL

                                                  2. Huhu,

                                                    Ist doch einfach... :D

                                                    Ne, im Ernst :D

                                                    mein.css:48, #rechtespalte. Einfügen: background-color:black;

                                                    :D Wir nähern uns dem Optimum :D :D

                                                    in der Tat!
                                                    Hab den Code und den Aufbau "selbstständig" *ggg* weiter optimiert... die Mittelspalte, die ursprüngllich einfach nur das Menü "links" und den Hauptinhalt "rechts" trennen sollte, war "FIXED" eingefügt, damit die Grafik auch immer die gesamte Anzeigehöhe im Browser hatte. Bei "Absolute" und "height: 100% / 100vh" war die zwar anfänglich auch so hoch wie das Anzeigenfeld, aber sobald der Seiteninhalt gescrollt werden mußte, ist die mitgescrollt.
                                                    Okay, gäbe jetzt sicher auch abseits das "FIXED" einen Trick, damit der stehen bleibt - aber da mir aufgefallen ist, daß die Mittelspalte dadurch, dass sie ein einzelnes "fixes" Element ist, auf einem Tablett-PC beim "wischen" immer schön brav stehen bleibt, im Vordergrund, und je nachdem wie ich die Seite vergrößere oder verkleinere, die Menü und/oder Hauptinhaltsspalte darunter durchgeschoben wird... sah da furchbar aus... ein Strich, der immer in der Mitte steht und beim lesen stört...

                                                    ...also habe ich gedacht (!) ... und die Mittelspalte wegrationalisiert und die Grafik jetzt direkt als Hintergrundgrafik der Menüspalte eingebaut. Mit der "position: 260 left" die die Mittelspalte vorher hatte. Damit ist die Menüspalte selbst zwar "farblos", aber durch meinen "schwarzen Untergrundtrick" ist ja auch die Menüspalte schwarz... wenn du verstehst was ich mein.

                                                    Damit ist das Mittelelement weg, die Seite sieht aus wie vorher - und man kann sie auch auf einem Tablett-PC einigermassen gut betrachten...
                                                    :)

                                                    Zum wirklichen Optimum fehlt jetzt noch eine Problemlösung (die eigentlich kein Problem darstellt... aber das habe ich nie hinbekommen und es würde mich interessieren, wie man das technisch lösen kann):

                                                    Bei einer "kurzen" Seite wie z. B. meine Kontaktseite, ist die Inhaltsspalte vertikal kürzer als da Menü, das heißt der eigentliche Seitenfuß, die schwarze Zeile mit dem XHTML und CSS-Bildchen ist horizontal irgendwo in der Mitte.
                                                    Darunter würde man nun das Hintergrundbild (die Erde mit dem Sonnenaufgang) sehen.
                                                    Gerne hätte ich bei der Inhaltsspalte es so hinbekommen, dass selbst wenn der eigentliche Inhalt so kurz ist wie jetzt die "Kontaktseite" nunmal ist, das Inhaltselement die sichtbare Seitenhöhe dennoch so ausfüllt, dass diese schwarze Fußzeile (mit dem XHTML-Bildchen), am unteren Bildschirmrand ist und sich darüber bis zur schwarzen Kopfzeile (mit dem Seitennamen und dem Besucherzähler) der weiße Inhaltsbereich spannt, auch wenn der eigentliche Inhalt diesen Bereich nicht ausfüllen würde.
                                                    :-)

                                                    Der Inhalt wird durch Zeile 139:

                                                            #inhalt {  
                                                                position: relative;  
                                                                min-height: 100%;  
                                                                font-size: 16px;  
                                                                margin: 0px 0px 0px 0px;  
                                                                padding: 5px 10px 5px 10px;  
                                                                border: 0px solid #ffff00;  
                                                                background-color: #ffffff;  
                                                                }
                                                    

                                                    definiert. Gebe ich "min-height: 100vh;" ein, dann kommt ein Scrollbalken, da die Kopfzeile ja 130 Pixel hoch ist und der Inhalt erst darunter anfängt. Matheoperatoren wie "min-height: 100vh - 130px;" gibt es ja nicht...
                                                    :-)

                                                    Habe schon damit rumgespielt, den Inhalt absolut auf Höhe "0" zu positionieren, damit "100 vh" die Seitenhöhe repräsentiert und ein darin enthaltenes Element durch padding/margin erst auf Höhe "130" anfangen zu lassen (und die Titelzeile durch einen entsprechenden z-index darüber anzeigen zu lassen) - aber dann ist meine Fußzeile (mit dem XHTML-Bildchen) "verloren", da ja erst direkt unter dem Hauptinhalt kommt und diesen abschließen soll...

                                                    Da war jetzt verwirrend, oder?
                                                    :)

                                                    Anders gesagt: Hauptspalte hat drei horizontale Bereiche:

                                                    • Kopfzeile mit 130 Pixel
                                                    • Inhalt
                                                    • Fußzeile mit 30 Pixel

                                                    Ich scheitere daran den "Inhalt" zu formatieren, daß er - wenn das sichtbare Seitenfenster des Browers höher ist als der dargebotene Inhalt - sich zwischen der Kopf- und Fußzeile mit ihren festen Höhen, so aufbläht, dass die Kopfzeile oben bleibt, er durch seine angenommene Höhe die Fußzeile an den Boden schiebt, damit diese ihrem Namen alle Ehre macht. Und natürlich kein Scrollbalken kommt.
                                                    :)

                                                    Oder ganz anschaulich beschrieben: wie schaffe ich es, dass bei meiner "Kontaktseite" z. B. sich der "Inhalt mit dem weißen Untergrund" so aufbläht, dass er die Fußzeile an den Boden der Seite beschiebt?
                                                    :)

                                                    MfG
                                                    JPL

                                                    1. Aloha ;)

                                                      Ja, das leidige Problem mit den Fußzeilen. Ich kann dir nicht sagen, wie oft ich schon da davor saß und jämmerlich gescheitert bin.

                                                      Wenn also jemand eine vernünftige Lösung hat: Bitte her damit!!!

                                                      Meine Strategie war in letzter Zeit immer, den Seiteninhalt grundsätzlich künstlich zu dehnen (height:100%) und die obligatorischen Scrollbalken sowie die weit abgeschlagene Fußzeile in Kauf zu nehmen.

                                                      Die andere mögliche Strategie, die mir einfällt, ist ähnlich wie die von dir beschriebene. Du sagtest ja, dass dann deine Fußzeile flöten geht. Naja, dem kann man entgegen wirken - durch position:fixed. Ob man das dann allerdings will, ist die nächste Frage.

                                                      Imho sind wir neben der Möglichkeit, unbefriedigende Workarounds in Kauf zu nehmen, nur noch in der Lage, darauf zu warten, dass uns das W3C neue Möglichkeiten an die Hand gibt.

                                                      Das was wir bräuchten ist entweder
                                                      a) die Möglichkeit, Werte als Differenz relativer und absoluter Werte zu definieren (OMG - wie einfach dann alles wäre!)
                                                      b) eine Angabe von position, die einen Mix zwischen relative und fixed darstellt - eigentlich wie das angedachte sticky (ein Element ist solange relative wie es im Viewport ist und danach fixed), nur andersrum (ein Element ist dann fixed, wenn es von Beginn an im Viewport ist und ansonsten relative).

                                                      Ist beides überhaupt unwahrscheinlich und vor allem wirds wohl nicht in nächster Zeit passieren.

                                                      Vielleicht kann man einiges mit flexbox lösen, wenn das denn dann mal durch ist? Von flexbox habe ich wenig (keine) Ahnung, ich weiß nur, dass es noch keine fertige Recommendation ist und auch noch nicht von allen Browsern (ordnungsgemäß) umgesetzt wird.

                                                      Grüße,

                                                      RIDER

                                                      --
                                                      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                                      ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                                      1. Aloha,

                                                        Ja, das leidige Problem mit den Fußzeilen. Ich kann dir nicht sagen, wie oft ich schon da davor saß und jämmerlich gescheitert bin.

                                                        Na, wenigstens eine Sache, in der ich nicht nur deswegen scheitere, weil ich keine Fantasie zum kreativen Einsatz von CSS habe :)

                                                        Wenn also jemand eine vernünftige Lösung hat: Bitte her damit!!!

                                                        Dito :-)

                                                        Meine Strategie war in letzter Zeit immer, den Seiteninhalt grundsätzlich künstlich zu dehnen (height:100%) und die obligatorischen Scrollbalken sowie die weit abgeschlagene Fußzeile in Kauf zu nehmen.

                                                        Oder durch willkürliche Seitenfüller (Bilder, redundanter Inhalt, etc.) dafür sorgen, dass die Seite immer höher wird als eine Browserseite...

                                                        :)

                                                        MfG
                                                        JPL

                                                        PS: so, habe jetzt meine Seite auch auf HTML5 gebracht... Validierung überall okay, aber es gibt immer eine Warnung, die aber nicht erklärt oder angezeigt wird.

                                                        Ich vermute fast, daß dies die Warnung ist, daß diese Validierung für HTML5 nur "vorläufig" Gültigkeit hat?

                                                        1. Aloha ;)

                                                          Ich vermute fast, daß dies die Warnung ist, daß diese Validierung für HTML5 nur "vorläufig" Gültigkeit hat?

                                                          Ja, scheint mir auch so.

                                                          Grüße,

                                                          RIDER

                                                          --
                                                          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                                                          ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                                                          1. Hi,

                                                            was ich noch sagen wollte, übrigens: habe die letzten CSS-Anpassungen und massiven Einsatz der FF-"Element untersuchen" Entwicklerhilfe getan.
                                                            Das ist ja echt genial, wenn man damit erstmal ein bischen gespielt hat und weiß, wie man es bedienen muss... wenn man an die vielen Stunden zurückdenkt, in denen man mit "border: 1px" gearbeitet hat um zu ERAHNEN, wie breit die Element ausfallen...
                                                            :-DDDDDDD

                                                            Danke für alles!
                                                            :)

                                                            Gruß
                                                            JPL

                                                        2. @@JPL:

                                                          nuqneH

                                                          Ich vermute fast, daß dies die Warnung ist, daß diese Validierung für HTML5 nur "vorläufig" Gültigkeit hat?

                                                          Ich vermute eher, dass dies die Warnung ist, den richtigen™ Validator^W Markup-Checker zu benutzen.

                                                          Qapla'

                                                          --
                                                          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                                        2. Hi,

                                          Das inspizieren der li- und a-Elemente der dritten Ebene sagt mir dann folgendes:
                                          1.: Der schwarze Abstand liegt ganz innerhalb der li-Elemente (sprich: weder margin, noch padding, noch border, sondern innerhalb der eigentlichen Box).
                                          2.: Der schwarze Abstand liegt außerhalb der a-Elemente (auch hier weder margin, noch padding, noch border, aber außerhalb der Box).
                                          3.: Der schwarze Abstand ist wie eine Art Trennlinie zwischen li und ihrem ersten Kindelement (a)

                                          Du bist ne alte Spürnase :)

                                          Verschiedene Lösungsmöglichkeiten:

                                          1.) Die a als display:block formatieren

                                          2.) Alle Einstellungen zu font-size/line-height von den a in die darüber liegenden li packen. Durch Vererbung kriegens die a dann auch mit und das Verhältnis zwischen li-Höhe und a-Höhe passt.

                                          Ich habe mich für A entschieden, dass ist am einfachsten :)

                                          Danke!

                                          Gruß
                                          JPL

            2. Kleiner Nachtrag:

              Ich blick da grad net 100% durch in deinem Quellcode, aber wenns um die Klasse .karriere geht, die du beim Entfernen der Verschachtelung verlierst, die kann problemlos dem vorhandenen label beigefügt werden. Es ist nicht umsonst möglich, Elementen mehrere Klassen zu geben. In deinem Fall dann

              Hier ist der Link zu mein.css, dann kannst du den gesamten Quellcode ansehen (der recht umfänglich kommentiert ist... damit ich in ein paar Jahren noch weiß, was wo was machen soll).

              Den Seitenquellcode kannst ja per Rechtsklick auf der Seite selbst anzeigen lassen.

              Und was mich grad auch noch nervt: hab grad die Seite mit dem CHROME angeschaut... da gibts ja bei jedem Menüeintrag der zweiten Ebene noch eine Leerzeile vor den Bezeichnungen... und in der dritten Menüebene gibts bei jedem Eintrag noch eine Leerzeile unter einem Menüeintrag dazu...

              Sieht schlimm aus... hab Bildschirmfotos gemacht, damit ich das heute Abend mal verlinken kann...

              Gruß
              JPL
              (immer noch auf der Arbeit, deshalb immer noch nicht eingeloggt)