Ankündigung

Einklappen
Keine Ankündigung bisher.

Automatischen Abstand abschalten

Einklappen

Neue Werbung 2019

Einklappen
Dieses Thema ist geschlossen.
X
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Automatischen Abstand abschalten

    Hallo,

    ich habe wieder mal eine Frage.
    ich habe bei meiner Seite den article-tag mit einem "float: left" definiert damit 2 artikel nebeneinander angezeigt werden.

    was mich allerdings stört ist dass die artikel in den unteren reihen sich an den größten der oberen reihen orienteren.

    da die artikel unterschiedlich groß sein können ist schon etwas störend wenn da auf einmal so eine lücke aufklafft.

    siehe bild (linke seite)

    die css-definition sieht so aus:

    PHP-Code:
    article {
        
    width40%;
        
    margin-right15px;
        
    floatleft;
        
    background-color#F8F8F8;
        
    padding-left10px;
        
    padding-right10px;
        
    padding-bottom10px;
        
    margin-bottom20px;

    kann mir jemand sagen wie ich diesen abstand wegbekomme so dass ich das "float: left;" beibehalten kann aber sich der abstand trotzdem an das "margin-bottom: 20px;" hält ohne sich autmatisch an den größeren aritkel zu orientieren?

    vielen danke,
    ratte
    Angehängte Dateien

  • #2
    Vielleicht hilft dir da: http://webkrauts.de/artikel/2011/css...-column-layout

    Kommentar


    • #3
      danke erstmal,
      aber leider ist das nicht das was ich meine.
      ich möchte nicht den artikel auf 2 spalten aufteilen sondern dass sich die einzelnen artikel-tags (bzw divs) wie oben beschrieben anordnen.

      das mit den columns wäre zwar nützlich um den inhalt der tags zu formatieren, das ist aber nicht das problem.

      ich will nur dass sich die unteren tags/divs nicht an der größe der oberen orientieren sondern daran was in der css definiert ist.

      Kommentar


      • #4
        Du möchtest alle Artikel in zwei Spalten anordnen und dabei nicht den Abstand zwischen den linken oberen und dem linken unteren Artikel haben, richtig?

        Problematisch bei dem deinem CSS-Teil ist schon, dass du mit einer variablen Breite und einem festen Margin arbeitest.

        Kommentar


        • #5
          ja genau, den abstand möchte ich nicht.
          trotzdem um das ganze nochmal deutlicher zu veranschaulichen auf dem screenshot eingezeichnet...

          warum ist das problematisch? das sind doch 2 verschiedene css befehle ?!?

          wenn das mit meiner css-definition ein problem ist, welche möglichkeiten gäbe es das ganze so anzuordnen?

          bzw. gibt es einen css befehl der definiert dass dieser abstand nicht autmatisch eingefügt wird?
          Angehängte Dateien

          Kommentar


          • #6
            Das ist so nicht möglich. Es sei denn, Du benutzt Javascript dazu.

            Mehr noch - es ist auch nicht snnvoll, weil semantisch betrachtet ist Deine aktuelle Seite so angeordnet:

            1 2
            3 4

            Etwas als Spaltensatz anzuordnen hieße aber, eine

            1 3
            2 4

            Reihenfolge zu benutzen. Das ist nicht zuletzt auch optisch dann die Konsequenz, wenn Du die Zeilenhaltigkeit entfernen möchtest.

            Nicht zuletzt aus dem Aspekt des Responsive-Designs solltest DU daran denken, dass mobil dann die Reihenfolge

            1
            2
            3
            4

            entstehen muss.
            [COLOR="#F5F5FF"]--[/COLOR]
            [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
            [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
            [COLOR="#F5F5FF"]
            --[/COLOR]

            Kommentar


            • #7
              danke erstmal,
              aber leider ist das nicht das was ich meine.
              ich möchte nicht den artikel auf 2 spalten aufteilen sondern dass sich die einzelnen artikel-tags (bzw divs) wie oben beschrieben anordnen.

              das mit den columns wäre zwar nützlich um den inhalt der tags zu formatieren, das ist aber nicht das problem.
              Doch, css columns sollten dein Problem eigentlich perfekt lösen!

              Beispiel: http://jsfiddle.net/kj78mgnL/
              Die Frage ist nur ob man per CSS verbieten kann Artikel auf zwei Spalten aufzuteilen.

              Kommentar


              • #8
                vielen dank,

                die reihenfolge mit

                1 3
                2 4

                wäre vom design her zwar das was ich will aber nicht wirklich brauchbar da die aktuellsten artikel die obersten 2 sein sollen (also chronologisch angeordnet)

                kannst du mir vl sagen was ich mir bei js ansehen muss damit das ganze so wie in diesem bild angeordnet wird?

                bist du dir da sicher dass es dafür keine css lösung gibt?
                nur um einen automatischen abstand zu entfernen kommt mir js etwas aufwendig vor. aber wenn ich drum rum komm soll es halt so sein...
                --------------

                achso, kann ich denn die definitionen aus column auf separate divs anwenden?

                Kommentar


                • #9
                  bist du dir da sicher dass es dafür keine css lösung gibt?
                  Ja. HTML-Seiten sind nunmal zeilenweise organisiert.
                  [COLOR="#F5F5FF"]--[/COLOR]
                  [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                  [COLOR="#F5F5FF"]
                  --[/COLOR]

                  Kommentar


                  • #10
                    Als JS-Lösung könnte Masonry für dich interessant sein. Weiß aber grad nicht ob er das auch richtig semantisch ordnet.

                    Kommentar


                    • #11
                      @monolith: danke, das sieht zwar sehr danach aus, aber da hab ich dann das gleiche problem dass die artikel nicht nach

                      1 2
                      3 4

                      angezeigt werden, sondern

                      1 3
                      2 4

                      und somit die aktuellsten artikel nicht nebeneinander sondern untereinander gereiht werden. aber trotzdem danke, vor allem für das jskuddle tool, echt hammer zum testen...

                      @nikosch: ich frage nur weil ich mir einbilde dass ich mal ein tutorial gesehn hab (das ich nicht mehr finde) bei dem diese anordnung mit css3 umgesetzt wurde, kann mich aber auch irren (was evtl der grund dafür ist warum ich es nicht mehr finde.)

                      @kinger: das sieht sehr danach aus was ich suche, ich werd mich mal damit spielen, vielen dank.

                      Kommentar


                      • #12
                        Was du ja immer noch machen kannst: Ganz stumpf die Artikel auf zwei nebeneinader liegende divs (die Spalten sozusagen) verteilen. http://jsfiddle.net/te0gnp9z/
                        Das Verteilen dann PHP-seitig:
                        PHP-Code:
                        <?php
                        $articles 
                        = ... // Array mit Artikel-Objekten
                        $leftArticles $rightArticle  '';
                        for (
                        $i 0$i sizeof($articles); $i++) {
                           if (
                        $i == 1) {
                                
                        $leftArticles .= $article->text;
                            } else {
                                
                        $rightArticles .= $article->text;
                            }
                        }
                        ?>
                        <div class="col col1">
                            <?php echo $leftArticles ?>
                        </div>
                        <div class="col col2">
                            <?php echo $rightArticles ?>
                        </div>
                        Nur, natürlich kann es dann sein, dass auf einer Seite mehr Artikel landen als auf der anderen. Das kannst du aber auch nicht verhindern wenn du keine Änderung deiner Methode zulässt.

                        Nicht zuletzt aus dem Aspekt des Responsive-Designs solltest DU daran denken, dass mobil dann die Reihenfolge

                        1
                        2
                        3
                        4

                        entstehen muss.
                        Und das natürlich auch noch.

                        Kommentar


                        • #13
                          Automatischen Abstand abschalten (JavaScript)

                          Hallo,

                          naja, also die js-variante ist mir bis jetzt am sympathischsten. mein problem ist nur dass ich mich damit nicht so zurecht finde.
                          also ich hab jetzt(seit gestern) versucht die masonry variante zu verwenden, aber irgendwie greift es nicht.

                          die definitionen die ich über css zugewiesen habe greifen, aber es hält immer noch an der zeilenorientierung fest :/

                          PHP-Code:
                                  <main>
                                      <div id="container"  style="overflow: auto; height: 75%">
                                          <?php include ("sites.php"); ?>          
                                      </div>
                                  </main>
                                  
                                  <script type="text/javascript" src="/jscript/masonry.pkgd.min.js"></script>
                                  <script type="text/javascript">
                                      
                                          var container = document.querySelector('#container');
                                          var msnry = new Masonry( container, {
                                            // options
                                            columnWidth: 200,
                                            itemSelector: '.item'
                                          });
                                  </script>
                          ich habe das ganze eigentlich strikt nach der offiziellen anleitung geschrieben (http://masonry.desandro.com/#install)
                          aber effekt hat es keinen

                          das ganze verhält sich als wäre das js garnicht drinn, habe getestet ob sich was ändert wenn ich es rausnehme -> kein effekt.
                          fehler bekomme ich aber auch keinen.

                          gibts da vl einen js-guru der mir da weiterhelfen kann? ich steh da irgendwie auf der leitung...

                          in der sites.php hab ich die artikel (zum testen) so definiert:

                          PHP-Code:

                          <article class="item">
                              <
                          a><h2>RAtNOIZE</h2>
                          xxxxxxx xxxxxxx xxxx   xxx  xxxx xxxx xxxxxxx xxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxx xxxxxx xxxx xx xxx xxxxx xxxx xxxxxxx xxxxxxx xxxx   xxx  xxxx xxxx xxxxxxx xxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxx xxxxxx xxxx xx xxx xxxxx xx xxxxxxx xxxxxxx xxxx   xxx  xxxx xxxx xxxxxxx xxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxx xxxxxx xxxx xx xxx xxxxx xxxxx xxxxxxx xxxxxxx xxxx   xxx  xxxx xxxx xxxxxxx xxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxx xxxxxx xxxx xx xxx xxxxx xxxxxxx xxxxxxx xxxx   xxx  xxxx xxxx xxxxxxx xxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxx xxxxxx xxxx xx xxx xxxxx xxxxxxx xxxxxxx xxxx   xxx  xxxx xxxx xxxxxxx xxxxxx xxxx xxxxx xxx xxxxxxx xxxxx xxx xxxxxx xxxx xx xxx xx xxxxx xxxxxx xxxxxx xxxxxx xxxxxxx xxxxxxx xxx xxx xxxxxx xxx xxxx xxx xxxx xxxxx xxxxxx
                              
                          </a>
                          </
                          article

                          die class in der CSS-Datei:

                          PHP-Code:
                          .item {
                              
                          width40%;
                              
                          margin10px;
                              
                          floatleft;
                              
                          padding-left10px;
                              
                          padding-right10px;
                              
                          padding-bottom10px;

                          ---------------------------

                          ps, kann mir jemand sagen wie ich das thema zu den js-themen verschiebe?

                          Kommentar


                          • #14
                            versuch den containere mal im html zu initialisieren:
                            HTML-Code:
                            <div id="container" 
                               class="js-masonry"
                              data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'
                            >

                            Kommentar


                            • #15
                              hab ich, funktioniert auch nicht,
                              habe auch schon versucht alle article-tags in divs umzustellen, funktioniert auch nicht.
                              das script tag in den header oder vor den container-tag funktioniert auch nicht.

                              ich versteh aber nicht warum, habe mir auch schon externe howtos angeschaut (z.b.: http://www.sitepoint.com/understanding-masonry-layout/) wo man sieht dass sie es (abgesehen vom container-namen) genauso machen wie ich. habe auch schon getestet ob es geht wenn ich mich an deren doku halte (also genauso mit deren conternamen, etc.) funktioniert auch nicht. bin schon langsam am verzweifeln mit dem rotz, deswegen mag ich diesen javascript-schrott nicht :/

                              naja, hoffentlich hat doch noch jemand eine lösung...

                              Kommentar

                              Lädt...
                              X