Probleme bei relativer Positionierung

happyplate

Hallo zusammen,

bei WordPress bin ich noch ziemlich neu, will aber trotzdem an meinem Blog so viel wie möglich selber machen. Auf http://happyplate.de will ich be meiner Rezeptvorschauzeile eine zweite Zeile implentieren. In dem Template war nur eine. Das ich 6 anstatt 3 Texte in meiner Vorschau angezeigt bekomme, habe ich hinbekommen. Was nicht geklappt hat, ist, dass die unteren 3 unter den oberen 3 angeordnet werden.
Ich bin absolut beim verzweifeln. Wahrscheinlich für die meisten von euch pille palle, aber würde mich über jede Hilfe freuen. :-)

LG

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

happyplate

Ich finde einfach nicht die Stelle, wo ich die zweite Reihe definiere.

Monika

ich kenne das Theme nicht,
aber hier brauchts nach der ersten Reihe etwas , dass das Fließen auflöst, dann wäre alles in Ordnung

d.h Du musst den "Loop zählen" lassen und nach dem 3ten "Beitrag ein "

oder eleganter

und in die style.css

.clear{clear:both;} nutzen.

Um dir bei der Loopzählerei zu helfen bräucht man den Inhalt des Templates das genau diesen Teil "erzeugt"

Melewo

Du hast keine zweite Reihe, Du hast 7 Div-Bereiche zu je 220px nebeneinander, die aber nach der vierten umgebrochen werden, weil die Platzeinteilung halt nicht mehr als 4 Bereiche nebeneinander ermöglicht. (Die verhalten sich nicht anders als ein langer Satz, der am Ende einer Zeile umgebrochen wird und sich somit über zwei Zeilen in einem Textdokument erstreckt.) Im ersten Div befindet sich "Letzte Rezepte" und den Bereich musst Du mitzählen bei der Platzverteilung.

Entweder wie Monika schrieb oder gleich 8 Bereiche nutzen, was wohl einfacher sein sollte. Zur Kontrolle bei der Einrichtung kannst Du den DIVs einen Border geben, den kannst Du nachher wieder entfernen.

happyplate

Klingt ja ganz logisch :-)

Jetzt müsste ich das nur noch so umsetzten können. ;-)

Zitat

<div class="four columns leftbox">
<h2>Letzte Rezepte</h2>
<p>Die letzten Rezepte meines Blogs </p>
<span> <?php $bloglink = of_get_option('w2f_blog_page'); ?> <a href="<?php echo get_page_link($bloglink); ?>">Alle sehen</a> </span>
</div>

<?php $query = new WP_Query( array( 'posts_per_page' =>'6' ) );
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>

<div class="four columns rightbox">
<?php $image_attr = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'index_wide'); ?>
<a href="<?php the_permalink() ?>"> <img src="<?php echo $image_attr[0]; ?>" class="index-wideimg scale-with-grid"></a>

<div class="panelpost">
<h2><a href="<?php the_permalink() ?>"> <?php the_title(); ?> </a></h2>
<span class="paneldate"><?php the_time('l, n F Y'); ?></span>
<?php wpe_excerpt('wpe_excerptlength_index', ''); ?>
</div>
</div>

Alles anzeigen

ist ja der Code auf den sich das bezieht. Richtig?

Durch die div class "four columns leftbox" und "four columns rightbox" dachte ich sei das links und rechts schon definiert.

Wie baue ich da einen loop ein? Müsste das vor <div class="panelpost">?

Melewo

Müsste man ausprobieren, zwischen 2 und 20 Tests ist da alles möglich, ab und an auch noch mehr, ehe es richtig funktioniert. Deshalb nur mal, wie ich da vielleicht einen ersten Test beginnen würde. Also ungetestet und nur aus dem Stegreif, weiße Seite ist deshalb möglich und eine Kopie sollte deshalb bereit liegen, um diese per FTP im Falle eines Fehlers hochladen zu können.

PHP

<div class="four columns leftbox">
<h2>Letzte Rezepte</h2>
<p>Die letzten Rezepte meines Blogs </p>
<span> <?php $bloglink = of_get_option('w2f_blog_page'); ?> <a href="<?php echo get_page_link($bloglink); ?>">Alle sehen</a> </span>
</div>


<?php $query = new WP_Query( array( 'posts_per_page' =>'6' ) );


$zaehlemit = 0;
if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); 
    $zaehlemit++; ?>


<div class="four columns rightbox" <?php 
if ($zaehlemit == 4) echo "style=\"margin-left:220px\"" ?>>
<?php $image_attr = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID), 'index_wide'); ?>
<a href="<?php the_permalink() ?>"> <img src="<?php echo $image_attr[0]; ?>" class="index-wideimg scale-with-grid"></a>


<div class="panelpost">
<h2><a href="<?php the_permalink() ?>"> <?php the_title(); ?> </a></h2>
<span class="paneldate"><?php the_time('l, n F Y'); ?></span>
<?php wpe_excerpt('wpe_excerptlength_index', ''); ?>
</div>
</div>

Alles anzeigen

Bei 4 sollte richtig sein, weil ja 0 auf 1, 2, 3, 4 erhöht wird, doch auch da bin ich mir nie richtig sicher.

happyplate

Sau cool, es hat gekklappt. Jetzt nur noch, wenn ich zu Hause wieder Internet habe, die Formatierung feinjustieren. Darauf wäre ich nie gekommen.
Vielen lieben Dank!

Melewo

Ja, aber, ein großes Aber, ich muss Dich etwas enttäuschen. Du hast ja in der "/wp-content/themes/Yasmin/responsive-style.css" die responsiven Styles und bei kleineren Endgeräten mit

Code

/* Note: Design for a width of 768px */
/* Note: Design for a width of 480px */
/* Note: Design for a width of 320px */

würde der Bereich aus der Bahn geworfen. Was Du tun müsstest, in diesen Bereichen in der responsive-style.css drei neue CSS Klassen einfügen. Jetzt ist in der responsive-style.css vorhanden:

Code

/* #Base 960 Grid
================================================== */


    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

Ergänzen um eine Zeile:

Code

/* #Base 960 Grid
================================================== */


    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }
    .columns-sonderklasse                       { float: left; display: inline; margin-left: 230px; margin-right: 10px; }

Bei den anderen beiden auch eine Zeile mit einer columns-sonderklasse ergänzen und bei der einen das Maß noch anpassen, bei der anderen nicht:

Code

/* Note: Design for a width of 320px */


    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .columns, .column { margin: 0 10px; }
        .columns-sonderklasse { margin: 0 10px; }
    ...
    /* Note: Design for a width of 480px */


    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .columns, .column { margin: 0 10px; }
        .columns-sonderklasse { margin: 0 10px; }

Alles anzeigen

Dann diese Zeile nicht mehr so, wie ich mir das zuerst dachte:

PHP

<div class="four columns rightbox" <?php 
if ($zaehlemit == 4) echo "style=\"margin-left:220px\"" ?>>

Sondern so:

PHP

<div class="four columns<?php 
if ($zaehlemit == 4) echo "-sonderklasse"; ?> rightbox">

Müsstest dann halt nur im Quelltext noch einmal kontrollieren, ob dann beim 4 Bereich statt

Code

<div class="four columns rightbox">

wirklich

Code

<div class="four columns-sonderklasse rightbox">

ausgegeben wird. Die jeweiligen Maße lassen sich gut einstellen und kontrollieren, wenn Du einfach das Browserfenster an einer Seite packst und zusammenschiebst.

Das war jetzt alles nur aus dem Stegreif wieder, ohne eine Zeile zu testen, braucht deshalb nicht zu funktionieren und Fehler schleichen sich schnell ein, wozu auch Denkfehler gehören, doch das kannst Du ja testen.

happyplate

Das macht komplett Sinn und funktioniert auch. Das hatte ich erst gesehen als du mich drauf hingewiesen hast. Das funktioniert jetzt.

Allerdings wird die "4. Spalte" jetzt nicht mehr übersprungen.

Ausgabe sieht etwas anders aus:

PHP

<div class="four columns rightbox" rightbox"="" sonderklasse="">

Melewo

Zitat von happyplate

PHP

<div class="four columns rightbox" rightbox"="" sonderklasse="">

Habe die Zeile jetzt nur einmal in eine Test-While gepackt, ausgegeben sollte das eigentlich schon richtig werden und halt nur beim entsprechendem DIV dann die ergänzte CSS-Klasse enthalten.

PHP

<?php
$zaehlemit = 0;
while ($zaehlemit < 10):
$zaehlemit++; ?>


<div class="four columns<?php 
if ($zaehlemit == 4) echo "-sonderklasse"; ?> rightbox">




<?php endwhile; 


/* Ausgaba im Quelltext:


<div class="four columns rightbox">
<div class="four columns rightbox">
<div class="four columns rightbox">
<div class="four columns-sonderklasse rightbox">
<div class="four columns rightbox">
<div class="four columns rightbox">
<div class="four columns rightbox">
<div class="four columns rightbox">
<div class="four columns rightbox">
<div class="four columns rightbox">
*/
?>

Alles anzeigen

happyplate

Sah bei mir so aus. Checke das immer mit firefox. Bin ja noch Neuling.
Wieso wird die vierte Spalte denn jetzt nicht wieder leer gelassen?

Melewo

Das sieht ja bei Dir immer noch so aus:

HTML

<div class="four columns rightbox" -sonderklasse rightbox">

Es sollte jedoch genau so aussehen:

HTML

<div class="four columns-sonderklasse rightbox">

Und dazu dann in der "/wp-content/themes/Yasmin/responsive-style.css" die ergänzenden Styles aufnehmen, in denen dann ja die Abstände zur Ausrichtung definiert werden.

Code

/* #Base 960 Grid
================================================== */


    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .column, .columns                           { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }
    [COLOR=#0000cd].columns-sonderklasse                       { float: left; display: inline; [/COLOR][COLOR=#ff0000]margin-left: 230px; [/COLOR][COLOR=#0000ff]margin-right: 10px; }[/COLOR]

Hatte heute nach erlaubten Zeichen für CSS-Klassenbezeichner gesucht und nichts richtiges gefunden. Falls der Bindestrich ärgern sollte, entfernt Du den halt aus

Code

echo "-sonderklasse"

und

Code

.columns-sonderklasse

also nur noch

Code

echo "sonderklasse"

und

Code

.columnssonderklasse

verwenden, falls der Bindestrich ärgern sollte. Wenn nicht, dann nicht und Du kannst es mit - belassen.

happyplate

O, habe meinen Fehler gefunden. Hatte in Leerzeichen zu viel. Allerdings zieht er die 5 Spalte jetzt in die gleiche Zeile. Gibt's da eine Option wie ich ihm sage, dass er die 5. Spalte wieder normal formatieren soll?

Melewo

Die responsive-style.css sieht jetzt schon einmal so aus, wie ich mir das gedacht hatte. Die andere Zeile im Quelltext, die sieht jetzt auch gut aus. Nun versuche ich gerade zu schauen, was da mit der Breite nicht mehr stimmt.

Da war irgendein Maß mit der Breite, ist mir heute schon über dem Weg gelaufen, versuche es mal zu finden.

Ergänze einmal um eine Zeile in dieser CSS:

Code

/* Base Grid */
    .container .one.column                      { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
[COLOR=#b22222]    .container .four.columns-sonderklasse       { width: 220px; }[/COLOR]
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    ...

Und

Code

/* Note: Design for a width of 768px */


    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
    


        .container .one.column                      { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
[COLOR=#b22222]        .container .four.columns-sonderklasse       { width: 172px; }[/COLOR]

Alles anzeigen

Melewo

Hatte es im Sandkasten mit dieser ersten Zeile ergänzt, dann stimmte die Breite wieder.

Wo bleibt das "Hurra, alles einwandfrei"?

happyplate

Hurra, alles einwandfrei! ;-)
Danke dir!
Jetzt muss ich nur noch gucken, wie ich die untere Zeile gleich der oberen formatiert kriege und alles top! :-)

Melewo

Hier könntest Du statt 230px lieber 250px einsetzen.

Code

/* #Base 960 Grid
================================================== */


    .container                                 { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .column, .columns                          { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                       { margin-bottom: 20px; }
    .columns-sonderklasse                      { float: left; display: inline;[COLOR=#ff0000] margin-left: 250px[/COLOR]; margin-right: 10px;  }

Für kleine Screens scheint es jetzt auch zu stimmen, für große auch, nur für mittlere fehlt noch irgendwo ein Maß.

happyplate

Jetzt ist wieder alles verschoben. Was ist da passiert?

Melewo

Zitat von happyplate

Jetzt ist wieder alles verschoben. Was ist da passiert?

Da staune ich nach meinem verspäteten Mittagsschläfchen aber auch und habe mir die Seite und die beiden CSS-Dateien erst einmal unter Localhost abgespeichert. Doch selbst wenn ich diesen Bereich einfach lösche, so rutscht der nächste ja nur hoch und klebt ebenfalls an der rechten Seite. Irgendetwas Übergeordnetes sehe ich aber auch nicht, was das auslösen könnte. Welches waren Deine letzten Änderungen?

happyplate

Ich habe nur auf der Portfolio Seite eine Kommentar-und facebookoption eingebaut. Als ich diese widerrufen hab, war es immernoch verschoben. Plugins oder so habe ich aber nicht aktiviert oder upgedated.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Probleme bei relativer Positionierung

Jetzt mitmachen!