Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
i18n Navigation formatierbar?
#1
Hallo,

gerade habe ich mit dem i18n-Navigation-Plugin eine Navigation erstellt.

Ich bin schon nicht sicher, ob der Aufruf an der richtigen Stelle erfolgt:
Er steht in der Standardvorlage direkt nach dem Header-Aufruf und lautet:

<?php get_i18n_navigation(return_page_slug(),0,3,I18N_SHOW_MENU); ?>

So wird das seitliche Menü links über dem Seiteninhalt angezeigt. Soweit ok.

Woran ich mir jetzt die Zähne ausbeiße, ist das Formatieren des seitlichen Menüs. Es klebt ganz links am äußersten Bildschirmrand.

Wenn ich in der body-Definition der style.css ein padding von 20px einführe, schrumpft die ganze Seite und ich sehe, daß vor den Menüpunkten sogar noch Aufzählungspunkte stehen, die ohne padding außerhalb des Anzeigebereichs sind.

Ich hätte gerne die linke Navigation weiter nach rechts gerückt. Und auf die Aufzählungspunkte würde ich gerne verzichten.

Mit einem border-left in der reset.css habe ich auch experimentiert, aber das betrifft immer alle <a>-Bereiche, also werden dann auch Links im Text eingerückt :-(

Hat jemand eine Idee?

Viele Grüße
Hypertexter
Reply
#2
Lade die Seite hoch und schick mir den Link.
Dann schaue ich mir das mal an.

Beste Grüße
Reply
#3
Ich kann mir da gerade auch nichts drunter vorstellen. Grundsätzlich kann man das Menü auf unterschiedlichste Art und Weise formatieren und anpassen, wie es beliebt.

Oft kommt es jedoch vor, das die Menüformatierung mit bereits vorher getroffenen Formatierungen in Konflikt stehen. Da hilft dann, die CSS-Formatierungen bereichsweise auszuschalten um die betreffenden Formatierungen zu optimieren.

Ein Link zu der betreffenden Seite wäre in der Tat nicht schlecht.
Reply
#4
Dein Navigationselement hat keine <ul></ul> um die <li></li> Elemente
mach das am besten so.
#HTML
Code:
<div id="navigation">
<ul>
  <?php get_i18n_navigation(return_page_slug(),0,3,I18N_SHOW_MENU); ?>
</ul>
</div>
#CSS
Code:
#navigation{
width: 960px; /* das definiert deinen Abstand nach links und rechts der Navigation */
margin: 0 auto;
}
#navigation ul{
list-style: none; /* damit entfernst du die Aufzählungspunkte */
}
#navigation ul li{
float: left; /* damit sind die Navigaitonselemente nicht mehr untereinander sondern nebeneinander */
display: block;
}

Ich habe das Live bei deiner Seite getestet und es funktioniert.
Solltest du noch Probleme damit haben, melde dich.

Beste Grüße
Reply
#5
Hallo Frontend-Head,

das sieht gut aus, vielen Dank!

Nur die letzte Definition (#navigation ul li{...) führt zwar zu einer Menüzeile, was eigentlich gut aussieht, aber:
- die Wörter kleben direkt hintereinander, ohne Zwischenräume
und
- die Links funktionieren nicht, bzw. nur der erste oder die ersten beiden...

Weiß nicht, woran das liegen könnte, aber es sieht auf jeden Fall viel besser aus als vorher Smile

Gruß
Hypertexter
Reply
#6
margin-right:10px
Reply
#7
Das lag daran das dein "wrapper" über deiner Navigation liegt.
Übernehme das CSS unten und dann funktioniert es.

#navigation {
margin: 0 auto;
position: relative;
width: 795px;
z-index: 9999;
}

#navigation ul li {
display: block;
float: left;
margin: 10px 10px 10px 0;
}

Beste Grüße
Reply
#8
Wow,

ich habe zwar kaum etwas verstanden, aber es funktioniert und sieht gut aus...

vielen Dank!
Reply
#9
Kurz erklärt:

Alles basiert auf einem DIV-Container "navigation". Die Einstellungen werden auf Grundwerte gesetzt, damit er nicht irgendwo steht und irgendwie aussieht. Breite wird gesetzt und ein z-index. Die Breite ist klar, aber der z-index? Der vermeidet, das der Container von irgendetwas anderem überdeckt wird, weil sonst wäre er nicht mehr anklickbar und damit eine Navigation unmöglich.

Interessanter wird es bei der Formatierung der "ul li"-Tags. Jeder kennt <li> meistens untereinander, so wie eine Liste eben aussieht. Mit ein paar Einstellungen läßt sich eine Liste aber sehr flexibel nutzen. Eben so wie im Beispiel:

display:block - Jedes <li>-Element wird als Block behandelt
float:left - die Blöcke werden alle links ausgerichtet, sodaß sich der nächste Block rechts anschließt. Die Blöcke werden einfach von links beginnend hintereinander gesetzt. Wenn so ein Element in einem Text stehen würde, würde der Text am links ausgerichteten Element an der rechten Seite vorbeifließen.
... und zum guten Schluß werden noch die Ränder gesetzt: Gut zu wissen, wenn man weiß, das die Ränder von Links (oben) bis rechts (linker Rand) angegeben werden.

Beispiel: 10px 20px 30px 40px - d.h. Oben werden 10px Abstand sein, rechts 20, unten 30 und an der linken Seite 40.
Reply
#10
Hallo,

vielen Dank für eure Hilfe und Erklärungen.

Mit den vier Abstandsangaben hatte ich mich schon mal auseinandergesetzt, aber die Navigation hatte darauf eben gar nicht reagiert.

Ich glaube so langsam verstehe ich, was man mit CSS so alles machen kann: einem Container einen Namen geben und dann CSS-Definitionen machen, die nur in diesem Container gelten.

Was ich jetzt noch nicht probiert habe mangels Seiten: wenn es irgendwann sehr viele Menüpunkte werden, machen die aneinander gehängten Blockelemente dann auch einen Zeilenumbruch mit?

Das ist aber mehr interessehalber gefragt, es soll ja auch noch übersichtlich bleiben.

Viele Grüße
Hypertexter
Reply
#11
Hey Hypertexter,

ja deine Navigationselemente würden umbrechen. Allerdings, wie du schon selbst geschrieben hast,
solltest du nicht zuviele Navigationspunkte haben, da sonst die Benutzerfreundlichkeit darunter leidet.

Beste Grüße
Reply




Users browsing this thread: 1 Guest(s)