XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Seitenwechselnde Artikel in Wordpress (http://xhtmlforum.de/showthread.php?t=73161)

ned.design 21.02.2017 22:34

Seitenwechselnde Artikel in Wordpress
 
Liebe Community,

ich möchte gerne meine Beiträge seitenwechselnd anzeigen lassen. Siehe Foto!

Vorstellung: Der erste Beitrag, Foto rechts, Text links mit weißem Hintergrund. Zweiter Beitrag, Foto links, Text rechts mit farbigen Hintergrund, dann wieder wechseln mit weißen Hintergrund und dann wieder farbigen Hintergrund.

http://denniswieting.de/richtig.png

Mein derzeitiger Code:

HTML-Code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                        <article id="one" class="post style1">
                                <div class="image">
                                        <img src="<?php bloginfo('template_url') ?>/images/pic14.jpg" alt="" data-position="75% center" />
                                </div>
                                <div class="content">
                                        <div class="inner">
                                                <header>
                                                        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                                                        <p class="info">3 days ago by <a href="#">Jane Doe</a></p>
                                                </header>
                                                <?php the_content(); ?>
                                                <ul class="actions">
                                                        <li><a href="generic.html" class="button alt">Read More</a></li>
                                                </ul>
                                        </div>
                                        <div class="postnav">
                                                <a href="#" class="prev disabled"><span class="icon fa-chevron-up"></span></a>
                                                <a href="#two" class="scrolly next"><span class="icon fa-chevron-down"></span></a>
                                        </div>
                                </div>
                        </article>
                <?php endwhile; endif; ?>

Mein derzeitiges Resultat:
http://denniswieting.de/falsch.png

cloned 22.02.2017 08:55

Warum nicht mit Flexbox lösen? https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Du kannst mit CSS jede 2. Reihe selektieren: nth-child(even) und dort dann mittels order die Reihenfolge der Elemente umdrehen.

ned.design 22.02.2017 10:27

Zitat:

Zitat von cloned (Beitrag 550573)
Warum nicht mit Flexbox lösen? https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Du kannst mit CSS jede 2. Reihe selektieren: nth-child(even) und dort dann mittels order die Reihenfolge der Elemente umdrehen.

Danke, hast du evtl. ein Beispiel dafür, ich kann mir das gerade nicht vorstellen.

Gesendet von meinem E5823 mit Tapatalk

cloned 22.02.2017 10:45

display:flex;

für das Eltern-Element. (article)

Dann order: 1 für das Element mit der Klasse content damit es vor dem Bild angezeigt wird. Eventuell muss heir die order vom Bild auch noch hochgesetzt werden, habe das gerade nicht auswendig im Kopf, denke aber nicht.

ned.design 25.02.2017 21:27

Ich bekomme das irgendwie nicht umgesetzt.

Gesendet von meinem E5823 mit Tapatalk

cloned 27.02.2017 10:04

Ohne konkrete Fehlerbeschreibung wird es schwer, hier zu helfen. Was hast du wie versucht?


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:06 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023