Bilderpositionieren

    Hi,
    nach anfänglichen Startschwierigkeiten klappt das "Verhältnis" zwischen mir und WordPress so einigermaßen. Ein Problem konnte ich aber immer noch nicht lösen:

    Ich muß 25 kleine Bilder auf 5 Zeilen und 5 Spalten positionieren, also im Raster 5 x 5. Wenn ich Bilder in die Seite Lade, werden sie natürlich untereinander positioniert. Wie kriege ich das Raster hin? Hat einer 'ne Idee?

    Außerdem: Den gesamten Quelltext der Seite kann ich mir im FF ansehen. Habe ich auch im WP-Backend die Möglichkeit? In Darstellung/Editor wird der Basisquellcode der Theme-Vorlage, aber nicht der jeweiligen Seite angezeigt.

    • Gerade eben
    • Anzeige

    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

    Zitat von bgeissler

    Das ist eine float-Einstellung im css.
    Hilfreich wäre ein Link zur entspr. Seite

    Jein, Bilder sind von Hause Inlineelemente, werden also wie Fließtext nebeneinander dargestellt, bis die Spalte zu schmal für das nächste Bild ist, also wird dort umgebrochen. Das, wie der TE schreibt, die Bilder untereinander dargestellt werden kann zwei Gründe haben:

    • Zwei Bilder sind bereits zu breit für die Spalte und es wird immer umgebrochen - das schließ ich aber aus, da es sich ja um kleine Bilder lt.TE handelt.
    • Irgendwo in der CSS werden alle oder bestimmte Bilder zu Blockelementen deklariert:
    Code
    img{display:block;} 
#content img{display:block;}

    oder ähnlich - hier wäre jetzt ein float angebracht um die Bilder wieder nebeneinander zu positionieren. Um nach jedem fünften umzubrechen gibt es zwei Wege

    • die Spalte ist nur so breit, das nicht mehr als 5 nebeneinanderpassen - Umbruch automatisch
    • ich gebe dem 6., 11., 15. ... Bild ein clear mit, das könnte dann so aussehen:
    Code
    #meinDiv img{float:left;}
#meinDiv img:nth-child(5n+6) {clear:both;}

    (jedes fünfte Bild beginnend mit dem sechsten, bekommt ein clear), ist aber nur notwendig, wenn die Spalte breiter ist als fünf Bilder incl. ihrer Margins, Borders und Paddings zusammen.

    Zitat von bgeissler

    Das script und css-Dateien hast du aus dem QC
    Dann suche dir die im QC genannte class (team images)


    Genau, hier ist es so, das der umgebende div .team.images eine feste Breite (490px) hat, deshalb wird nach 5 Bildern umgebrochen. Die umgebende a-Tags haben "display:inline;" die Bilder selbst "display:block;" und "float:left;".

    Habe im "team.ccs" den images display:block und float:left zugewiesen und dem content display:inline. Aber, wo finde ich die class (team images) aus dem QC?

    Und nochmal die (wohlmöglich dumme) Frage: Wie kann ich im WPBackend auf die Seiten-QCs greifen?

    :grin: Manchmal sieht man den Wald vor lauter Bäumen nicht :wink:

    Aber wie ist es nun mit dem QC im Backend? Kann man sie irgendwie sehen? oder ist nur der von den Vorlagenseiten des Themes sichtbar?

    In der QC des Team Page Templates (bak.team.php) ist eine Rollover-Funktion. Sie ist aber im QC der Team Seite nicht mehr drin (ist aber in der Refrenzen Seite drin). Diese Funktion würde ich bei der Team Seite gerne nutzen. Wenn ich an den SeitenQC komme ist das ja kein Problem. Wenn das aber WP nicht ermöglicht - wie gehe ich da ran?

    Einmal editiert, zuletzt von Wassermann22 (11. Februar 2011 um 21:59)

    Hi cebito,

    das ist nun mein team.css


    #content2 .team.images
    {
    width:490px;
    margin:0px 0px 25px 0px;
    display:block;
    float:left;
    }

    #content2 .team.images img
    {
    float:left;
    }

    #content2 .team.images img.first,
    #content2 .team.images img.middle
    {
    margin:0px 5px 5px 0px;
    }

    #content2 .team.images img.last
    {
    margin:0px 0px 5px 0px;
    }

    #content2 .team.content
    {
    display:block;

    }

    Läuft nicht. Ist wohl 'n Fehler drin.

    Einmal editiert, zuletzt von Wassermann22 (11. Februar 2011 um 22:41)

    Zitat von Wassermann22

    Läuft nicht. Ist wohl 'n Fehler drin.

    Das frag ich mich schon die ganze Zeit, du hast auf deiner Testseite im Gegensatz zur Beispielseite nicht ein einziges Bild drin, lediglich den fast leeren #content2 der gerade mal die h1 enthält. Wie wäre es, wenn du deinen Versuch mal komplett online stellst? Wie sollen wir sehen, ob etwas funktioniert? Ich kann jedenfalls keinen Fehler entdecken - wie auch? Und ich werde hier auch keine Zeit mehr investieren, wenn ich nur nen leeren div und dazu irgendwelche "hab ich gemacht" - Posts präsentiert kriege. Dazu ist mir meine Zeit zu schade.

    Moin cebito,

    Asche über mein Haupt! Hast natürlich Recht! Habe dir den neuen Link zur Testseite geschickt.

    Was mir noch aufgefallen ist: die Team-Seite ist mit der Standardvorlage erstellt worden. Deshalb steht z.B. die RollOver Funktion nicht im QC der Seite. Ich habe meine Testseite mit der Team-Vorlage erstellt. Dort ist die Funktion drin. Ich habe aber das Problem, die dazu gehörenden Bilder aus dem entsprechen Ordner aufzuladen, weil sie nicht im Upload-Ordner sind, sondern per Definition der Rollover-Funktion in einem Unterordner von Themes stecken

    ..de/wp-content/themes/bohne/pics/team/...

    Wenn ich sie laden will, komme ich nur an Multimedia bzw. upload (hab ich dir im Detail geschrieben). Nun könnte ich natürlich daher gehen, und die Verlinkung auf "upload" ändern. Damit würde ich aber die Team-Vorlage ändern. Die aber wird noch von anderen Seiten benutzt.

    Was die Darstellung der Bilder angeht, dürften die unterschiedlichen Vorlagen aber nicht ausschlaggebend sein, weil sie beide auf die gleichen ccs Files zugreifen. Oder?

    Einmal editiert, zuletzt von Wassermann22 (12. Februar 2011 um 11:45)

    Zitat von Wassermann22

    Habe dir den neuen Link zur Testseite geschickt.

    Die Bilder liegen nicht im div .team.images, das ist dein Problem. Entweder du machst es wie in der Vorlagenseite (Bilder in den div), oder du gibst dem p-Tag in den du die Bilder gesteckt hast auch die Klassen .team.images, oder schreibst eine neue css-Regel für Bilder in diesem p-Tag.

    Zitat von Wassermann22

    Was die Darstellung der Bilder angeht, dürften die unterschiedlichen Vorlagen aber nicht ausschlaggebend sein, weil sie beide auf die gleichen ccs Files zugreifen. Oder?

    Siehe oben, das wäre nicht ausschlaggebend, wenn du auch die gleiche Struktur wie die Vorlagenseite nutzen würdest.

    Zitat von Wassermann22

    Ich habe aber das Problem, die dazu gehörenden Bilder aus dem entsprechen Ordner aufzuladen, weil sie nicht im Upload-Ordner sind, sondern per Definition der Rollover-Funktion in einem Unterordner von Themes stecken

    ..de/wp-content/themes/bohne/pics/team/...

    Wo ist das Problem?

    PHP
    <img src="<?php bloginfo( 'template_url' ); ?>/pics/team/dasBild.jpg" alt="dasBild" />

    "Wahre Worte sind nicht angenehm,
    angenehme Worte sind nicht wahr"
    Laotse

    Ok! Ich habe verstanden!

    Die PMs habe ich geschrieben, zum einen, weil der ccs.team einen Fehler hatte und Seiten, die darauf zugreifen davon betroffen waren. Zu nächst war ich Ratlos. Hab dann aber den Fehler entdeckt und korrigiert. Zum anderen, wollte ich mich für deine Hilfe und Geduld bedanken.

    Die neue Testseite habe ich reingestellt. Den Link darf ich aber nicht öffentlich posten, weil es nicht meine eigene Site ist. Den muss ich dir wieder schicken. Im HtmlCode habe ich die Zuweisungen durchgeführt. Habe die Bilder in den richtigen Order geschoben und habe die gleiche Vorlage wie die Beispielseite benutz. Aber, wie du siehst, funzt es noch nicht.

    Du hast mir nen php Code geschrieben. In html und Dreamweaver bin ich erfahren, aber WP und php sind doch stellenweise Neuland für mich. Ich meine, um diesen Code anwenden zu können, müsste ich in den SeitenQC? Ich komme aber bis jetzt nicht an den Quelltext der Seite außer bei FF.

    Den Bildern selbst darfst du natürlich nicht die Klasse geben sondern nur dem Element, in dem die Bilder drin sind.

    Zu dem anderen, wenn du nicht an den Quellcode rankämst, wie änderst du den dann? Irgendwo notierst du ja die Bilder, ersetze deine Notation mit meiner.

    Hi cebito,
    war krank und konnte nicht arbeiten, deshalb melde ich mich erst jetzt wieder.

    Zitat von cebito


    Zu dem anderen, wenn du nicht an den Quellcode rankämst, wie änderst du den dann? Irgendwo notierst du ja die Bilder..

    Die Notation führe ich im Backend in dem HTML-Reiter der neuen Seite durch. Eine komplette QC-Ansicht der Seite habe ich nicht und finde sie bei WP nicht, außer bei den Vorlagen. Aber, wenn ich dort etwas verändere, wirkt sich das auf alle Seiten aus, die mit der Vorlage erstellt worden sind.


    Zitat von cebito

    Den Bildern selbst darfst du natürlich nicht die Klasse geben sondern nur dem Element, in dem die Bilder drin sind.

    Um das machen zu können müsste ich an den QC der Seite. Wie soll das aber denn gehen (s. o.)? Der HTML-Reiter bezieht sich doch nur auf das, was in dem Element drin ist, aber nicht auf das Element selber.

    Das sind ja die Theme-Vorlagen. Auf die Vorlage, die ich für die neue Seite verwendet habe, greifen auch andere Seiten zu. Wenn ich in dieser Vorlage etwas notiere, müsste sich das auch bei diesen anderen Seiten auswirken, oder nicht?

    Das ist richtig. Möglicherweise schreibt aber auch die verwendete Galerie erst diesen Teil dazu. Ich weiß ja nicht genau, wie du deine Bilder reinbringst, aber du könntest selbst am Anfang einen div oder was weiß ich öffnen, mit Klassen versehen und nach dem letzten Bild wieder schließen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden