Problem mit nth-child css Formatierung der nav

    Hallo zusammen!

    Ich erstelle gerade eine neue Webseite http://www.jubi-translations.de und kämpfe mich mit der Navigation ab. Vielleicht kann mir ja einer von euch helfen, ich weiß nämlich nicht mehr weiter und finde im netz irgendwie auch nicht die passende Lösung.

    Ich verwende derzeit wordpress 3.6.1 mit dem theme tranquil reflections.

    Normalerweise ist die Navigation in diesem Thema mit nur einem grauen Balken vorgesehn. Ich habe die Navigation per CSS also verdoppelt, vergrößert und die Ecken abgerundet. Soweit kein Problem.

    Nun wollte ich einstellen das der 5. li im zweiten Balken anfängt ... sollte ja eigentlich kein problem mit nth-child(5) und dann Position sein, oder? diese Regel greift aber überhaupt nicht. Weder mit important noch sonst etwas.

    hier der code: #nav li a:nth-child(5){font-size:200%;} (font-size habe ich nur als beispiel gewählt)

    Wenn ich eine first-child Regel anwende greift die Formatierung (aber natürlich auf alle li).

    Vielleicht hat ja jemand eine Idee, das wäre super ich bin nämlich langsam mit meinem Latein am Ende. Wenn ihr noch mehr Infos braucht sagt einfach bescheid. Vielen Dank schonmal!

    • 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

    Hallo,

    dein 4. Listenpunkt ist zu lang für die 1. Zeile! ;-)
    So bricht er dir immer um, weshalb du die Liste verkleinern musst.

    '#nav li a' würde ich allgemein für alle ansprechen (font-size, color, etc.) und den 5. Punkt ganz dezidiert, also:
    '#nav li:nth-child(5) {position: ....}

    'position' wär mir bezüglich Layout aber zu heikel und ich würde je nach CSS/Layout eher 'whitespace: wrap;' verwenden, einen erzwungen Zeilenumbruch.

    Gruß,
    Gsi

    Gsi

    Danke für die schnelle Antwort und den Tipp! Das Wochenende war mal wieder hektischer als erwartet deswegen komme ich erst jetzt dazu zu antworten :lol:.

    Mein Plan war genau wie du geschrieben hast das 5. Element direkt anzusprechen und it Position an die richtige Stelle zu bringen. Habe deinen Ratschlag befolgt die li insgesamt kleiner zu machen (kein Problem bis dahin), seltsamerweise greift überhaupt keine nth-child Formatierung (egal welches Element der li ich anspreche), kann das sein?. Vielleicht stelle ich mich auch nur an aber vielleicht hast du/jemand ja noch eine Idee?

    dein Familiensinn in allen Ehren :-)
    aber "li" und "a" sind hier keine "Kinder" (nth-child) sondern einfach Typen (nth-of-type) :-))))
    also nicht


    HTML
    #nav li:nth-child(5)

    sondern


    HTML
    #nav li:nth-of-type(5)
    Zitat von Monika


    sondern

    HTML
    #nav li:nth-of-type(5)


    Nein, geht auch nicht - habe es gerade in allen Konstellationen ausprobiert, genauso nth-child selbst ;-/ ... versteh es auch nicht - müsste eigentlich funktionieren *kopfkratz*

    acidangel
    Das "nth-child"-Tag ist ziemlich sensibel und scheint sich doch nicht so verwenden zu lassen, wofür es vorgesehen ist.

    Zitat

    seltsamerweise greift überhaupt keine nth-child Formatierung (egal welches Element der li ich anspreche), kann das sein?


    Ja, kann sein - zumindes 'whitespace' nicht. Farben durchaus, bzw. es kommt auch draufan in welcher Reihenfolge man gewisse Eigenschaften verwendet. Bez. nth-child bin ich momentan grad etwas ratlos *kopfkratz*

    Es gäbe da durchaus mehrere andere Lösungen (ohne nth-child), die einfachste wäre:
    1) CSS Listenpunkte: "display: inline;" (statt 'float: left')
    2) HTML: nach dem 4. Listenpunkt ein "break"

    HTML
    #nav li {display: inline; ... }
    HTML
    ...
<li>4. Eintrag</li><br />
...

    Ist zwar nicht 'valide' (ppsssssttt - nicht weitererzählen!), aber auf einen Error mehr oder weniger kommt es da auch nicht mehr draufan :wink:

    Gruß,
    Gsi

    Vielen Dank erstmal für die Hilfe!

    Monika
    Leider hat das mit dem nth-of-type nicht funktioniert. Aber ich kannte diese Art ein Element anzusprechen noch gar nicht, also hab ich wieder was neues gelernt. Vielleicht kann ich das ja mal für eine andere Seite anwenden :-P.

    Gsi
    Danke für die "Lösung". Ich sehe das auch so das man auf das eine Fehlerchen mehr verzichten kann wenn es funktioniert.
    Ich schäme es mich ja zu fragen, die nav ist ja im body und die wird in der index.php genannt. Aber wo finde ich die passende html Seite :oops:? Es ist das erste mal das ich mit Wordpress arbeite, bisher hab ich alle Webauftritte mit reinem html und css in einem Editor erstellt und bearbeitet.

    acidangel
    Danke fürs Lob :oops:

    Zitat von acidangel

    ...die nav ist ja im body und die wird in der index.php genannt. Aber wo finde ich die passende html Seite...


    Ich schreibe meine Themes ja selber ... kenne nur das WP-Theme Twenty-Twelve ... da ist es in der Kopfzeile (header.php):
    #site-navigation

    Bei meinen Themes ist die Navi in der Fußzeile (footer.php), aus SEO-Gründen und wegen der Barrierefreiheit.

    Also:
    ACP/Dashboard -> Design -> Editor ... und dann entweder Kopf- oder Fußzeile (im Menü rechts)

    Jeder Coder packt sie wohl woanders hin ... aber diese zwei Dateien decken 99% ab.

    Gruß,
    Gsi

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden