Listen eines Widgets zentriert darstellen

  • Hallo Leute,

    ich habe mir ein kleines Widget gebastelt, das bei mir in der Haupt-Sidebar die Kategorien und Tags eines Beitrags als Liste (nebeneinander) anzeigt. Habe soweit alles angepasst, aber bekomme den Inhalt einfach nicht zentriert dargestellt.

    Hier der Content:

    PHP
    <ul class="gw-tags"><?php the_category(); ?></ul>
    <?php $tag_list = get_the_tag_list('<ul class="gw-tags"><li>','</li><li>','</li></ul>');
    if(!empty($tag_list)){ ?>
            <div class="gw-tags">
            <?php   echo $tag_list; ?>
            </div>
            <?php } 
            ?>
    <div class="gw-tags-clear"></div>

    Hier mein CSS:

    Hat dazu jemand eine Idee, wie ich das ganze in die Mitte bekomme?

    • 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

  • Es wäre einfacher, wenn man das Ergebnis mal sehen könnte.

    Aber spontan würde ich folgendes versuchen:

    Bei .gw-tags li das float:left raus und stattdessen text-align:center einfügen.


  • Aber spontan würde ich folgendes versuchen:
    Bei .gw-tags li das float:left raus und stattdessen text-align:center einfügen.

    Das funktioniert leider nicht, hatte ich auch schon ausprobiert.

    Hier ist ein Screenshot wie es jetzt aussieht. Erst kommen die Kategorien, dann die Tags. Vielleicht hilft das weiter...

  • Ok, jetzt wo ich es sehe... Ich glaube ich habe dich falsch verstanden.
    Ich dachte, du wolltest alle li untereinander (also eins pro Zeile) und diese Zeilen dann zentrieren.

    Was meinst du denn genau mit "Inhalt zentriert"?

    Möchtest du die Darstellung der einzelnen li genau so erhalten, aber identische Abstände rechts und links zur Sidebar? Oder möchtest du, dass die li zwar nebeneinander sind, aber nicht linksbündig, sondern zentriert (also im Sinne von zentrierten Text)?


    Gibt es einen Link zur Seite?

  • Oder möchtest du, dass die li zwar nebeneinander sind, aber nicht linksbündig, sondern zentriert (also im Sinne von zentrierten Text)?

    Genau das möchte ich!

    Den Link zur Seite schick ich dir per PN, da es noch ein Testblog ist und da noch viel gemacht werden muss.

  • Funktioniert nur teilweise. Die "Kategorie-Tags" bleiben jedoch links (schau auf meiner Seite).

    Hier ist nochmal der ganze CSS-Teil (mit Kategorien):

  • Es sollen aber doch zuerst die Kategorien gelistet werden und dann die Tags?
    D.h. das Problem ist, dass damit ein Zeilenumbruch zwischen den Kategorien und den Tags kommt?
    => Dann müssen die unsortierten Listen <ul>, in denen die Kategorien und Tags ausgegeben werden, auch als inline-Elemente oder inline-block-Elemente definiert werden.

    Gruß
    helix


  • => Dann müssen die unsortierten Listen <ul>, in denen die Kategorien und Tags ausgegeben werden, auch als inline-Elemente oder inline-block-Elemente definiert werden.

    Hab ich doch bereits gemacht. Oder wie meinst du das sonst?

    Code
    .gw-tags ul li {
        margin-bottom: 5px;
        display: inline-block;
        cursor: pointer;
    }
    .gw-cats ul li {
        margin-bottom: 5px;
        display: inline-block;
        cursor: pointer;
    }
  • Ähm ja, ich war flüchtig im Code-Lesen.
    Deine Tags stecken ja außerdem noch in einem div (=> Block-Element, d.h. das erzwingt einen Zeilenumbruch), d.h. dieses div mit der Klasse .gw-cats muss auch display: inline-block; haben.

    Vermutlich kannst du deine Ausgabe viel einfacher gestalten. Weniger html-Elemente. Weniger Klassen.

    Gruß
    helix


  • Deine Tags stecken ja außerdem noch in einem div (=> Block-Element, d.h. das erzwingt einen Zeilenumbruch), d.h. dieses div mit der Klasse .gw-cats muss auch display: inline-block; haben.

    Hab ich probiert. Funktioniert leider auch nicht.


    Vermutlich kannst du deine Ausgabe viel einfacher gestalten. Weniger html-Elemente. Weniger Klassen.

    Das kann sein, bin ja noch am Anfang und kein Profi. Deshalb muss ich auch ab und zu mal dieses Forum hier aufsuchen. ;-)

  • Hab ich probiert. Funktioniert leider auch nicht.


    Dann spiel mal bitte ein bisschen mit deinen Webentwickler-Werkzeugen rum. Normalerweise kriegt man da ja die Elemente angezeigt und sieht dann auch, wo Umbrüche erzwungen werden etc.

    Wenn du es damit immer noch nicht rausfindest, poste bitte mal den HTML-Code, der durch dein Template ausgegeben wird. Danke.

    Gruß
    helix

  • Ehrlich gesagt kann ich dem ganzen nicht mehr folgen.

    Ich versuche es nochmal zusammenzufassen:

    Eigentlich möchtest du alle Kategorien und Tags einfach hintereinander weg haben, also keine Umbrüche oder ähnliches dazwischen, und willst alles zentriert haben?
    Der einzige Unterschied zwischen Kategorien und Tags ist nur die Farbe?

    Das bekommt man zwar irgendwie mit CSS hingebastelt, ich verstehe aber gar nicht, warum du dann erst so komplizierten HTML Code erzeugst...

    Wäre dann nicht folgendes viel sinnvoller:

    PHP
    <ul class="gw-tags">
    <?php the_category(); ?>
    <?php $tag_list = get_the_tag_list('<li class="gw-tag">','</li><li class="gw-tag">','</li>');
    if(!empty($tag_list)){ echo $tag_list; } ?>
    </ul>

    (ist jetzt ungetestet, aber so ungefähr sollte das aussehen).

    Das Ergebnis wäre dann: Ein <ul> und darin dann sowohl die Kategorien, als auch die Tags als <li>'s. Die unterschiedlichen Farben kannst du dann definieren, weil die Tags zusätzlich die Klasse "gw-tag" haben.

  • Es ist wie gesagt ungetestet, aber wo ich gerade darüber nachdenke, glaube ich, dass the_category() auch noch ein zusätzliches <ul> ausgibt. Das wäre für diesen Ansatz natürlich kontraproduktiv. Insofern müsste man es wahrscheinlich dann eher so machen (auch ungetestet):

  • Ja, es ist auf jeden Fall ein etwas anderer Ansatz. Quasi einfacheren HTML Code ausgeben und damit dann auch weniger Anpassungsaufwand in CSS.

    Wegen der Ausgabe der Kategorien. Da hatte ich glaube ich einen Denkfehler.

    Ersetz mal get_categories() mit get_the_category($post->ID).

    Dann sollte eigentlich nur noch die Kategorien des Beitrags ausgegeben werden.

    Das die Gestaltung weg ist, ist normal. Du muss deine CSS Klassen an die neue HTML Struktur anpassen.


    PS: Behalte die alte Version am besten auch noch. Falls das hier am Ende nicht zum gewünschten Ergebnis führt, kannst du dann zumindest noch zum alten Stand zurück...


  • Ersetz mal get_categories() mit get_the_category($post->ID).

    Hab ich und nun kommt folgender Fehler:

    Code
    Notice: Undefined variable: post in /mnt/web102/b3/98/57738898/htdocs/WordPress_SecureMode_01/wp-content/plugins/enhanced-text-widget/enhanced-text-widget.php(57) : eval()'d code on line 3 Notice: Trying to get property of non-object in /mnt/web102/b3/98/57738898/htdocs/WordPress_SecureMode_01/wp-content/plugins/enhanced-text-widget/enhanced-text-widget.php(57) : eval()'d code on line 3
  • Hm, OK. Ich müsste es jetzt selbst ausprobieren. Dann vielleicht Kommando zurück und doch wieder der CSS Weg?

    Sorry, Ich dachte so kommen wir vielleicht schneller zu einem guten Ergebnis...

    Einmal editiert, zuletzt von danielgoehr (18. Dezember 2016 um 22:29)

Jetzt mitmachen!

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