Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS - Text mehrspaltig - Spaltenumbruch selbst bestimmen - Responsive

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS - Text mehrspaltig - Spaltenumbruch selbst bestimmen - Responsive

    Moin,

    ich möchte einen Text mehrspaltig darstellen (in diesem Fall zweispaltig). Das ist ja in Zeiten von CSS3 mit "column" kein Problem. Allerdings möchte ich die Spaltenumbrüche selbst bestimmen. So dass die Spalten unterscheidlich groß werden (column zieht sie ja automatisch auf die selbe länge).
    Deshalb habe ich es alternativ so versucht, indem ich die linke Spalte einfach "float:left;" und die rechte "float:right;" und beide mit "width: 48%;" definiert habe. Soweit so gut.
    Nun ist aber das Problem, dass das ganze nicht mehr responsive ist. Heißt: Ziehe ich mein Browser-Fenster kleiner (und simuliere also quasi ein Handy), bleibt der Text natürlich zweispaltig, was sehr unschön ist.

    Am besten wäre es natürlich, wenn das ganze ab einer bestimmten Größe auf EINSPALTIG umswitcht... Aber ich finde hierfür keine Lösung.

    Hat mir jemand eine Idee? Ich stehe momentan etwas auf dem Schlauch.

    Vielen Dank schonmal!!

    Liebe Grüße,
    Ich

  • #2
    Hallo

    Das ist ja in Zeiten von CSS3 mit "column" kein Problem.
    Wie kommst du denn auf den Trichter? Zumal du selbst später schreibst

    Nun ist aber das Problem
    Bei Multicolumn ist die sehr unterschiedliche Browserunterstützung noch ein sehr großes Problem.

    Die Problematik und wie einige Probleme browserübergreifend umgangen werden können wird auf der folgenden Seite gut beschrieben:

    http://webkrauts.de/artikel/2011/css...-column-layout

    Der Text ist etwas schwierig zu erfassen, weil manchmal zunächst einige CSS-Eigenschaften beschrieben werden und erst danach Hinweise wie "Funktioniert aber nur im Opera" folgen. Bevor du zum Editor greifst solltest du also erst mal den gesamten Text lesen.

    Insgesamt beschreibt der Beitrag aber gut, wie Multicolumn aktuell browserübergreifend genutzt werden kann.

    In jedem Fall solltest du deine Seiten aber in allen relevanten Browsern (FF, Chrome, IE, Opera, Safari) testen, sonst sind Fehldarstellungen mehr oder weniger vorprogrammiert.

    Gruss

    MrMurphy

    Kommentar


    • #3
      Am besten wäre es natürlich, wenn das ganze ab einer bestimmten Größe auf EINSPALTIG umswitcht... Aber ich finde hierfür keine Lösung.
      hört sich nach media queries an.
      http://www.heise.de/ix/artikel/Allen-recht-1058764.html

      Kommentar


      • #4
        Danke schon mal für die Hilfe

        Sehr interessanter Artikel - vielen Dank. Nun kann ich das nachvollziehen.

        Auf veraltete Browser kann ich aber keine Rücksicht nehmen und alle aktuellen kommen mit Multicolumn zurecht (zumindest mit den Standard-Angaben).

        Ich habe es jetzt so gelöst, dass ich den kompletten Text eben per multicolumn ausgebe:
        HTML-Code:
        .xcolumn{
            -webkit-column-width: 300px; /* chrome, safari, opera */
            -moz-column-width: 300px; /* firefox */
            column-width: 300px;
        }
        und den Absatz den ich NICHT getrennt haben möchte, mit einem DIV umgebe und ihm die Eigenschaft
        HTML-Code:
        .xcolumn_nobreak{
            page-break-inside: avoid;
        }
        zuweise. Dadurch wird dieser Absatz nicht getrennt - und ich komme zu meinem Ergebnis

        Kommentar


        • #5
          Hallo,

          mal abgesehen davon, das

          Code:
          page-break-inside: avoid;
          nur für die Druckausgabe gedacht ist und somit auf dem Bildschirm eigentlich nicht funktionieren kann, funktioniert bei mir auch nicht

          Code:
          break-inside: avoid;
          Noch nicht mal im Opera.

          Auf veraltete Browser kann ich aber keine Rücksicht nehmen
          An der Problematik hat sich bei den aktuellen Browsern bis heute nichts geändert.

          Sei mir deshalb nicht böse wenn ich deinen Beitrag skeptisch sehe.

          Gruss

          MrMurphy

          Kommentar


          • #6
            Zitat von MrMurphy Beitrag anzeigen

            Sei mir deshalb nicht böse wenn ich deinen Beitrag skeptisch sehe.

            Nein, alles gut... Du hast ja Recht... Ich gehe das vielleicht doch ein bisschen zu ungeduldig an. Ich habe eben gesehen dass es bei mir sowieso nur im Firefox geht...
            Aber ich habe sonst einfach keine Idee mehr, wie man das anständig lösen kann
            Fällt dir noch was ein?

            Danke und liebe Grüße

            Kommentar


            • #7
              Zitat von moma Beitrag anzeigen
              Jau - das sieht doch gut aus! VIELEN DANK!

              Meine neue Lösung:

              Ich definiere zwei DIVs (links und rechts) und überprüfe per @media, ob die Anzeige groß genug ist (PC-Monitor). Falls ja, werden die zwei DIVs nebeneinander gefloatet - falls nein (Handy, etc.), passiert nichts und sie werden einfach untereinander dargestellt:


              HTML-Code:
              @media (min-width: 950px) {
                  .leftcolumn, .rightcolumn {width: 48%; }
                  .leftcolumn {float: left;  }
                  .rightcolumn {float: right; }
                  .topcolumn {clear: both; }
              }
              Dies funktioniert nun in allen getesteten Browsern (FF, IE, Chrome).

              Hat noch jemand was einzuwenden? :P

              Vielen Dank.

              Kommentar


              • #8
                Hallo

                Hat noch jemand was einzuwenden?
                Warum? Es ist deine Seite und wenn du zufrieden bist ist alles gut.

                Gruss

                MrMurphy

                Kommentar


                • #9
                  Hat noch jemand was einzuwenden? :P
                  Ich hab damit viel Freude, ein Blick lohnt.
                  http://foundation.zurb.com/index.html

                  Kommentar

                  Lädt...
                  X