Hallo zusammen,
seit längerer Zeit schlage ich mich mit der Erstellung eines GMENUs herrum. Im Frontend zieht er mir merkwürdigerweise einen Abstand zwischen jeden Menueintrag. Selbst eine entsprechende Konfiguration der CSS (Margin, Border, Padding = 0px) zeigt keinen Effekt. Wäre super, wenn Ihr mir einen Tipp geben könntet, wo ich noch suchen könnte...
Hier der Link zur Seite:
http://typo3.p115909.mittwaldserver.info/index.php?id=8
Entsprechende Klassen/IDs aus dem CSS:
a:link, a:visited {
/*font-family:Georgia, "Times New Roman", Times, serif;*/
margin:0px;
padding:0px;
outline:none;
font-size:11px;
line-height:12px;
color: #8F5D45;
cursor:pointer;
text-decoration:none;
}
a:hover, a:active {
color: #6D4126;
}
img {
border:0px;
margin:0px;
}
lib.nav = HMENU
lib.nav.special = directory
lib.nav.special.value = 2
lib.nav.1 = GMENU
lib.nav.1.NO = 1
lib.nav.1.NO {
XY = 144,16
#backColor = #e8e4e0
backColor = #FFFFFF
transparentBackground = 0
wrap = |<br />
10 = TEXT
10.text.field = title
10.fontColor = #8B8B8B
10.fontFile = fileadmin/template/fonts/font.ttf
10.fontSize = 13
10.niceText = 1
10.offset = 16,12
}
Danke und viele Grüße,
Hendrik
Du hast mehrere CSS-Probleme plus ein html-Problem (br /). Die Liste würde ziemlich Lang werden, daher versuche ich Dir ein Paar Stichwörter zu geben:
Elementen Positionieren mit Float ( und Clear).
Vertikale Listennavigation mit CSS Formatiren (und Probleme mit IE < 8-).
Bilder in den Links (Unerklärliche Abständen zwischen den Elementen, DOCTYPE).
Ich hoffe das hilft Dir weiter. Wenn nicht – hoffe ich, dass ich später oder morgen mehr Zeit habe und etwas konkreter Deine Probleme angehen.
Hallo Emil,
vielen Dank für Deine Hinweise. Werde mal versuchen die Navigation als <ul> aufzubauen. Bzgl. der Fixes zu "Float + Clear" sowie "DOCTYPE" habe ich ein wenig Bammel, dass ich alles zerschieße.
Vielleicht hast Du noch einmal Zeit hierzu ein paar detailiertere Tipps zu geben.
Viele Grüße,
Hendrik
Zerschossen war es schon und ist nach Deinen Änderungen immer noch.
Gibt es einen Grund, warum Du den Doctype auf XHTML 1.1 setzest, den Content-Type aber als text/html ausgibst?
Wenn nicht - auf XHTML 1.0 Strict ändern.
Warum ist div#home_div_wrap_teaser nicht, wie auf den anderen Seiten, in div#div_wrap_main drin?
div#div_wrap_nav mus auch floaten, um die Floats ein zu schliesen.
div#div_wrap_logo wird eben nicht eingeschlossen. Es sieht nir so aus, da Du ihm eine Höhe gibst. Höhen-Angaben sind so gut wie nie nötig und bei Elementen mit Text-Inhalt schädlich.
Die Höhen-Angabe also weg und gib div#div_wrap_nav Float und Breite (z.B. 100%).
Mach div#home_div_wrap_teaser in div#div_wrap_main rein und gib ihm Clear und Breite.
Bei div#div_nav_menu:
Du hast jetzt eine UL da, aber keine LI.
Wenn Du die LI drin hast, melde Dich wieder. Denn es ist zu viel zu erklären, was gemacht werden mus, damit es browser übergreifend funktioniert.
So wie Du es jetzt hast, würde grob reichen UL und A zu floaten und ihnen eine Breite von 100% geben. Die Links muss Du nicht unbedingt floaten - ein "display: block;" tut es auch. Die Abständen zwischen den Elementen bekommst Du mit "vertical-align: bottom;" oder "display: block;" bei den Bildern (IMG) weg.
Hallo Emil
danke soweit für deine Hilfe. Zu deinen Punkten der Übersicht halber im Einzelnen:
1. DOCTYPE:
Den habe ich zugegebenermaßen so aus anderen Typo3-Projekten übernommen. Transitional funktioniert für mich ganz gut. Meinst Du es reicht, wenn ich den Hinweis zum Content-Type entferne?
2. div#home_div_wrap teaser
da auf dieser Seite der Content größer als der Wrapper wird, habe ich ihn aus selbigem entfernt.
--
<ul> und <li> sind im Menu implementiert. Deinen Hinweis bzgl. der Floats im Menu habe ich einmal ausprobiert. Problem ist nur, dass durch die Angabe im IE8 das Menu voll ausdehnt.
Das Menu soll zweispaltig werden. Sobald es zu den sichtbaren Hauptmenüpunkten eine Unterebene gibt, wird diese rechts neben dem Hauptmenü, auf der Unterlinie bündig, eingeblendet.
Als Beispiel dazu grob dieses statische Template:
http://blog-mag.de/cl/content.html
Sofern nur die erste Navi-Ebenene angezeigt wird, soll die Überschrift entsprechend nach links rutschen.
Hast Du eine Idee, wie sich dieses am besten umsetzen lässt?
Vielen Dank und Grüße,
Hendrik[/img]
1. Nein, zu XHTML 1.1 gehört normalerweise Content-Type application/xhtml+xml. Der IE hat aber Probleme damit. Deswegen weicht man auf text/html aus. Aber warum dann XHTML 1.1 nehmen? Also: XHTML 1.0 Strict (oder meinetwegen Transitional) und Content-Type text/html.
Alles kannst Du bei w3c nachlesen.
2. Dann machst Du was falsch. Was meinst Du mit wird größer?
Und noch mal: Höhen-Angaben sind (überhaupt und) in Deinem Fall nicht nötig.
Nur am Rande:
max-width bei div#div_nav_menu? Lieber "width".
Zu der zweiten Menu-Ebene:
UL der ersten Ebene dient als Containing-Block (bekommt also ein "position: relative;" und Breite). UL der zweiten Ebene bekommt ein "position: absolute;", "left: 100%;", "bottom: 0;" und "width: 100%;". Wenn Du Breiten und Ofsets definierst, hast Du auch keine Probleme mit den IEs.
Ersetze bitte das Menu-Bild mit einer echten Navi. Dann ist es leichter zu helfen.
Hallo Emil,
danke für die Tipps. Habe das ganze einmal umgesetzt. Sieht eigentlich ganz gut aus. Problem ist nur, dass der Titel, bei Einblendung der zweiten Menüebene, nicht nach rechts rutscht.
Siehe dazu das statische Template als "Sollzustand" hier:
http://blog-mag.de/cl/content.html
Im vergleich das jetzige Menu unter Typo3 (klick z.B. einfach auf Menupunkt "Über uns):
http://typo3.p115909.mittwaldserver.info/index.php?id=8
Meine Idee ist die zweite Menuebene in einem gesonderten Div rechts neben dem "Hauptmenu" (erste Ebene) anzuzeigen und dieses im Backend per Content-Element "Sitemap/Untermenu einblenden" einzubinden.
Dies ist vielleicht erstmal der erste Schritt um die Menus sauber von einander zu trennen, um dann die Abstände zwischen den einzelnen Menugrafiken zu entfernen.
Was denkst Du?
Viele Grüße und ein schönes Wochenende,
Hendrik
Wenn der Titel immer bündig am Menü (unabhängig davon, ob es nur eine Menü-Ebene sichtbar ist oder alle Zwei) positioniert sein sollte, wird es ein wenig kompliziert, da ja die zweite Ebene "absolute" positioniert wird (steht also nicht im Dokumentenfluss). Einfacher ist es, wenn die Ebenen räumlich getrennt sind. Die zweite Ebene wird dabei genau so eingebunden, wie die Erste und nicht als Content-Element (warum auch?).
Alle Drei (erste Ebene, zweite Ebene und Titel) floaten. Wenn die zweite Ebene erscheint, verschiebt sie den Titel weiter nach rechts.
Deine aktuelle Navigation ist falsch verschachtelt. Außerdem, so wie Du die zweite Ebene positionierst, brauchst Du für jede Seite einen anderen Wert für "bottom". Milde ausgedruckt ist das äußerst unpraktisch.
Ich habe Dir auf die Schnelle ein Beispiel gebaut. Sollte in allen Browsern funktionieren.
Dir auch ein schönes Wochenende.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Language" content="de" />
<meta name="language" content="de" />
<title>hendrik_de</title>
<style type="text/css" media="screen, projection">
* {
margin: 0;
padding: 0;
}
html {
font-size: 100.01%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
line-height: 1.4;
background: #fff;
}
div#page {
width: 200px;
margin: 5em auto;
}
div#div_nav_menu {
float: left;
width: 291px;
border-right: 1px solid #666;
}
div#div_nav_menu ul {
position: relative;
float: left;
width: 144px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
div#div_nav_menu ul li {
list-style: none;float: left;
}
div#div_nav_menu ul a {
display: block;
text-decoration: none;
}
div#div_nav_menu ul a img {
display: block;
border: none;
}
div#div_nav_menu ul ul {
position: absolute;
left: 146px;
bottom: 0;
border: none;
}
</style>
<!--[if lte IE 7]><style type="text/css" media="screen">
* html body {
font-size /**/: x-small;
text-align: center;
}
* html div#page {
text-align: left;
}
* html div#div_nav_menu {
width /**/: 292px;
}
</style><![endif]-->
</head>
<body>
<div id="page">
<div id="div_nav_menu">
<ul>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/04980aedf1.gif" width="144" height="18" alt="Über uns" /></a>
<ul>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/98ea60a626.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/507c117670.gif" width="144" height="18" alt="Über uns" /></a></li>
</ul>
</li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/c99f1e64f5.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/a1111b5248.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/757ffaafe9.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/1bd1d2c12f.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/d540071adb.gif" width="144" height="18" alt="Über uns" /></a></li>
</ul>
</div>
</div>
</body>
</html>
P.S.: div#page ist nur dafür da, um die Navi auf der Seite zu zentrieren. Für Deine Website brauchst Du es nicht. Ich wollte bloß nicht die ganze Seite von Dir kopieren und hier rein posten.
Hallo Emil,
vielen Dank für deine Hilfe und deine Mühe!
Ich habe versucht deinen Code mal ein wenig zu erweitern, so dass die dritte Linie (Trennung zwischen Menüebene 2 und Seitentitel) flexibel eingeblendet werden kann. Habe es jetzt noch nicht in Typo3 ausprobiert, aber was meinst Du, bzw. was sagt dein geschulter Blick?
Habe den Seitentitel als List-Element mit eingebaut und positioniere diesen im Menu. Die dritte Trennline (li#border_e2) erzeuge ich ebenfalls flexibel über eine absolute Positionierung, aber schau ruhig selbst:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Language" content="de" />
<meta name="language" content="de" />
<title>hendrik_de</title>
<style type="text/css" media="screen, projection">
* {
margin: 0;
padding: 0;
}
html {
font-size: 100.01%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
line-height: 1.4;
background: #fff;
}
div#page {
width: 200px;
margin: 5em auto;
}
div#div_nav_menu {
float: left;
width: 291px;
/*border-right: 1px solid #666;*/
/*habe ich entfernt da Linie rechts nur bei 2. Menüebene angez. werden soll. Siehe: li#border_e2*/
}
div#div_nav_menu ul {
position: relative;
float: left;
width: 144px;
border-left: 1px solid #666;
border-right: 1px solid #666;
}
div#div_nav_menu ul li {
list-style: none;float: left;
}
div#div_nav_menu ul a {
display: block;
text-decoration: none;
}
div#div_nav_menu ul a img {
display: block;
border: none;
}
div#div_nav_menu ul ul {
position: absolute;
left: 146px;
bottom: 0;
border: none;
}
li#seitentitel {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
position: absolute;
bottom: 0px;
border: none;
left:146px;
padding-left:16px;
white-space:nowrap; /*Verhindert Umbruch*/
}
/*erzeugt eine linie vor dem Seitentitel der zweiten Menüebene*/
li#border_e2 {
border-left: 1px solid #666;
height: 108px;
position:absolute;
bottom:0px;
left:146px;
}
</style>
<!--[if lte IE 7]><style type="text/css" media="screen">
* html body {
font-size /**/: x-small;
text-align: center;
}
* html div#page {
text-align: left;
}
* html div#div_nav_menu {
width /**/: 292px;
}
</style><![endif]-->
</head>
<body>
<div id="page">
<div id="div_nav_menu">
<ul>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/04980aedf1.gif" width="144" height="18" alt="Über uns" /></a>
<ul>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/98ea60a626.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/507c117670.gif" width="144" height="18" alt="Über uns" /></a></li>
<li id="border_e2"> </li> <!-- Anzeige bei zweiter Menüebene -->
<li id="seitentitel">Titel E.2</li> <!-- Anzeige bei zweiter Menüebene -->
</ul>
</li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/c99f1e64f5.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/a1111b5248.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/757ffaafe9.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/1bd1d2c12f.gif" width="144" height="18" alt="Über uns" /></a></li>
<li><a href="#"><img src="http://typo3.p115909.mittwaldserver.info/typo3temp/menu/d540071adb.gif" width="144" height="18" alt="Über uns" /></a></li>
<li id="seitentitel">Titel E.1</li> <!-- Anzeige bei nur einer Menüebene -->
</ul>
</div>
</div>
</body>
</html>
Jetzt müsste ich unter Typoscript es nur noch schaffen, dass sich die Positionierung des Seitentitels flexibel an den jeweiligen Menüzustand (eine oder zwei Ebenen) anpasst. Was meinst Du dazu?
Viele Grüße, vielen Dank und noch einen schönen Sonntag!
Hendrik
Hallo Hendrik,
aus Sicht der Semantik ist das aber nicht gerade toll.
Wenn Du bei den verschachtelten Navi-Ebenen bleiben willst, muss Du nur dafür sorgen, das die gesamte Navigation in die Breite wächst, wenn die zweite Ebene erscheint. Da das UL der zweiten Ebene absolute positioniert wird, hat es keinen Einfluss auf die Breite der Navi. Wir können aber das LI-Element, was die zweite Ebene enthält, dafür benutzen, um Platz für die Unterebene zu schaffen. Das LI bekommt beispielsweise eine class="ifsub" nur dann, wenn es gewählt ist und Unterpunkte hat. Im TypoScript wäre das ACTIFSUB. Normal sind die LIs 144px Breit. Die class="ifsub" mach sie doppelt so Breit. So wird Platz für die Unterebene frei und der Titel wird nach rechts verschoben.
Hier habe ich ein Beispiel hoch geladen. Es sind zwei Seiten - mit und ohne zweite Ebene. Hin und her kannst Du wechseln indem Du auf das Logo und auf den Menü-Punkt "Über uns" klickst.
Wenn die zweite Ebene sichtbar ist, gibt es kein Element, was die Trennlinie (Border) in der Mitte darstellen könnte. Ich habe dafür eine Grafik genommen (als Hintergrund bei der äußeren UL) :
home.arcor.de/emil.petkov/hendrik/
Der Schwachpunkt dieser Lösung ist die vertikale Positionierung des Titels. Das geht nur so lange gut, bis die Anzahl der Hauptmenü-Punkte sich nicht ändert (bekannt ist).
Ich habe mir Dein Quellcode noch mal angeschaut. Du hast nur lauter Inhalt-Elementen drin. Kann es sein, dass Du kein Template benutzest?
EDIT:
In Deinem Layout werden die Floats immer noch nicht richtig eingeschlossen. Falls Du dabei Schwierigkeiten hast, sag bitte Bescheid.
Und muss es wirklich ein Grafik-Menü sein?
Hallo Emil,
vielen Dank für deine guten Tipps und die tolle Hilfe!
Alles soweit prima - Deine Beispiele in die Seite eingefügt. IE-Tester (5-8-), Safari, Opera zeigen keine Probleme.
Problematisch ist aktuell nur die Ausgabe des Menüs bei nur einer Menüebene (z.B. Startseite). Dort erscheint die horizontale Trennlinie hinter den Menüpunkten. Die Menüpunkte haben eigentlich einen transp. Hintergrund. Ich hatte sie nur zu Layoutzwecken mit einem weißen HG versehen. Siehe dazu:
http://typo3.p115909.mittwaldserver.info/index.php?id=8
Anbei noch das aktuelle Typoscript des Menüs:
lib.nav = HMENU
lib.nav.special = directory
lib.nav.special.value = 2
# ERSTE MENUEBENE
lib.nav.1 = GMENU
lib.nav.1.NO = 1
lib.nav.1.wrap = <ul>|</ul>
lib.nav.1.NO.allWrap = <li>|</li>
lib.nav.1.NO {
XY = 144,18
#backColor = #e8e4e0
backColor = #FFFFFF
transparentBackground = 1
10 = TEXT
10.text.field = title
10.fontColor = #8B8B8B
10.fontFile = fileadmin/template/fonts/font.ttf
10.fontSize = 14
#10.niceText = 1
10.antiAlias = 2
10.offset = 16,12
}
lib.nav.1.ACTIFSUB < .lib.nav.1.NO
lib.nav.1.ACTIFSUB {
wrap = <li class="ifsub">|</li>
}
# ZWEITE MENUEBENE
lib.nav.2 = GMENU
lib.nav.2.NO = 1
lib.nav.2.wrap = <ul>|</ul>
lib.nav.2.NO.allWrap = <li>|</li>
lib.nav.2.NO {
XY = 144,18
#backColor = #e8e4e0
backColor = #FFFFFF
transparentBackground = 0
10 = TEXT
10.text.field = title
10.fontColor = #8B8B8B
10.fontFile = fileadmin/template/fonts/font.ttf
10.fontSize = 14
#10.niceText = 1
10.antiAlias = 2
10.offset = 16,12
}
Natürlich ist diese Seite alles andere als "Standart" und eben nicht einfach, was ich hier ständig erfahre. Dieses Layout muss aber "leider" so umgesetzt werden, eben auch mit GMMENUs. Als Typoneuling fange ich daher hier echt an zu schwimmen. Was meinst Du aus deiner Erfahrung: Stehen wir kurz vor der Lösung des Problems, oder ist da noch eine menge Arbeit mit dem Menü verbunden?
Freue mich von Dir zu lesen!
Viele Grüße und nochmal vielen Dank für deine tolle Hilfe,
Hendrik
Hintergrund-Bild (Trennlinie): schreibe bitte "repeat-y 144px top" anstatt "repeat-y center top"
Navigation: Falsch verschachtelt. Vergleiche bitte den Quellcode mit dem vom Beispiel. Und validiere.
Floats einschließen nicht vergessen.
Den Rest schau ich mir später an - bin gerade in Eile.
Hallo Emil,
Wenn ich es richtig sehe, zieht das Typoscript fehlerfaft den ersten <li class="ifsub"> nur um den Menüpunkt "Über uns" in der ersten Menüebene. Erst dann beginnt er mit dem <UL> der zweiten Menüebene. Vereinfacht ungefähr so:
FALSCH:
<ul 1. Ebene>
<li ifsub>
ÜBER UNS
</li (ifsub)>
<ul 2. Ebene>
<li>
Philosophie
</li>
</ul zweite Ebene>
<li>
.. usw.
RICHTIG WÄRE nach deiner Vorgabe:
<ul 1. Ebene>
<li ifsub>
ÜBER UNS
<ul 2. Ebene>
<li>
Philosophie
</li>
</li (ifsub)>
</ul zweite Ebene>
<li>
.. usw.
Habe Mitterweile überall im Typoscript einmal ausprobiert mit Wrap/allWrap zu arbeiten, aber ich bekomme es einfach nicht hin... Hast Du einen Tipp, wie ich das abschließende </li> des IFSUB erst nach die Auflistung bekomme?
Hier nocheinmal das TS:
lib.nav = HMENU
lib.nav.special = directory
lib.nav.special.value = 2
# ERSTE MENUEBENE
lib.nav.1 = GMENU
lib.nav.1.NO = 1
lib.nav.1.wrap = <ul>|</ul>
lib.nav.1.NO {
wrap = <li>|</li>
XY = 144,18
backColor = #e8e4e0
#backColor = #FFFFFF
transparentBackground = 1
10 = TEXT
10.text.field = title
10.fontColor = #8B8B8B
10.fontFile = fileadmin/template/fonts/font.ttf
10.fontSize = 14
#10.niceText = 1
10.antiAlias = 2
10.offset = 16,12
}
lib.nav.1.ACTIFSUB < .lib.nav.1.NO
lib.nav.1.ACTIFSUB {
wrap = <li class="ifsub">|</li>
}
Vielen Dank und viele Grüße,
Hendrik
Stark vereinfacht sollte Deine Navi in etwa so aussehen:
lib.nav = HMENU
lib.nav.special = directory
lib.nav.special.value = 2
lib.nav.1 = GMENU
lib.nav.1 {
wrap = <ul>|</ul>
NO = 1
NO {
allWrap = <li>|</li>
}
ACTIFSUB = 1
ACTIFSUB {
allWrap = <li class="ifsub">|
}
}
lib.nav.2 < .1
lib.nav.2 {
wrap = <ul>|</ul></li>
}
EDIT: Ich sehe gerade, Du hast nicht alles aus meinem Beispiel übernommen. So positioniere ich beispielsweise die Suche "absolute". Dass ich sie nicht ( wie Du ) nach rechts floate, hat seinen Grund. Bei einer Schriftvergrößerung im Browser durch den User rutscht die Suche unter dem Titel - unschön. Kommt daher, dass der Titel ohne Breiten-Angabe floatet wird. Das ist aber in Ordnung so, bzw. das brauchen wir so.
etux schrieb
...Bei einer Schriftvergrößerung im Browser durch den User rutscht die Suche unter dem Titel - unschön...
Bzw. auch wenn der Titel-Text etwas länger ist. Wie hier:
http://typo3.p115909.mittwaldserver.info/index.php?id=4
Wie kommst Du denn sonst voran? Gibt es noch Probleme?