Zum Inhalt springen

Menü Wrap Problem

Erstellt am 13. Februar 2014 · 20 Antworten · letzte Antwort am 27. Februar 2014 · Seite 1 von 2

Tags: TYPO3 6.x, Frage

stella21 ·

Hallo zusammen,

ich habe folgendes Problem. Bestimmt ganz einfach. Aber es will einfach nicht klappen.

Ich habe folgendes Typoscript

temp.mainMenu = HMENU
temp.mainMenu.special = list
temp.mainMenu.special.value = 56,43,42,53
temp.mainMenu.1 = TMENU
temp.mainMenu.1 {
 NO.allWrap = <div class="einzeln">| </div>
}

Die Ausgabe ist folgende:

Menü 1 | Menü 2 | Menü 3 | Menü 4

Nun möchte ich nach dem Menüpunkt Menü 4 folgenden Link
noch manuell einfügen: <a href="">www.test.de </a>

Dieser soll natürlich die selbe Formatierung haben wie die anderen Punkte.

Ich bekomme es einfach nicht hin. Wäre mega nett wenn Ihr mir helfen würdet. Ist bestimmt ganz einfach, aber es will einfach nicht.

Danke!

Schweriner ·

Mhh OptionSplits?

temp.mainMenu = HMENU
temp.mainMenu.special = list
temp.mainMenu.special.value = 56,43,42,53
temp.mainMenu.1 = TMENU
temp.mainMenu.1 {
 NO.wrapItemAndSub = <div class="einzeln">|</div>|*|<div class="einzeln">|</div>|*|<div class="einzeln">|</div><a href="">www.test.de </a>
}
somaberlin ·

Es gibt auch den Seitentyp ‚Link zur externen URL‘. Also unter Funktionen eine Seite anlegen vom eben diesen Typ und dann die id in das special.value

stella21 ·

Hallo schweriner, danke für dein Beispiel. Leider geht das nicht. Ich bekomme zwar die Menüpunkte angezeigt, jedoch ist der letzte Menüpunkt "www.test.de" nicht formatiert wie die anderen.

Hallo somaberlin, ja mit dem Seitentyp "Link zur externen URL" hatte ich es als erstes versucht, leider geht das aus welchem grund auch immer nicht. daher kam ich ja dann auf dieses andere ...

stella21 ·

Dein Code hat doch geholfen Schweriner.

temp.mainMenu.1 {
NO.wrapItemAndSub = <div class="einzeln">|</div>|*|<div class="einzeln">|</div>|*|<div class="einzeln">|</div><div class="einzeln"><a href="">www.test.de </a></div>
}

Hab um den letzten Menüpunkt auch ein div gelegt, und juhuuuuu es geht 🙂

Danke 🙂

stella21 ·

Ich hab mal wieder ein Problem mit einem Menü.

Ich habe folgenden html Aufbau:

<div>
  <a href="#">home</a>
  <a href="#">news</a>
  <a href="#">produkte</a>
  <a href="#">aktivitäten</a>
  <a href="#">referenzen</a>
  <a href="#">objekthändler</a>
  <a href="#">3D-Downloads</a>
  <a href="#">bezüge</a>
  <span style="padding-left: 100%; display: inline-block;"></span>
</div>

Die letzte Zeile "<span>...</span>" benötige ich, dass die Punkte horizontal auf die komplette Breite verteilt werden.

Nun wollte ich, dass das Menü von Typo3 kommt.

HTML Datei:

<div>
  <f:format.raw>{navi}</f:format.raw>
</div>

Typoscript:

temp.mainMenu = HMENU
temp.mainMenu.special = list
temp.mainMenu.special.value = 19,21,23,25,27,29,31,33
temp.mainMenu.1 = TMENU
temp.mainMenu.1 {
  NO.wrapItemAndSub = <a>|</a>
}

Egal, was bei der Zeile mit "NO.wrapItemAndSub" steht, die Menüpunkte sind alle aneinander, ohne Leerzeichen. Ich will Sie gerne aber auf die komplette Breite verteilt haben.

Wäre über jede Hilfe dankbar. Danke!

stella21 ·

Keiner einer Idee?
Habe im Internet auch nur nach CSS Lösungen gesucht. Aber da gibt es nichts richtiges dazu. Nur diese Geschichte mit dem span.
Ich muss das daher irgendwie in Typo3 hinbekommen. Aber keine Ahnung wie.
Wäre dankbar wenn ihr mir helfen würdet!

Chrissli ·

Schweriner dachte hier bestimmt an sowas wie

text-align: justify;

für den Container mit dem Menü.
Alternativ kannst du auch Breite und oder Padding für die Menüpunkte festlegen.
Ggf. mit

display: block;
float: left;

bei den Links, damit du Abmessungen der A-Tags festlegen kannst.
Aber das sind CSS Probleme, nicht Typo3. Wenn dein Menü in HTML und CSS gut aussieht ->Ausgabe in Typo3 nachbauen, CSS einbinden -> Sollte passen

stella21 ·

sowas habe ich ja. Wie gesagt, wenn es noch nicht in Typo3 ist klappt es wunderbar. das nachbauen in typo3 will irgendwie nicht. bin echt am verzweifeln.

Chrissli ·

Hallo Stella,

das ist doch schon mal eine Aussage.
Wenn dein HTML so funktioniert

stella21 schrieb

Ich habe folgenden html Aufbau:

<div>
  <a href="#">home</a>
  <a href="#">news</a>
  <a href="#">produkte</a>
  <a href="#">aktivitäten</a>
  <a href="#">referenzen</a>
  <a href="#">objekthändler</a>
  <a href="#">3D-Downloads</a>
  <a href="#">bezüge</a>
  <span style="padding-left: 100%; display: inline-block;"></span>
</div>

Die letzte Zeile "<span>...</span>" benötige ich, dass die Punkte horizontal auf die komplette Breite verteilt werden.
Nun wollte ich, dass das Menü von Typo3 kommt.

Und per TS nicht, gehe ich mal davon aus, dass nur die HTML-Ausgabe noch nicht ganz übereinstimmt.
Z.b. Sehe ich nicht, wo du den nachfolgenden SPAN-Tag zu deinem Menü einbaust.
Probier doch mal diesen in deinen HTML-Teil einzubauen:

<div>
  <f:format.raw>{navi}</f:format.raw>
  <span style="padding-left: 100%; display: inline-block;"></span>
</div>

Oder bau in per TS ein:

Typoscript:

temp.mainMenu = COA
temp.mainMenu {
  10 = HMENU
  10 {
    special = list
    special.value = 19,21,23,25,27,29,31,33
    1 = TMENU
    1 {
      NO.wrapItemAndSub = <a>|</a>
    }
  }
  20 = TEXT
  20.value = <span style="padding-left: 100%; display: inline-block;"></span>
}

Schöner wäre natürlich dem SPAN eine Klasse zu geben und dann das in die CSS-Datei auszulagern.

Sollte es jetzt immer noch nicht funktionieren solltest du mal den ausgegebenen Quelltext mit deinem HTML-Menü vergleichen und
prüfen ob dein CSS korrekt eingebunden ist.
Mit Firefox-Plugins wie Firebug oder im aktuellen IE bzw Chrome mit dem internen Editor ( jeweils F12 drücken )
kannst du auch prüfen ob ggf. deine CSS-Styles durch andere CSS-Angaben überschrieben werden.

stella21 ·

Hallo Chrissli,

die 1. Variante (HTML Teil) hatte ich schon ausprobiert. Ging nicht. Die zweite gerade eben. Geht auch nicht. Was ich vielleicht vergessen habe zu erwähnen: Wenn ich mir den Quellcode anschaue, sehe ich diese Zeile mit dem Span. Nur kapiert er diese einfach irgendwie nicht.

Wie gesagt solange alles ohne Typo3 läuft funktioniert alles wunderbar. Sobald Typo3 dabei ist, ignoriert er einfach die Zeile.

Echt komisches Ding ... 🙁

etux ·

Ich habe nur die letzten Beiträge gelesen. Sorry, wenn ich was missverstanden habe.

stella21 schrieb

Echt komisches Ding ...

Generell zum Thema inline-Elementen mit „text-align: justyfy“ formatieren, als wäre es Text.
Wenn in einem Text keine Leerzeichen stünden (eben als ein ewig langes Wort) hat „text-align: justyfy“ auf den Text keine Wirkung. Logisch, oder? 😉
Genau so ist es auch, wenn inline-Elementen damit formatiert werden. Zwischen den Elementen soll mindestens ein Leerzeichen sein.

Ein extra Element im Quellcode ist nicht unbedingt notwendig. Per CSS geht das auch:
http://xhtmlforum.de/69940-3-links-mittig-positionieren.html#post532978

Chrissli ·

Und es ward prophezeit von einem der da wird kommen.
Und dieser wird stehen vor dem Walde und nicht sehen
die Bäume darin sondern den Wald an sich.

Klingt irgendwie lögisch das mit den Leerzeichen.
Also entweder mit

NO.wrapItemAndSub = <a>|</a>&nbsp;

oder

NO.stdWrap.noTrimWrap = |<a>|</a> |
stella21 ·

Hallo,

zuerst einmal ein großes DANKE an etux und Chrissli. Bin jetzt schon viel weiter 🙂

Das einzigste komische ist, dass der IE spinnt. Er macht zwischen den Menüpunkten nur ein Leerzeichen und fertig ... Desweiteren hab ich ein Menüpunk mit einem Leerzeichen drinnen "3D Downloads". Das ist jetzt leider nicht so geschickt.

Hmmmmm ...

etux ·

Nein, das ist nicht, was komisch ist.
Komisch finde ich, dass Du Dich immer noch weigerst, Link oder Quellcode Deiner aktuellen Versuche zu posten.
Ich verzichte jetzt darauf, Links zu den Threads zu posten, wo Du das hoch und heilig versprichst.
Und mindestens ein mal bin ich auch aus so einem Thread ausgestiegen – da Du so hartnäckig darin warst, weder Link noch Code zu posten.
Auch jetzt weiß ich nicht, weder wie Dein Code aussieht noch welchen IE Du meinst.

Ich habe, wie gesagt, nicht alle Beiträge im Thread hier gelesen. Daher kenne ich auch den Grund nicht, wieso Ihr (Du und Chrissli) doppelte (aber nicht identische) a-Elementen für das Menü braucht.

Bei Menüs hat man meistens eine Aufzählung von Links. Daher ist es auch nicht verkehrt, eine Liste (ul) dafür zu verwenden.

Chrissli ·

Daher kenne ich auch den Grund nicht, wieso Ihr (Du und Chrissli) doppelte (aber nicht identische) a-Elementen für das Menü braucht.

Weil das die Ausgangsstellung war die in HTML und CSS funktioniert hat und in Typo3 nachgebaut werden sollte. Ob das jetzt eine gute Ausgangsstellung ist oder nicht ist eine andere Frage. Aber ich arbeite lieber eine Baustelle nach der anderen ab.

etux ·
Chrissli schrieb

Daher kenne ich auch den Grund nicht, wieso Ihr (Du und Chrissli) doppelte (aber nicht identische) a-Elementen für das Menü braucht.

Weil das die Ausgangsstellung war die in HTML und CSS funktioniert hat und in Typo3 nachgebaut werden sollte. Ob das jetzt eine gute Ausgangsstellung ist oder nicht ist eine andere Frage. Aber ich arbeite lieber eine Baustelle nach der anderen ab.

Ich hoffe, Du hast das nicht als Kritik erfasst, denn so war es nicht gemeint. o.O
Verstehen tue ich es aber immer noch nicht, habe gerade die Vorbeiträge überflogen. Egal – nicht wirklich wichtig. 🙂

Für spella21 hatte ich schon vor Monaten einen Ordner auf meinem Test-Server erstellt. Darin habe ich jetzt auch die menu-justify.html rein gepackt.
tests.emil-webdesign.net/stella21/
Es soll die Probleme zeigen, die dann entstehen, wenn die Menü-Punkte selbst Leerzeichen oder Bindestriche u.Ä. beinhalten und wie sie zu beseitigen sind.
Nur zur Info: wenn nicht extra anders formatiert, haben „span“ und „a“ von Natur aus ein „display: inline, da sie Inline-Elemente sind.

Chrissli ·

Ich hoffe, Du hast das nicht als Kritik erfasst, denn so war es nicht gemeint.

Nö, wollte mich nur irgendwie rechtfertigen, denn

Verstehen tue ich es aber immer noch nicht

über manche Dinge denke ich nicht immer sofort nach. Du hast natürlich vollkommen recht!!😉
Respekt übrigens für die Mühe die du dir hier machst. Würde dir 'nen Daumen geben, aber das funktioniert ja aktuell mal wieder nicht...