Automatischen Abstand abschalten

[Gast]

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:

article {
    width: 40%;
    margin-right: 15px;
    float: left;
    background-color: #F8F8F8;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
} 

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

[Kinger]

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

[Gast]

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.

[Kinger]

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.

[Gast]

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?

[nikosch]

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.

[monolith]

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.

[Gast]

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?

[nikosch]

bist du dir da sicher dass es dafür keine css lösung gibt?

Ja. HTML-Seiten sind nunmal zeilenweise organisiert.

[Kinger]

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

[Gast]

@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.

[monolith]

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
$articles = ... // Array mit Artikel-Objekten
$leftArticles = $rightArticle  = '';
for ($i = 0; $i < sizeof($articles); $i++) {
   if ($i % 2 == 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.

[Gast]

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 :/

        <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:

<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:

.item {
    width: 40%;
    margin: 10px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
} 

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

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

[Gast]

versuch den containere mal im html zu initialisieren:

<div id="container" 
   class="js-masonry"
  data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'
>

[Gast]

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...