Josh: merkwürdiger Abstand nach float

Hallo,

ich bin gerade dabei, auf meiner Homepage eine Unternavigation mit einem Hover-Effekt zu gestalten. Die Navi besteht aus kleinen Grafiken, die beim drüberfahren mit der Maus einfach durch etwas größere ersetzt werden. Mit CSS alles kein Problem.
Die Schwierigkeit kommt beim Positionieren der drei Menupunkte nebeneinander. Das habe ich mit 'float' gemacht. Die Grafiken sind da, wo sie hin sollen, nur der Abstand nach unten zum eigentlichen Inhalt der Seite ist viel zu groß und ich kann mir absolut nicht erklären, warum.
Wie auf der Seite schon (auf Englisch) erklärt, taucht das Problem komischerweise nur bei Firefox & Opera auf. Der IE zeigt alles so an, wie es gedacht ist.

Wäre nett, wenn Ihr euch das mal anschaut, weil ich mit meinem Latein echt am Ende bin.

Die Seite: http://joshathome.de/test/index.html
Die CSS-Datei: http://joshathome.de/test/test.css

Die Zeilen 215-255 in der CSS-Datei betreffen die Subnavi.
Wo wir gerade dabei sind: Weiß jemand, ob es bei der Quelltextansicht im Firefox möglich ist, dass die Zeilenzahlen angezeigt werden? Hab keine entsprechende Einstellung im Menu gefunden.

Gruß
Josh

  1. Hallo Josh,

    Die Zeilen 215-255 in der CSS-Datei betreffen die Subnavi.

    Mal als Anregung, so schaut es schonmal anders aus:

    #subnavi{ float:left;width:100%; }

    Alternativ kannst du vielleicht an der richtigen Stelle ein clear
    unterbringen?

    Grüsse

    Cyx23

    1. Hallo,

      Mal als Anregung, so schaut es schonmal anders aus:

      #subnavi{ float:left;width:100%; }

      Wenn ich das mache, dann stehen die Logos übereinander und zentriert auf der Seite.

      Alternativ kannst du vielleicht an der richtigen Stelle ein clear
      unterbringen?

      Das habe ich bei der Trennlinie gemacht (clear:left;), steht in der CSS-Datei. Habs auch schon (zur Sicherheit) mal mit clear:both; versucht und auch schon direkt im <hr>-Tag, anstatt in der CSS-Datei. Hat alles leider nichts gebracht.

      Trotzdem Danke
      Josh

      1. Hallo Josh,

        Mal als Anregung, so schaut es schonmal anders aus:

        #subnavi{ float:left;width:100%; }
        Wenn ich das mache, dann stehen die Logos übereinander und zentriert auf der Seite.

        Bei mir funktioniert das (ein zusätzliches #subnavi{ float:left;width:100%; })
        mit dem Firefox 1.5 offenbar einwandfrei.

        Das Problem könnte allerdings vielleicht so interpretiert werden dass
        im vorherigen Zustand die Logos untereinanderstehen und deswegen der
        Abstand entsteht, wenn du #subnavi{border:1px soilid red} verwendest
        ist die Ausdehnung auch nochmal gut zu sehen.

        Grüsse

        Cyx23

        1. Hallo,

          #subnavi{ float:left;width:100%; }
          Wenn ich das mache, dann stehen die Logos übereinander und zentriert auf der Seite.

          Bei mir funktioniert das (ein zusätzliches #subnavi{ float:left;width:100%; })
          mit dem Firefox 1.5 offenbar einwandfrei.

          Ole! Jetzt klappt es bei mir auch, hab das width:100%; vorhin nur bei den links reingemacht. Perfekt, danke! Wie kommt man auf so was? Ich bin da jetzt wochenlang nicht drauf gekommen.

          Ohne dass ich mein Glück (und deine Geduld) überstrapazieren möchte:
          auf http://joshathome.de/friends/index.html ist nochmal so ein komischer Abstand (auch wieder nicht im IE). Im Inhaltsbereich tauchen die Logos aus der Subnavi nochmal auf und ich habe zu jedem eine Erklärung geschrieben. Die Abstände zwischen den Logos sind hier auch nicht so, wie gewollt. Hast du da eine Idee?

          Gruß
          Josh

          1. Hi,

            Ole! Jetzt klappt es bei mir auch, hab das width:100%; vorhin nur bei den links reingemacht. Perfekt, danke! Wie kommt man auf so was? Ich bin da jetzt wochenlang nicht drauf gekommen.

            Das ist eine recht simple Notlösung, auf die man kommt, wenn man das Problem erkannt hat (oder auch nicht;-)
            Der Abstand kommt vermutlich (in den Quelltext habe ich nicht so genau geschaut) durch das nachfolgende clear, das den Inhalt unter die vermutlich links floatende Home-Grafik setzt.
            Schau doch mal, ob der zweite  Fall hier zutrifft.
            Eine andere Alternative wäre, "Home" oder die Subnavi-Buttons absolute zu positionieren (letzteres natürlich mit relativer Positionierung des Elternelements.

            Ohne dass ich mein Glück (und deine Geduld) überstrapazieren möchte:
            auf http://joshathome.de/friends/index.html ist nochmal so ein komischer Abstand

            Vermutlich die gleiche Ursache, der Du auf besagte Art leicht beikommen kannst.

            freundliche Grüße
            Ingo

            1. Hallo,

              Ole! Jetzt klappt es bei mir auch, hab das width:100%; vorhin nur bei den links reingemacht. Perfekt, danke! Wie kommt man auf so was? Ich bin da jetzt wochenlang nicht drauf gekommen.
              Das ist eine recht simple Notlösung, auf die man kommt, wenn man das Problem erkannt hat (oder auch nicht;-)

              Bei mir trifft eher das 'oder auch nicht' zu :-) Aber jetzt sieht es auf jeden Fall so aus, wie ich mir das vorgestellt habe.

              Schau doch mal, ob der zweite  Fall hier zutrifft.

              Danke für den Link, muss ich mir heute Abend mal genauer anschauen.

              Eine andere Alternative wäre, "Home" oder die Subnavi-Buttons absolute zu positionieren (letzteres natürlich mit relativer Positionierung des Elternelements.

              Davon hatte ich mich eigentlich verabschiedet, als ich meine Seite vor ein paar Monaten überarbeitet habe.

              Danke für die Tipps
              Josh

              1. Hi,

                Eine andere Alternative wäre, "Home" oder die Subnavi-Buttons absolute zu positionieren (letzteres natürlich mit relativer Positionierung des Elternelements.
                Davon hatte ich mich eigentlich verabschiedet, als ich meine Seite vor ein paar Monaten überarbeitet habe.

                position:absolute ist nicht grundsätzlich "böse". Mit Bedacht eingsetzt, spricht nichts dagegen. Dein Home-Button z.B. ist eine Grafik mit festen Pixelmaßen, die links positioniert und nicht umflossen werden soll. Das geht durchaus auch mit absoluter Positionierung ohne unerwünschte Nebenwirkungen. Und: absolute Positionierung kann durchaus auch relativ sein...

                freundliche Grüße
                Ingo

                1. Hallo,

                  position:absolute ist nicht grundsätzlich "böse". Mit Bedacht eingsetzt, spricht nichts dagegen. Dein Home-Button z.B. ist eine Grafik mit festen Pixelmaßen, die links positioniert und nicht umflossen werden soll. Das geht durchaus auch mit absoluter Positionierung ohne unerwünschte Nebenwirkungen. Und: absolute Positionierung kann durchaus auch relativ sein...

                  Bei den drei Logos der Unternavigation wäre ich tatsächlich auch mit position:absolute ans Ziel gekommen, da gebe ich dir vollkommen recht, aber auf http://joshathome.de/friends/index.html tauchen die drei Logos nochmal (in groß) im Inhaltsbereich auf und bei jedem Logo steht noch eine kleine Beschreibung. Da kann ich wegen dem Text auf die Positionierung mit float nicht verzichten. Leider hab ich bis jetzt noch nicht rausgefunden, warum da zwischen den drei Teilen so ungleichmäßige Abstände sind.

                  Gruß
                  Josh

                  1. Hallo Josh

                    ... aber auf http://joshathome.de/friends/index.html tauchen die drei Logos nochmal (in groß) im Inhaltsbereich auf und bei jedem Logo steht noch eine kleine Beschreibung. Da kann ich wegen dem Text auf die Positionierung mit float nicht verzichten. Leider hab ich bis jetzt noch nicht rausgefunden, warum da zwischen den drei Teilen so ungleichmäßige Abstände sind.

                    Weil du mit dem clear:left; auch das float von #links aufhebst.

                    Auf Wiederlesen
                    Detlef

                    --
                    - Wissen ist gut
                    - Können ist besser
                    - aber das Beste und Interessanteste ist der Weg dahin!
                    1. Hallo,

                      Weil du mit dem clear:left; auch das float von #links aufhebst.

                      stimmt...
                      Dann muss ich mal überlegen, wie ich das anders gestalte.

                      Danke für eure hilfreichen Antworten.
                      Gruß
                      Josh

                      1. Hallo Josh

                        Dann muss ich mal überlegen, wie ich das anders gestalte.

                        Tipps:

                        Entweder

                        • #links absolut positionieren oder
                        • den Elementen, die die gefloateten Bilder mit Text enthalten, statt
                            clear:left ein passendes min-height für Browser und height für IE geben oder
                        • diesen auch ein float geben.

                        Auf Wiederlesen
                        Detlef

                        --
                        - Wissen ist gut
                        - Können ist besser
                        - aber das Beste und Interessanteste ist der Weg dahin!
                        1. Hallo Detlef,

                          Tipps:

                          Entweder

                          • #links absolut positionieren oder
                          • den Elementen, die die gefloateten Bilder mit Text enthalten, statt
                              clear:left ein passendes min-height für Browser und height für IE geben oder
                          • diesen auch ein float geben.

                          Deinen zweiten Tipp hab ich nicht ganz verstanden, wie soll das mit dem min-height funktionieren? Den Befehl kenne ich natürlich, ich weiß nur nicht, wie der hier reinpassen soll.
                          Aber ich hab jetzt eine ganz unkomplizierte Lösung gefunden, die mir optisch noch besser gefällt, als vorher: Ich hab das erste Logo einfach rechts vom Text plaziert (also float:right) dann muss ich beim zweiten clear:right schreiben und ich habe keinen Konflikt mehr mit #links.

                          Gruß
                          Josh

                          1. Hallo Josh

                            Deinen zweiten Tipp hab ich nicht ganz verstanden, wie soll das mit dem min-height funktionieren? Den Befehl kenne ich natürlich, ich weiß nur nicht, wie der hier reinpassen soll.

                            Wenn du bei einem Element, welches ein img bekannter Höhe enthält, welches
                            gefloatet ist, dafür sorgst, dass dieses mindestens genauso hoch ist, wie
                            das Bild (zuzüglich gewünschter Abstände), dann brauchst du das Float nicht
                            zu claeren.
                            Wenn der Text höher wird, als das Bild, wird das Element durch den (nicht
                            gefloateten Text) ausgedehnt. Wenn das Bild höher ist als der Text, wird
                            das Element durch min-height (bzw. height für IE) auf die notendige Höhe
                            gebracht.

                            Aber ich hab jetzt eine ganz unkomplizierte Lösung gefunden, die mir optisch noch besser gefällt, als vorher: Ich hab das erste Logo einfach rechts vom Text plaziert (also float:right) dann muss ich beim zweiten clear:right schreiben und ich habe keinen Konflikt mehr mit #links.

                            Das ist natürlich die einfachste Variante.

                            Auf Wiederlesen
                            Detlef

                            --
                            - Wissen ist gut
                            - Können ist besser
                            - aber das Beste und Interessanteste ist der Weg dahin!
                            1. Hallo,

                              Wenn du bei einem Element, welches ein img bekannter Höhe enthält, welches
                              gefloatet ist, dafür sorgst, dass dieses mindestens genauso hoch ist, wie
                              das Bild (zuzüglich gewünschter Abstände), dann brauchst du das Float nicht
                              zu claeren.

                              Gut zu wissen, danke.

                              Gruß
                              Josh