Artikel auf Startseite nebeneinander (2..3 Spalten)

Schmidii87

Hallo zusammen,

bin gerade dabei mein Theme (Decent) nach meinen Wünschen anzupassen. Klappt auch alles soweit gut, jedoch komme ich mit einer Sache nicht hin. Ich würde gerne auf der Startseite die neuesten Blogeinträge nebeneinander in 2..3 Spalten anzeigen lassen und danach fortlaufend untereinander. Also quasi so:

Post Post Post
Post Post Post
Post..

Gemeistert habe ich bis jetzt nur die Größe der Beiträge im Stylesheet anzupassen mit diesem Code:

Code

.post{    
float:left;
width:200px;
}

Nun scheitere ich daran die Spalten im Index.php zu erzeugen.
Ich habe mir genug Tut's im web angeguckt und versucht die Kommandozeilen richtig zu positionieren, aber es ändert sich einfach nichts in meinem Layout.

Hier mal meine Index.php

PHP

<div id="content-section" class="content-section grid-col-16">    <div class="inner-content-section grid-pct-65">
        
            <?php if( have_posts() ) : ?>




            <div class="loop-container-section clearfix">




                <?php
                    // Here starts the loop
                    while (have_posts()): the_post();
                        get_template_part('loop', 'archive');
                    endwhile;
                ?>                
                
            </div><!-- loop-container-section ends -->




                <?php decent_archive_nav(); // Calls the 'Previous' and 'Next' Post Links. ?>




            <?php else : ?>




                    <?php decent_404_show(); // Function dedicated for handling empty queries. ?>




            <?php endif;?>




        
    </div><!-- inner-content-section ends -->
    
    <?php if($decent_options['site_layout'] != 'no_sidebar') get_sidebar() ?>
    
</div><!-- Content-section ends here -->




<?php get_footer() ?>

Alles anzeigen

Lösen wollte ich es wie aus diesem Code:

Code

[COLOR=#303336][FONT=Consolas]<?[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]php [/FONT][/COLOR][COLOR=#101094][FONT=Consolas]if[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]([/FONT][/COLOR][COLOR=#303336][FONT=Consolas] have_posts[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]()[/FONT][/COLOR][COLOR=#303336][FONT=Consolas])[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]:[/FONT][/COLOR][COLOR=#101094][FONT=Consolas]while[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]([/FONT][/COLOR][COLOR=#303336][FONT=Consolas] have_posts[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]()[/FONT][/COLOR][COLOR=#303336][FONT=Consolas])[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]:[/FONT][/COLOR][COLOR=#303336][FONT=Consolas] the_post[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]();[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]?>[/FONT][/COLOR][COLOR=#7D2727]<div[/COLOR][COLOR=#E64320]class[/COLOR][COLOR=#303336]=[/COLOR][COLOR=#0F74BD]"post"[/COLOR][COLOR=#7D2727]>[/COLOR][COLOR=#303336]
[/COLOR][COLOR=#303336]<?[/COLOR][COLOR=#303336]php
    [/COLOR][COLOR=#858C93]//echo post here[/COLOR][COLOR=#303336]
    the_title[/COLOR][COLOR=#303336]();[/COLOR][COLOR=#303336]
    the_content[/COLOR][COLOR=#303336]();[/COLOR][COLOR=#303336]
[/COLOR][COLOR=#303336]?>[/COLOR][COLOR=#303336]


[/COLOR][COLOR=#7D2727]</div>[/COLOR][COLOR=#858C93]<!-- close .post div -->[/COLOR][COLOR=#303336]


[/COLOR][COLOR=#303336]<?[/COLOR][COLOR=#303336]php
    $counter[/COLOR][COLOR=#303336]++;[/COLOR][COLOR=#303336]
    [/COLOR][COLOR=#101094]if[/COLOR][COLOR=#303336]([/COLOR][COLOR=#303336]$counter [/COLOR][COLOR=#303336]%[/COLOR][COLOR=#7D2727]2[/COLOR][COLOR=#303336]==[/COLOR][COLOR=#7D2727]0[/COLOR][COLOR=#303336])[/COLOR][COLOR=#303336]{[/COLOR][COLOR=#303336]
    echo [/COLOR][COLOR=#7D2727]'<div style="clear:both;"></div>'[/COLOR][COLOR=#303336];[/COLOR][COLOR=#303336]
    [/COLOR][COLOR=#303336]}[/COLOR][COLOR=#303336]
[/COLOR][COLOR=#303336]?>[/COLOR][COLOR=#303336]




[/COLOR][COLOR=#303336]<?[/COLOR][COLOR=#303336]php endwhile[/COLOR][COLOR=#303336];[/COLOR][COLOR=#101094]else[/COLOR][COLOR=#303336]:[/COLOR][COLOR=#303336]?>[/COLOR][COLOR=#303336]
    [/COLOR][COLOR=#7D2727]<p>[/COLOR][COLOR=#303336]<?[/COLOR][COLOR=#303336]php _e[/COLOR][COLOR=#303336]([/COLOR][COLOR=#7D2727]'Sorry, no posts matched your criteria.'[/COLOR][COLOR=#303336]);[/COLOR][COLOR=#303336]?>[/COLOR][COLOR=#7D2727]</p>[/COLOR][COLOR=#303336][FONT=Consolas]<?[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]php endif[/FONT][/COLOR][COLOR=#303336][FONT=Consolas];[/FONT][/COLOR][COLOR=#303336][FONT=Consolas]?>[/FONT][/COLOR]

Alles anzeigen

Leider weiß ich einfach nicht, wo ich bei meinem Code den Counter ect plazieren muss. Habe schon viele Sachen probiert, aber es tut sich Layout technisch einfach nichts.

Kann mir vllt jmd weiterhelfen?

Vielen Dank schonmal für eure Hilfe! ;)

Gruß

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

mache es doch mit css,
dann brauchst all das gar nicht, dann muss php auch nicht zählen, das kann css nämlich auch...

schau dir dazu mal nth-of-type oder nth-of-child an
hier kannst dich damit ein bisschen spielen, um das System zu üben
http://nthmaster.com/

https://css-tricks.com/examples/nth-child-tester/

Schmidii87

Hallo Monika,

danke für deine schnelle Antwort. Doch leider komme ich damit so gar nicht zu recht. :???:

Gibt es dafür eine etwas weniger komplizierte Lösung von meinem Problem?
Muss gestehen, dass ich jetzt nicht der mega CSS/PHP crack bin...

Gruß

Monika

ohne Link kann ich nur so helfen,
du kannst auch url shortener nutzen

Schmidii87

Seite ist http://www.wanderlustbaby.de

wie gesagt.. ist noch im Aufbau. ;)

Monika

Aufbau ist egal,
aber ich brauch mindestens 4 Beiträge auf der Startseite
besser noch 7 :-)

sonst muss ich nachbauen was ich nicht mag

Schmidii87

So, 7 Beiträge sind erstellt. :wink:

SirEctor

Versuch es mal so:

Code

.loop-section-col.grid-col-15{
    width: 30%;
    box-sizing: border-box;
    float: left;
    clear: none;
    margin: 0 0 0 3.125%;
}

Das wäre quick&easy. Ich schätze du suchst aber eher nach Mansonry.

Monika

wie immer gibts viele Wege nach Rom
meine Idee

HTML

.home .main-section .grid-col-15:before,
.home .main-section .grid-col-15:after{
content:""; display:table
}
.home .main-section .grid-col-15:after{
clear:both
}




.home .main-section .grid-col-15{border:1px solid red;
display:inline-block;
 vertical-align:top;
width:32.15%;
box-sizing:border-box;
}

Alles anzeigen

das border:1px solid red

dient nur damit du siehst wie es dann aussieht

und in der style.css desChildThemes das da löschen

HTML

.post {
    float: left;
    width: 50%;
}

Schmidii87

Tausend Dank euch beiden!!! Funktioniert beides genau so, wie ich es haben möchte :grin:

Wieso sieht die Lösung immer so einfach aus und ich Trial&Error mir hier stunden lang einen ab......

Edit: Sehe gerade, dass bei der mobilen Version der Seite (zB auf dem Iphone) ebenso die Beiträge nebeneinander angezeigt werden. Sieht da dann etwas komisch aus. Lässt sich das auf der Mobilen Version wie vorher (untereinander) anzeigen?

SirEctor

Dann schreib es so in etwa:

Code

@media only screen and (max-width: 1000px){
  ...Code von mir oder Monika....
}

Monika

Zitat von Schmidii87

.......
Wieso sieht die Lösung immer so einfach aus .......
...........

;-) vielleicht, weil SirEctor und ich CSS einfach können
manchmal auch erst nach Std des Trial&Errors und Nachlesens ..

SirEctor

Ups, sehe gerade, dass sich ein Fehler eingeschlichen hat. Es muss natürlich

Code

@media only screen and (min-width: 1001px){
  ...Code von mir oder Monika....
}

heißen.

Schmidii87

SirEctor: Danke erstmal für den Code. Vor allem für den Verbesserten... haben schon wieder bisschen rumprobiert und bin fast verzweifelt :D Aber jetzt passt es perfekt!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Artikel auf Startseite nebeneinander (2..3 Spalten)

Jetzt mitmachen!