Martin_Online: Bereiche anordnen

Hallo,

was ich nicht ganz verstehe ist folgendes. Wenn ich zwei Bereiche auf einer Seite habe, habe ich diese bis jetzt mit z.B. float:left; angeordnet. Immer häufiger sehe ich aber, dass beiden Bereichen ein display: inline-block; gegeben wird und diese somit auch nebeneinander angeordnet werden. Daher meine Frage, was ist besser, float oder inline-block?

  1. Hi,

    Daher meine Frage, was ist besser, float oder inline-block?

    Das lässt sich nicht pauschal sagen – es kommt jeweils darauf an, was konkret du erreichen willst.
    Beide Methoden haben ihre Vor- und Nachteile, deshalb muss man das für jeden Einzelfall abwägen.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
  2. @@Martin_Online:

    nuqneH

    Daher meine Frage, was ist besser, float oder inline-block?

    Flexbox.

    Einführung, Complete guide

    Qapla'

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

      Flexbox.

      Aber nur dann, wenn ältere Browser und Android vor 4.4 nicht relevant sind.

      --
      42
    2. Hallo,

      Flexbox.

      Einführung, Complete guide

      sieht aber leider für den IE8 sehr schlecht aus http://caniuse.com/#search=flexbox und den IE8 sollte man noch beachten oder? Wird eine komplett neue Webseite.

      1. Hallo

        Einführung, Complete guide

        sieht aber leider für den IE8 sehr schlecht aus http://caniuse.com/#search=flexbox und den IE8 sollte man noch beachten oder? Wird eine komplett neue Webseite.

        Auch wenn der IE8 am Aussterben ist [1], eignen sich für diesen Zweck immer noch Conditional Comments. Beim IE8 musst du nicht auf Mobilversionen Rücksicht nehmen, deshalb ist im Normalfall auch der zusätzliche Request egal. Den IE9, der flexbox ebenfalls nicht beherrscht, kannst du hingegen ignorieren. Systeme, auf denen der läuft, vertragen und haben neuere IE-Versionen.

        Relevanter sind da mMn eher Tablets oder Smartphones mit größeren Displays mit Android < 4.4.

        [1] Die Verbreitung liegt laut der bei caniuse.com benutzten Statistik bei 4.46%. Wie weit der Statistik zu trauen ist, lasse ich mal dahingestellt sein. Android 2.3 mit einer Verbreitung von nur 1.04% erscheint mir bei der Updatepolitik der Gerätehersteller als ein viel zu geringer Wert.

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        Veranstaltungsdatenbank Vdb 0.3
      2. Hallo,

        sieht aber leider für den IE8 sehr schlecht aus http://caniuse.com/#search=flexbox

        Der Tabelle lässt sich entnehmen, dass von allen IEs nur IE 11 die letzte Version der Flexbox-Spec unterstützt – und du fragst nach IE 8? Der ist wahrscheinlich das kleinste Problem.

        und den IE8 sollte man noch beachten oder?

        Antwort auf sämtliche Fragen dieser Art: Kommt darauf an. Auf die Zielgruppe/den Zielmarkt, das Konzept der Website, die verwendete Technik, auf die Art und Weise der »Beachtung«…

        http://forum.de.selfhtml.org/archiv/2014/2/t216499/#m1484687

        Für Flexbox ist ein Fallback angebracht, wenn man nicht will, dass alle Inhalte in Browser, die Flexbox nicht unterstützen, einfach linearisiert werden.

        Mathias

      3. @@Martin_Online:

        nuqneH

        den IE8 sollte man noch beachten oder?

        Ja, natürlich. Genauso wie Lynx: Die Website sollte lesbar und bedienbar sein. Aber muss sie genauso aussehen?

        Progressive enhancement: Die Anordnung nebeneinander ist ein zusätzliches Feature für moderne Browser.

        Angesichts der geringen Verbreitung des IE8 lohnt es wohl auch nicht, Gedanken an einen Polyfill zu verschwenden.

        Qapla'

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

          nuqneH

          den IE8 sollte man noch beachten oder?

          Ja, natürlich. Genauso wie Lynx: Die Website sollte lesbar und bedienbar sein. Aber muss sie genauso aussehen?

          Das magst du vielleicht so sehen,  akzeptiere ich auch. Aber wie erkläre ich das einem User der auf die Seite kommt und alles untereinander dargestellt bekommt? Sieht in meinen Augen recht bescheiden aus. Selbst IE9 macht nicht mit.

          Hast du bereits eine komplette Seite mit Flexbox aufgebaut und diese online gestellt? bzw. kennst du Seiten die bereits heute darauf aufbauen?

          1. Mahlzeit,

            Aber wie erkläre ich das einem User der auf die Seite kommt und alles untereinander dargestellt bekommt?

            Wieso, glaubst du, merkt der User überhaupt, das seine Darstellung eine andere ist als bei anderen?
            Und wieso glaubst du, ändert das die Information der Seite?

            Ist bei deinem Projekt der Inhalt so unwichtig, dass dein Design davon ablenken muss? Wenn nicht, ist es völlig egal, wie der User die Seite sieht, solange die Userbility gegeben ist.

            --
            42
            1. Ist bei deinem Projekt der Inhalt so unwichtig, dass dein Design davon ablenken muss? Wenn nicht, ist es völlig egal, wie der User die Seite sieht, solange die Userbility gegeben ist.

              Wir haben hier im Ort drei kleine Pensionen. Die wollen sich zusammenschließen und ihre Betten auf einer kleinen Seite präsentieren.

              Hab mich überreden lassen dieses umzusetzen (Nachbarschaftshilfe) . Ich denke einem User fällt es schon auf wenn alles untereinander ist anstatt schön geordnet z.B. Text neben einem Bild oder?

              1. Mahlzeit,

                Hab mich überreden lassen dieses umzusetzen (Nachbarschaftshilfe) . Ich denke einem User fällt es schon auf wenn alles untereinander ist anstatt schön geordnet z.B. Text neben einem Bild oder?

                Also hast du ein Problem mit Text unter dem Bild? Sorry, wenn du solche Probleme als Problem siehst, wirst du verdammt viel Arbeit mit der Seite haben.
                Wenn der Text unter dem Bild ist, kommt jeder damit zurecht, weil es auch absolut üblich ist.

                Ich will dir nicht sagen, wie du es machen sollst, ich rate dir nur, mach dir nicht mehr Arbeit als nötig, nur weil du glaubst, die Optik muss überall gleich sein. Wäge zwischen Aufwand und Nutzen ab.

                Und wenn es dir nur um den Textfluss um Bilder geht, der IE8 kann das noch per HTML oder, wie schon erwähnt, per CC. Ich halte das aber für überflüssige Arbeit, grad wenn du nix dafür bekommst

                <randbemerkung>
                Wobei sich für mich "Nachbarschaftshilfe" immer nach "Ich krieg was aber das FA gehts nix an" anhört ;). Zumindest ist das meine Erfahrung, wenn mir "Nachbarschaftshilfe" angeboten wird :D
                </randbemerkung>

                --
                42
                1. Ich will dir nicht sagen, wie du es machen sollst, ich rate dir nur, mach dir nicht mehr Arbeit als nötig, nur weil du glaubst, die Optik muss überall gleich sein. Wäge zwischen Aufwand und Nutzen ab.

                  Es geht in etwa um so eine Darstellung.

                  http://s14.directupload.net/images/140723/erb5z897.png

                  Auf der Linken Seite ein Zimmer zu sehen, daneben etwas Text, und ganz Rechts eben eine Spalte von oben nach unten.

                  Also typische Seite:

                  Header (über die ganze Seite)
                  Main (ca. 70%) links
                  Section (ca. 28%) rechts
                  Footer (über die ganze Seite)

                  <randbemerkung>
                  Wobei sich für mich "Nachbarschaftshilfe" immer nach "Ich krieg was aber das FA gehts nix an" anhört ;). Zumindest ist das meine Erfahrung, wenn mir "Nachbarschaftshilfe" angeboten wird :D
                  </randbemerkung>

                  Doch ich bekomme etwas und zwar ich darf kostenlos im Garten Zwetschgen pflücken und diese essen ;) ich denke damit kann das Finanzamt gut leben.

                  1. Mahlzeit,

                    Auf der Linken Seite ein Zimmer zu sehen, daneben etwas Text, und ganz Rechts eben eine Spalte von oben nach unten.

                    Dann mach per CC ein Float für den IE8 ;) Würde ich so machen

                    Doch ich bekomme etwas und zwar ich darf kostenlos im Garten Zwetschgen pflücken und diese essen ;) ich denke damit kann das Finanzamt gut leben.

                    Denen traue ich alle schlechtigkeiten zu ;)

                    --
                    42
                  2. Hallo

                    Es geht in etwa um so eine Darstellung.

                    http://s14.directupload.net/images/140723/erb5z897.png

                    Auf der Linken Seite ein Zimmer zu sehen, daneben etwas Text, und ganz Rechts eben eine Spalte von oben nach unten.

                    Haben wir (wir alle hier, nicht wir beide) das nicht schon irgendwann in den letzten Monaten diskutiert? Wie hier schon mehrfach angemerkt:

                    1. Die Technik des WWW ist nicht darauf ausgelegt, eine überall identische Darstellung zu erreichen.

                    2. Der IE8-Nutzer wird nicht bemerken, dass die Seite in anderen Browsern anders aussieht, als in seinem.

                    3. Für den IE8 kannst du mit CC andere Anweisungen geben, die eine optisch änliche Lösung darstellen.

                    4. Vergiss IE9!

                    5. Irgendwas, was mir momentan nicht einfällt, aber wer anders hier bestimmt noch hingeschrieben hätte. :-)

                    <randbemerkung>
                    Wobei sich für mich "Nachbarschaftshilfe" immer nach "Ich krieg was aber das FA gehts nix an" anhört ;).
                    </randbemerkung>

                    Doch ich bekomme etwas und zwar ich darf kostenlos im Garten Zwetschgen pflücken und diese essen ;) ich denke damit kann das Finanzamt gut leben.

                    Öhhm: geldwerter Vorteil?

                    Tschö, Auge

                    --
                    Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                    Terry Pratchett, "Wachen! Wachen!"
                    ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                    Veranstaltungsdatenbank Vdb 0.3
          2. @@Martin_Online:

            nuqneH

            Aber wie erkläre ich das einem User der auf die Seite kommt und alles untereinander dargestellt bekommt?

            Gar nicht. Der Nutzer weiß im Normalfall nicht, dass die Seite in anderen Browsern (auf demselben Gerät) anders aussieht.

            Sieht in meinen Augen recht bescheiden aus.

            Wie wenige Nutzer betrifft das? Lohnt sich Aufwand/Nutzen?

            Selbst IE9 macht nicht mit.

            Dass der 9er womöglich noch weniger relevant ist als der 8er, sagte Auge schon.

            Qapla'

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