Probleme bei relativer Positionierung

happyplate · 1. November 2013

Hallo zusammen,

bei WordPress bin ich noch ziemlich neu, will aber trotzdem an meinem Blog so viel wie möglich selber machen. Auf http://www.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

happyplate · 3. November 2013

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

Monika · 5. November 2013

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 "

<br style="clear:both;" />

oder eleganter

<br class="clear" />

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 · 5. November 2013

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 · 5. November 2013

Klingt ja ganz logisch

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

<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>
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

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 · 5. November 2013

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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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 · 8. November 2013

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 · 8. November 2013

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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Ergänzen um eine Zeile:

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Dann diese Zeile nicht mehr so, wie ich mir das zuerst dachte:

PHP:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Sondern so:

PHP:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Müsstest dann halt nur im Quelltext noch einmal kontrollieren, ob dann beim 4 Bereich statt

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
wirklich

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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 · 8. November 2013

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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Melewo · 8. November 2013

Zitat von happyplate: ↑

PHP:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

happyplate · 8. November 2013

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 · 8. November 2013

Das sieht ja bei Dir immer noch so aus:

HTML:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Es sollte jedoch genau so aussehen:

HTML:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
und

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
also nur noch

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
und

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
verwenden, falls der Bindestrich ärgern sollte. Wenn nicht, dann nicht und Du kannst es mit - belassen.

happyplate · 8. November 2013

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 · 8. November 2013

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:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
Und

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Melewo · 8. November 2013

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

Wo bleibt das "Hurra, alles einwandfrei"?

happyplate · 8. November 2013

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 · 8. November 2013

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

Code:
Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
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 · 8. November 2013

Jetzt ist wieder alles verschoben. Was ist da passiert?

Melewo · 8. November 2013

Zitat von happyplate: ↑

Jetzt ist wieder alles verschoben. Was ist da passiert?
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

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 · 8. November 2013

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.

WPDE.org

Probleme bei relativer Positionierung

happyplate Well-Known Member

happyplate Well-Known Member

Monika Well-Known Member
Ehrenmitglied

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Nützliche Suchen

Probleme bei relativer Positionierung

happyplate Well-Known Member

happyplate Well-Known Member

Monika Well-Known Member Ehrenmitglied

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Melewo Well-Known Member

happyplate Well-Known Member

Monika Well-Known Member
Ehrenmitglied