Navigation

[neelix]

Hallo Forum,

ich beschäftige mich jetzt erstmalig mit TypoLight und versuche meine eigene kleine HP zu erstellen.
Habe mir bei oswd.org ein schönes Template ausgesucht und nach div. Howtos in TL eingebunden. Aber jetzt stecke ich fest. Die Navigation verhält sich nicht wie gewünsch:

• Wie kann ich Reihenfolge der Menüpunkte festlegen?
• Wieso werden die ständig gewürfelt?

Hab leider über die Suche keine passenden Antworten gefunden.

Danke,
Neelix

[edit] zu Angucken: http://www.roerig-it.de [/edit]

PS: Ich bin Typo3 gewohnt, vllt setzte ich hier zu hohe Ansprüche

[do_while]

Hallo neelix,

erstmal willkommen bei TYPOlight.

Dein Problem mit den Menüpunkten in der Navigation liegt nicht an dem generierten HTML-Quellcode, sondern an Deinem noch nicht kompletten CSS dafür.

Wenn Du in den Quellcode der Seite schaust, sind die Punkte immer alle in der gleichen Reihenfolge, die in der Seitenstruktur festgelegt ist.

Es sieht mir so aus, als wenn Du die Menüpunkte floatest, nur den aktiven Menüpunkt (der kein Link ist) nicht.

[neelix]

Hallo,

ich verstehe nicht ganz was Du mit dem floaten meinst. Im Backend stehen die Punkte bei mir in dieser Reihenfolge:

• Start
• Webhosting
• Kontakt
• Impressum

Auf der Seite erscheint aber dann die aktive Seite immer als letzte (ohne Link).

Es muss doch möglich sein ein x-beliebiges Template in TL zu kriegen ohne das komplette CSS auszutauschen.

Neelix

[do_while]

Hallo neelix,

Du hast in dem CSS für #tabs10 a ein float:left; drin, das heisst ein Aufreihen an der linken Seite. Nur hat die aktive Seite keinen Link (<a>-Tag), sondern ein <span>-Tag.
Du solltest das float:left; vielleicht besser auf <li> legen, dann ist auch die aktive Seite dabei.

[schueler]

Hallo

schon geändert? ansonsten kann man auch das Template nav_default so umändern, dass auch der aktive link zum link wird..

[lucina]

Huhu schueler,

keine gute Idee an dieser Stelle, weil https://community.contao.org/de/showthread.php?t=2079. Es gibt ebenfalls überhaupt keinen Grund, ein Navigationstemplate zu verändern oder neu zu erstellen.

MfG, Carolina.

[neelix]

Hallo zusammen,

ich krieg die Navigation nicht umgesetzt.
Dieses Design hab ich mir zu "üben" ausgesucht http://www.oswd.org/design/preview/id/2634

Aber ohne ein anpassen des nav-Templates sehe ich keine Chance die Grafiken in die Navigation zu bekommen. Zumindest nicht so wie vom Autor vorgesehen.

Ich hab jetzt schon verschiedene Designs aus Joomla auf Typo3 adoptiert, da geht das quasi mit C&P.

Warum ist das mit TL so kompliziert? Ich doch alles da. Seitenaufbau, CSS, alles fix und fertig.

Neelix

[MacKP]

Hallo neelix,
die Grafik den li zuweisen und die hover grafik dann den a Elementen (oder direkt alles dem a Element). Das geht dann auch mit der Sprite Technik.
Nur so als Beispiel..

Aber ohne CSS Kenntnisse wirst du in keinem Fall glücklich werden, das brauchst du immer für jede Seite um diese dann anzupassen.

Viele Grüße

[neelix]

Hallo MacKP,

den zweiten (variablen) Teil der Grafik hab ich ja auch hinbekommen, aber mir fehlt der Ansatz für den ersten Teil.
Dieser blaue Balken besteht aus (in diesem Fall) zweiten Teilen. Der erste ist dem 'a'- Tag zugewiesen, der zweite dem folgenden Span (mit dem Text).
Das TL-Modul hat aber kein Span.
Achja, wie werde ich diese 'first', 'last' und active-Klassen los, die brauch ich nicht.

Also werd ich wohl doch mein eigenes nav-Template bauen müssen, es sei denn es kennt jemand die Lösung. Ist doch ein simples Wald-und-Wiesen-Template.

Neelix

[Sebastian]

HI

MacKP hat die Lösung doch schon verraten: Der linke Teil der Grafik zum <li>, der rechte zum <a>. Und die Klassen brauchst du vielleicht nicht, aber stören tun sie ja auch nicht. Also lass sie da, und ändere das Template bitte nicht!

Sebastian

[MacKP]

Hallo neelix,
wie gesagt: dem li und dem a dann in dem Fall.
Dein Template benutzt noch ein span, weil der Autor das li nicht benutzen konnte/wollte .... aus was für Gründen auch immer.
Ein bischen das Köpfchen anstrengen muss man schon bei CSS ;-)

Manche Klassen wirst du nicht brauchen, also ignoriere die doch einfach.
active kann man durchaus schon gebrauchen um den aktiven Navigationspunkt zu garnieren.

Und ja: es ist ein simples Wald-und-Wiesen Template.
Nur ist bei TL ein eigenes CSS-Framework mit dabei, was einem einiges an Arbeit abnehmen kann. Dadurch brauch man nicht erst ein HTML Template basteln um eine Seite zu erstellen.
Es ist eben ein etwas anderer Weg, den man gehen kann (aber auch nicht gehen muss).

Wobei dir das rummosern nicht helfen wird freude an TL zu entwickeln ;-)

Viele Grüße

---
Edit: man hab ich diesmal lange gebraucht zum tippen und überlegen wie ich das noch schreiben soll XD

[neelix]

OK, ihr habt gewonnen.

Fast hab ich's glaub ich jetzt. Also zumindest im Normalzustand stimmen die Hintergrundgrafiken jetzt. Nur der Hover Effekt klappt nicht richtig:
Der erste Teil wechselt nicht mit, auch nicht wenn ich ein li:hover definiere. Um beim rechten Teil verschwindet der Rand.
Ich hab jetzt schon mit den Paddings gespielt, aber es klappt nicht.

Sorry, wenn ich hier etwas ungeduldig bin. Ich bin Unix- und Cisco-Admin, kein Webdesigner. Ich fluche über Jommla genauso, deshalb wollte ich mir mal TL anschauen.

Neelix

[MacKP]

Hallo neelix,
versuchs mal mit:

 ul li:focus,
 ul li:hover,
 ul li:active

das sollte eigentlich gehen..

Viele Grüße

[schueler]

ich hab mal ne Frage, wieso man das nav_default Template nicht etwas verändern sollte? Ich meine, wenn man da sieht, was sonst gemacht wird und wie der code aufgebaut ist, kann man das recht gut nachmachen und aus dem aktiven link auch einen wirklichen link machen..

[lucina]

... aus dem aktiven link auch einen wirklichen link machen..

Selbstverständlich bist Du frei darin, zu entscheiden, was Du tun und was Du lassen möchtest. Das ist ja keine Frage.

Allerdings, um mal beim Beispiel zu bleiben: Was ist denn ein eigentlich 'aktiver Link'? Und wieso soll das ein tatsächlicher Link sein? Gewissermaßen ein Link auf sich selbst? Also eine programmiertechnische Tautologie? Das ist doch semantisch ein ziemlicher Unfug, denn wozu braucht es einen Link auf sich selbst.

Aktiv ist eine Seite, wenn sie angezeigt wird, und wenn sie angezeigt wird, dann gibt es keinen Grund, auf sie zu verlinken, weil sie ja schon da ist.

Was man einzig in diesem Fall benötigt ist ggf. ein Indikator, der zeigt, dass sie aktiv ist - und den hat das Navigations-tpl mit '.active' ja zu bieten. Und genau deshalb brauchst Du auch das navi-Template nicht zu ändern.

Nur mal so am Rande,
Carolina.

[neelix]

Hallo zusammen.

Herzlichen Dank erstmal. Bis auf einen kleinen Schönheitsfehler (den aber wohl kaum einer bemerken wird) klappt das jetzt.

Jetzt hab ich die nächste Hürde, aber dazu in nem neuen Topic.

Neelix