<li>-Tag in Navigation entfernen

pixelguy

Hi,

gibt es eine Möglichkeit, das <li>-Tag für die Navigation zu entfernen? Also bei wp_list_pages?

Ich kann in meinem Design einfach keine Liste gebrauchen :-((

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

marX

Nicht direkt, schau mal hier:
Template Tags/wp list categories « WordPress Codex
Kannst du das Design nicht per CSS beeinflussen? (Listenpunkte und Einrückungen entfernen, Listenpunkte inline anzeigen, ...)

pixelguy

Zitat von marX

Kannst du das Design nicht per CSS beeinflussen? (Listenpunkte und Einrückungen entfernen, Listenpunkte inline anzeigen, ...)

Im Grunde mache ich es immer so, in meinem aktuellen Fall darf es aber kein <li>-Element sein... Das hat folgende Gründe:

1. ich muss die eine Liste rechts ausrichten, leider funktioniert dies meines Wissens nicht in allen Browsern.

2. Das Element soll mit sIFR angezeigt werden. Da ich da kein <a>-Tag stylen kann, muss ich das <li>-Tag stylen was bei sIFR zu Fehlern führt. Ein <span> wäre daher wesentlich leichter.

3. Ich will die Liste mit runden Ecken anzeigen, eine Lösung wie ich dies in CSS hinbekomme kenne ich nicht. Nur mit Hilfe von mehreren DIVs

marX

Zitat von pixelguy

1. ich muss die eine Liste rechts ausrichten, leider funktioniert dies meines Wissens nicht in allen Browsern.

Wie richtest du denn die Liste aus, bzw. wo ist hier das Problem genau?

Zitat

2. Das Element soll mit sIFR angezeigt werden. Da ich da kein <a>-Tag stylen kann, muss ich das <li>-Tag stylen was bei sIFR zu Fehlern führt. Ein <span> wäre daher wesentlich leichter.

Ok.

Zitat

3. Ich will die Liste mit runden Ecken anzeigen, eine Lösung wie ich dies in CSS hinbekomme kenne ich nicht. Nur mit Hilfe von mehreren DIVs

PHP

<div class="sidebox">
  <div class="left-top"><span class="right-top"></span></div>
  <ul><?php wp_list_categories('title_li='); ?></ul>
  <div class="left-bottom"><span class="right-bottom"></span></div>
</div>

Wäre ein Ansatz... das CSS wäre sicher analog wie bei deinem Link oben.

Bliebe noch das sIFR-Problem. Aber da wirst du wohl kaum darum kommen, den von wp_list_categories() generierten Code von Hand anzupassen - entweder per Plugin (hier fidnest du die Filter) oder in Core-Dateien (davon rate ich aber aus naheliegenden Gründen ab).

pixelguy

Zitat von marX

Wie richtest du denn die Liste aus, bzw. wo ist hier das Problem genau?

Mit text-align:right

Zitat von marX

PHP

<div class="sidebox">
  <div class="left-top"><span class="right-top"></span></div>
  <ul><?php wp_list_categories('title_li='); ?></ul>
  <div class="left-bottom"><span class="right-bottom"></span></div>
</div>

Wäre ein Ansatz... das CSS wäre sicher analog wie bei deinem Link oben.

Ich brauche aber einen runden Rahmen um jedes <li> nicht nur um das ganze Teil...

Werde mal versuchen was ich mit dem entsprechenden Filter hinbekomme...

pixelguy

Was ich aber grade nicht verstehe ist, wie ich aus der Liste der Kategorien die Seiten ausgeben soll?!

marX

Zitat von pixelguy

Mit text-align:right

Für die gesamte Liste (<ul>), oder nur für die Listenelemente (<li>)? <ul> reagiert nicht auf text-align, da musst du z.B. mit margin-right:0; arbeiten. Das sollten aber alle wichtigen Browser verstehen.

Zitat

Ich brauche aber einen runden Rahmen um jedes <li> nicht nur um das ganze Teil...

Sind die <li> immer gleich hoch, z.B. einzeilig? Dann könntest du dem <li> die linke Rundung mitgeben, und dem <a> die rechte.

Zitat

Was ich aber grade nicht verstehe ist, wie ich aus der Liste der Kategorien die Seiten ausgeben soll?!

Sorry, da hab ich dich missverstanden. Aber für Seiten geht das natürlich analog:
Template Tags/wp list pages « WordPress Codex
Plugin API/Filter Reference « WordPress Codex (am besten hier mal die Seite nach "list_pages" durchsuchen)

pixelguy

Zitat von marX

Für die gesamte Liste (<ul>), oder nur für die Listenelemente (<li>)? <ul> reagiert nicht auf text-align, da musst du z.B. mit margin-right:0; arbeiten. Das sollten aber alle wichtigen Browser verstehen.

Momentan sieht es so aus, ich habe in einem alten Projekt mit text-align und float gearbeitet, hatte und habe aber immer probleme mit dem IE:

PHP

#nav_sub {
    width: 100%;
    overflow: hidden;
    float: left;
    display: inline;
    background: #fff;
    line-height: 0;
  }


  #nav_sub ul {
    display: inline;
    float: left;
    margin: 0;
    padding: 0;
  }


  #nav_sub ul li {
    display: inline;
    float: left;
    font-size: 0.8em;
    text-transform: uppercase;
    line-height: 1em;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }


  #nav_sub ul li a,
  #nav_sub ul li strong {
    background: transparent;
    color: #9b9b9b;
    display: block;
    margin: 0px 15px 30px 0;
    text-decoration: none;
    width: auto;
  }

Alles anzeigen

Zitat von marX

Sind die <li> immer gleich hoch, z.B. einzeilig? Dann könntest du dem <li> die linke Rundung mitgeben, und dem <a> die rechte.

Wäre einen Versuch wert :-)

Zitat von marX

Sorry, da hab ich dich missverstanden. Aber für Seiten geht das natürlich analog:
Template Tags/wp list pages « WordPress Codex
Plugin API/Filter Reference « WordPress Codex (am besten hier mal die Seite nach "list_pages" durchsuchen)

Hmm, hätte ich auch selber drauf kommen können, danke :-)

marX

Zitat von pixelguy

Momentan sieht es so aus, ich habe in einem alten Projekt mit text-align und float gearbeitet, hatte und habe aber immer probleme mit dem IE:

Mmh, ja, da gabs nen Bug, ich erinnere mich. Ich glaub das trat auf, wenn zwischen den <li>-Elementen Whitespaces (Leerzeichen, Zeileumbrüche, Tabstopps etc.) vorhanden waren. Diese könnte man mit einem Filter für wp_list_pages und einem kleinen regulären Ausdruck vielleicht rausfiltern.

float:left und display:inline für 1 Element ist übrigens reichlich sinnfrei, da float:left automatisch display:block setzt.

pixelguy

Hab es jetzt gelöst, war nicht ganz auf der Höhe... Ein float: right; reicht ja eigentlich aus. float und display auf einmal ist aufgrund von vers. IE-Bugs mit drin...

marX

Ja darauf wär ich als nächstes gekommen. :-D

Naja, ich glaub float und display:inline drüfte mehr Probleme verursachen als es löst... da würde ich lieber mit den bekannten CSS-Hacks für IE6+7 arbeiten, und Eigenschaften damit einfach überschreiben.

Egal, wenns jetzt geht ist doch alles in Butter. :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

<li>-Tag in Navigation entfernen

Jetzt mitmachen!

Benutzer online in diesem Thema