Klaus: Wie Darstellung optimieren?

Hallo,

wie auf Fiddle zu sehen ist,
habe ich vor eine Kachel-Optik zu bauen, die ähnlich wie auf einem iPhone anzeigt, wenn es in der jeweiligen Rubrik neue Mitteilungen gibt.

Ein paar Kleinigkeiten bekomme ich aber einfach nicht hin und hoffe hier, wie so oft, Hilfe zu bekommen.

  • Warum sind die Kacheln so hoch? Unter dem Text ist noch unnötiger Platz.
  • Ich bekomme es nicht hin, dass die Grafik und der Text innerhalb der Kachel zentriert sind.
  • wie bekomme ich die rausgestellte Anzahl immer an genau die Stelle, da diese sich momentan relativ am Inhalt orientieren, der sich vielleicht ja mal ändern könnte.

Fällt sonst noch etwas auf, was verbessert werden sollte?

  1. Hallo,

    zu dem Quelltext schreibe ich besser nichts.

    Du suchst Flexbox.

    Gruss

    MrMurphy

    1. Hallo,

      du hältst dich zwar extrem zurück mit der Begründung, warum flexbox besser ist als table, somit habe ich weiterhin keine Ahnung, aber ich habe es damit tatsächlich besser hinbekommen.

      Fiddle

      Natürlich würde es mich schon interessieren, warum du zum Quelltext besser nichts schreibst.
      Es sei denn, es ist deine Absicht, dass ich mein impliziert schlechten Code nicht verbessern soll oder alle Anstrengungen vergebens wären.

      1. Hallo,

        Es sei denn, es ist deine Absicht, dass ich mein impliziert schlechten Code nicht verbessern soll oder alle Anstrengungen vergebens wären.

        Meine Erfahrung ist das viele Webseitenersteller eine unbegründete panische Angst vor Flexbox haben. Das ist ähnlich wie im Jahr 2000 bei der Einführung von CSS2 und dem Tabellenlayout. Bis heute finden sich wöchentlich, zeitweise sogar täglich, Anfragen in Forum, die auf einem Tabellenlayout bestehen.

        Lustig finde ich insbesondere die Leute, die das Tabellenlayout berechtigterweise als veraltet beanstanden, in anderen Beiträgen Flexbox unberechtigterweise als unausgereiftes Teufelswerk verdammen. Die merken nicht mal, das sie sich schlicht der aktuellen Entwicklung verweigern.

        Da wird dann Gebetsmühlenartig und vollkommen unberechtigt der IE8 als Argument aus dem Sarg geholt. Das ist sachlich schlicht falsch. Beim IE8 ist die Ansicht natürlich schlichter. Aber das sind die IE8 User doch überhaupt nicht anders gewohnt. Und ein aktueller Grundsatz in Zeiten von Smartphones, Tablets und anderen lautet doch, das eine Webseite nicht auf jedem Gerät gleich aussehen muss.

        Um das zu kaschieren wird lieber aggressiv und laut gejammert und behauptet, das IE8 User entweder gar nichts sehen oder die Seite so gruselig angezeigt wird, das sie abgeschreckt werden und nie wiederkommen.

        Einen  sachlichen Grund, warum Flexbox wegen des IE8 (der IE9 spielt in diesem Zusammenhang seltsammerweise keine Rolle) nicht benutzt werden kann habe ich jedenfalls noch von keinem dieser Katastrophenprediger erhalten.

        Denen geht es schließlich auch darum, das Andere ihren Angaben ohne weitere Kontrolle glauben. Sonst würde deutlich werden, das sie in der HTML-Vergangenheit leben. Leider lassen sich viele Neulinge mangels Fachwissen davon gleich anstecken.

        Soweit zu meinen Gründen, warum ich bei Fragen mit Flexbox als (besten) Lösungsweg erst mal nur auf Flexbox hinweise.

        Wenn ernsthaftes Interesse an einer Lösung besteht helfe ich gerne sehr konkret und erstelle auch fertige Beispiele.

        Zur Lösung deines Problems fehlen mir allerdings noch ein paar Infos.

        Es sei denn, es ist deine Absicht, dass ich mein impliziert schlechten Code nicht verbessern soll oder alle Anstrengungen vergebens wären.

        Erst mal muss ich wissen, in wie weit du deinen Quelltext überhaupt ändern  kannst und dazu bereit bist?

        Bist du bereit und offen für aktuelles HTML5 und CSS3, damit Flexbox seine Lösungen auch ausspielen kann?

        Kannst du den Quelltext komplett frei anpassen oder bist du gebunden, zum Beispiel durch CMS-Systeme, Datenbanken oder ähnliches? Dein Quelltext sollte zum Beispiel fast komplett neu erstellt werden.

        wenn es in der jeweiligen Rubrik neue Mitteilungen gibt.

        Du schreibst von Mitteilugen, im Beispiel verwendest du aber Grafiken. Werden die Mitteilungen als Grafiken eingefügt? Oder handelt es sich schlicht um eine Navigation?

        Wenn es sich um eine Navigation handelt - soll sie responsive sein?

        Mein Hauptproblem ist natürlich, das ich den Rest der Seite nicht kenne und so zum Beispiel nicht weiß, wie sie sich bei unterschiedlichen Fenstergrößern verhält.

        Gruss

        MrMurphy

        1. Hi,

          Einen  sachlichen Grund, warum Flexbox wegen des IE8 (der IE9 spielt in diesem Zusammenhang seltsammerweise keine Rolle) nicht benutzt werden kann habe ich jedenfalls noch von keinem dieser Katastrophenprediger erhalten.

          vermutlich weil die befürchten, das Layout würde dann komplett auseinanderfallen - was nur dann passieren kann, wenn man sich keine Gedanken über Fallback-Lösungen macht. Zugegeben, ich habe mich mit Flexbox bisher noch gar nicht befasst, aber bisher war es bei praktisch jedem CSS-Merkmal so, dass man einem Browser, der es nicht verstand, ohne große Mühe eine Alternative anbieten konnte. Im Extremfall bestand diese Alternative darin, ein "suboptimales" Aussehen einfach hinzunehmen, solange alle Inhalte lesbar bleiben.

          Dass der IE9 als Argument nie herangezogen wird, hat einen einfachen Grund: Systeme, auf denen IE9 läuft (Windows 7), können problemlos auch auf IE10 aktualisiert werden. IE8 auf noch existierenden XPs ist aber für den Nutzer das Ende der Fahnenstange, wenn er nicht auf einen anderen Browser umsteigen möchte (z.B. Opera, Firefox, Chrome).

          Ciao,
           Martin

          --
          Wer im Glashaus sitzt, sollte Spaß am Fensterputzen haben.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        2. Hallo,

          ich kann Deine Fragen recht schnell und einfach beantworten:

          Ich habe vollen Zugriff auf den Quellcode und kann alles ändern, denn alle Seiten und der gesamte Quellcode ist quasi von mir (abgesehen von im Internet gefundenen und übernommenen Lösungswege für das eine oder andere Problem und ein ein kleines Modul zum Anzeigen von grafischen Diagrammen)

          Ich nutze auch kein CMS-System, aber natürlich eine Datenbank (MySQL) und diverse andere Datenbanken mit dem die Seiten kommunizieren (Oracle, MSSQL, Sybase und Lotus Notes).

          Ich erfreue mich an dem Umstand, dass ich keine ewigen Browserweichen entwickeln muss, da die Seiten nur für den internen Gebrauch sind und hier der Firefox in aktueller Version als Standard vorgegeben ist. Einzige Ausnahme bilden die zunehmenden Smartphones (alles iPhones) und ein paar Macs, die zwangsweise oder ausnahmsweise Safari verwenden. Auf responsive muss ich aber dennoch nicht achten.

          Ich bin offen für HTML5 und CSS3, verwende die oder andere Eigenschaft bereits, aber die Seite(n) sind über einen Zeitraum von bald 15 Jahren gewachsen und Änderungen am Design oder Funktion sind (leider) eher ein Zeitvertreib für als Lückenfüller zwischen den eigentlichen Projekten.

          Die aktuelle Frage bzw. Problemstellung bezieht sich auf eine Navigation für meine gedachte neue Startseite. Als Vorlage hatte ich die "Kacheloptik" der iPhones im Sinn, also eine Grafik in einem Rahmen mit kurzem Text.

          Ich verstehe nicht wirklich den Unterschied zwischen der Darstellung table und flexbox, aber da es mit flexbox auf anhieb funktioniert hat, wird es sicherlich nicht das letzte Mal gewesen sein, dass ich flexbox verwende.

          Letztlich habe ich es meinen Wünschen entsprechend mit Flexbox hinbekommen und alle vorher aufgetretenen Probleme lösen können.

          Klaus